0

好的，所以我有一个 9,000 个对象的数组，通过 HttpClient 从我的 django rest api 返回。这些对象已经是 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)


                });

        });
}

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

编辑：如果我为 id 1 做 people/1/ 我得到错误“无效的 GeoJSON 对象”。我正在使用 Postman 对此进行测试，并且我正在为 django 使用 cors-headers。我正在使用 PostGIS 数据库并在 djangorestframework-gis 中使用 geojson 序列化程序

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

编辑 2：有人知道与 Angular 6 配合得很好的 Leaflet 的替代品吗？

编辑 3： 这是返回的对象...

4

1 回答 1

0

该geoJSON函数用于从 JSON 中创建 Leaflet 层。因此，您将始终需要使用该功能。

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

在 ngx-leaflet Github repo 上的演示中有一个创建基本 geoJSON的示例。

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 对象应该看起来像这样。

于 2018-07-24T00:17:36.497 回答