传单 - 导入 Geojson - Angular 6

Question

我尝试将 GeoJson 文件导入到 angular 应用程序 6 中的传单中。

使用此解决方案，我的 geojson 是在传单图中绘制的，但出现此错误，我无法构建我的应用程序。有人知道一种解决方案吗？

错误 TS2345 类型参数 '{"type": string;"features":({"type": string; "geometry": { "type: string : "coordinates": num...' 不是类型的可分配参数GeoJson 对象

模型.ts

export const Pdl = [ 'my geojson' ];

https://raw.githubusercontent.com/alanent/france-geojson/master/regions/pays-de-la-loire/departements-pays-de-la-loire.geojson

组件.ts

import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import * as L from 'leaflet';
import {Pdl} from "../models/pdl.model"; 

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

    ngOnInit() {    
       var mapboxAccessToken = "...";

       const myfrugalmap = L.map('frugalmap').setView([47.482019, -1], 7);

       L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + mapboxAccessToken, {
          id: 'mapbox.light',
          attribution: 'SOS'
       }).addTo(myfrugalmap);

       L.geoJSON(Pdl).addTo(myfrugalmap);
    }
}

也许，我可以隐藏错误？方法是什么？

Answer 1

由于您使用的是 ngx-leaflet，因此您需要以“角度方式”进行操作

在我个人看来，通过 import 导入 json 是一场噩梦，所以我会做的是在加载地图时使用 get 请求获取它，然后获取对地图对象的引用并添加 geojson。

模板：

import { HttpClient } from '@angular/common/http';
import * as L from 'leaflet';
..
map: L.Map;
json;
options = {
    layers: [
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
            maxZoom: 18, attribution: '...'
        })
    ],
    zoom: 7,
    center: L.latLng(47.482019, -1)
};

constructor(private http: HttpClient) { }

onMapReady(map: L.Map) {
    this.http.get('assets/departements.json').subscribe((json: any) => {
        console.log(json);
        this.json = json;
        L.geoJSON(this.json).addTo(map);
    });
}

模板

<div leaflet style="height: 800px"
    [leafletOptions]="options"
    (leafletMapReady)="onMapReady($event)">
</div>

演示