Создание пригодного для использования geojson нескольких точек из Django Rest Framework в Angular с помощью ngx-leaflet

Итак, у меня есть массив из 9000 объектов, возвращаемых через HttpClient из моего API-интерфейса django rest. Эти объекты уже имеют формат Geojson. Как мне превратить это в слой для отображения с помощью ngx-leaflet. Я легко смог понять это с помощью базового javascript, но я запутался, делая это внутри angular. Раньше я делал все это внутри GeoDjango, но теперь я разделил переднюю и заднюю часть.

Вот мой код для моего компонента:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Layer, tileLayer, geoJSON, LayerOptions } from 'leaflet';
import 'leaflet-providers';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

layers: Layer[];
layersControl: any;
center = [47.215282, -109.483294];
fitBounds = [[49.378264, -116.492570], [44.757856, -103.528704]];

constructor(private http: HttpClient) { }

ngOnInit() {
    this.http.get<any>('http://127.0.0.1:8000/data/people')
        .subscribe(geo1 => {
            this.http.get<any>('http://127.0.0.1:8000/data/places')
                .subscribe(geo2 => {
                    let defaultBaseLayer = tileLayer.provider('OpenStreetMap.Mapnik');
                    let defaultOverlay = geoJSON(geo1);
                    this.layers = [
                        defaultBaseLayer,
                        defaultOverlay
                    ];
                    this.layersControl = {
                        baseLayers: {
                            'OpenStreetMap Mapnik': defaultBaseLayer,
                            'OpenStreetMap BlackAndWhite': tileLayer.provider('OpenStreetMap.BlackAndWhite')
                        },
                        overlays: {
                            'Overlay One': defaultOverlay,
                            'Overlay Two': geoJSON(geo2)
                        }
                    };

                    console.log(geo1)


                });

        });
}

Я позаимствовал код из предыдущего ответа на этом форуме.

Редактировать: если я делаю people/1/ для идентификатора 1, я получаю сообщение об ошибке «Недопустимый объект GeoJSON». Я тестирую это с помощью Postman и использую заголовки cors для django. Я использую базу данных PostGIS и использовал сериализаторы geojson в djangorestframework-gis.

Если я избавлюсь от geoJSON перед (geo1), он скажет: «Предоставленный объект не является слоем».

РЕДАКТИРОВАТЬ 2: Кто-нибудь знает альтернативу Leaflet, которая хорошо работает с Angular 6?

Изменить 3: Это возвращаемый объект...


django-rest-framework leaflet ngx-leaflet
person Petey    schedule 23.07.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Функция geoJSON — это то, что создает слой Leaflet из JSON. Таким образом, вам всегда нужно использовать эту функцию.

Вам, вероятно, просто нужно проверить объект, полученный в ваших обратных вызовах подписки, чтобы убедиться, что он действителен geojson. Иногда вокруг ответов REST есть объекты-оболочки.

Вот пример создания базового геоJSON в демо в репозитории ngx-leaflet Github.

geoJSON(
    ({
        type: 'Polygon',
        coordinates: [[
            [ -121.6, 46.87 ],
            [ -121.5, 46.87 ],
            [ -121.5, 46.93],
            [ -121.6, 46.87 ]
        ]]
    }) as any,
    { style: () => ({ color: '#ff7800' }
)

Вам не обязательно нужен аргумент стиля. И вам может не понадобиться приведение к any, если вы не используете аргумент стиля. Но объект geoJSON должен выглядеть примерно так для определения полигона.

person reblace    schedule 24.07.2018
comment
Я смотрел демо. К сожалению, не видел примеров http. Как вы думаете, было бы разумнее, если бы я получил json вместо Geojson, поскольку функция geoJSON все равно преобразует его? Я уверен, что его формат ставит меня в тупик. Кажется, это массив Geojson внутри объекта... вроде этого {[ {geojson}, {geojson}, {geojson} ] }... о, спасибо за помощь! - person Petey; 24.07.2018
comment
Я прикрепил изображение в редактировании к моему сообщению. Я думал о том, чтобы просто вернуть все координаты, но я все равно хотел бы позже отфильтровать остальные данные и посмотреть, с чем я работаю. - person Petey; 24.07.2018
comment
Вы изучили эти документы: leafletjs.com/examples/geojson? Я подозреваю, что вам нужно обернуть несколько фигур в коллекцию функций, если вы хотите сделать их все одним слоем geojson. В противном случае вы захотите преобразовать массив в массив слоев geojson. Другими словами, вызовите geojson для каждого элемента массива по одному. - person reblace; 24.07.2018