传单 - 导入 Geojson - Angular 6
Leaflet - import Geojson - Angular 6
我尝试将 GeoJson 文件导入 angular 的应用程序 6 中的传单。
使用这个解决方案,我的 geojson 是在 leafletmap 中绘制的,但是我有这个错误,我无法构建我的应用程序。有人知道一种解决方案吗?
ERROR TS2345 Argument of type '{"type": string;"features":({"type":
string; "geometry": { "type: string : "coordinates": num...' is not
assignable parameter of type 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);
}
}
也许,我可以隐藏错误?怎么走?
你需要在 'angular way' 完成它,因为你正在使用 ngx-leaflet
在我个人看来,通过 import 导入 json 是一场噩梦,所以我要做的是在加载地图时使用 get 请求获取它,然后获取对地图对象的引用,然后添加地理json。
模板:
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>
我尝试将 GeoJson 文件导入 angular 的应用程序 6 中的传单。
使用这个解决方案,我的 geojson 是在 leafletmap 中绘制的,但是我有这个错误,我无法构建我的应用程序。有人知道一种解决方案吗?
ERROR TS2345 Argument of type '{"type": string;"features":({"type": string; "geometry": { "type: string : "coordinates": num...' is not assignable parameter of type 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);
}
}
也许,我可以隐藏错误?怎么走?
你需要在 'angular way' 完成它,因为你正在使用 ngx-leaflet
在我个人看来,通过 import 导入 json 是一场噩梦,所以我要做的是在加载地图时使用 get 请求获取它,然后获取对地图对象的引用,然后添加地理json。
模板:
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>