[英]Leaflet - import Geojson - Angular 6
我嘗試將GeoJson文件導入angular的應用程序6中的傳單。
使用此解決方案我的geojson是在leafletmap中繪制但我有這個錯誤,我無法構建我的應用程序。 有人知道一個解決方案嗎?
錯誤TS2345類型'{“類型”的參數::string;“features”:( {“type”:string;“geometry”:{“type:string:”coordinates“:num ...'不是可分配的類型參數GeoJsonObject
Model.ts
export const Pdl = [ 'my geojson' ];
Component.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);
}
}
也許,我可以隱藏錯誤? 是什么方式?
因為你正在使用ngx-leaflet,所以你需要做'角度方式'
通過導入導入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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.