用ngx-leaflet从Django Rest框架在Angular中创建可用的多点geojson

Question

好了，我的django rest api通过HttpClient返回了一个包含9000个对象的数组。这些对象已经是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)


                });

        });
}

我从这个论坛上之前的回复中借用了代码。

编辑:如果我对id1执行people/1/，我会得到错误"Invalid GeoJSON object“。我正在使用Postman测试这一点，我正在使用django的cors-headers。我使用的是PostGIS数据库，并使用了djangorestframework-gis中的geojson序列化程序

如果去掉(geo1)前面的geoJSON，它会显示“提供的对象不是层”。

编辑2:有没有人知道替代Leaflet的方法可以很好地与Angular 6配合使用？

编辑3：This is the object being returned...

Answer 1

geoJSON函数是在JSON之外创建一个Leaflet层的函数。因此，您将始终需要使用该函数。

您可能只需要检查在订阅回调中接收到的对象，看看它是否是有效的geojson。有时，REST响应周围有包装器对象。

下面是一个创建基本geoJSON in the demo on the ngx-leaflet Github repo.的示例

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' }
)

您不一定需要style参数。如果不使用any参数，则可能不需要强制转换为样式。但是，对于多边形定义，geoJSON对象应该如下所示。