传单-导入Geojson-Angular 6 [英] Leaflet - import Geojson - Angular 6

问题描述

我尝试将GeoJson文件导入Angle的应用程序6中的传单.

使用此解决方案时，我的geojson是在leafletmap中绘制的，但出现此错误，因此无法构建我的应用程序.有人知道一种解决方案吗?

错误TS2345类型'{"type"的参数:字符串；"features":({{type:细绳;"geometry":{"type:string:" coordinates:num ...'不是GeoJsonObject类型的可分配参数

Model.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

Component.ts

 从'@ asymmetrik/ngx-leaflet'导入{LeafletModule};从'leaflet'中将*导入为L；从"../models/pdl.model"导入{Pdl}；@零件({选择器:"app-geo"，templateUrl:"./geo.component.html"，styleUrls:['./geo.component.scss']})导出类GeoComponent实现了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"，归因:"SOS"}).addTo(myfrugalmap);L.geoJSON(Pdl).addTo(myfrugalmap);}} 

也许我可以隐藏错误?怎么了?

解决方案

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

通过导入导入json是我的噩梦，所以我要做的就是在加载地图时使用get请求获取它，然后获取对地图对象的引用并添加geojson.

模板:

 从'@ angular/common/http'导入{HttpClient};从'leaflet'中将*导入为L；..地图:L.Map;json;选项= {层数:[L.tileLayer('http://{s} .tile.openstreetmap.org/{z}/{x}/{y} .png'，{maxZoom:18，属性:"..."})]，变焦:7中心:L.latLng(47.482019，-1)};构造函数(私有http:HttpClient){}onMapReady(地图:L.Map){this.http.get('assets/departements.json').subscribe((json:any)=> {console.log(json);this.json = json;L.geoJSON(this.json).addTo(map);});} 

模板

 < div传单样式="height:800px"[leafletOptions] =选项"(leafletMapReady)="onMapReady($ event)"></div> 

演示

i try to import GeoJson file to leaflet in angular's app 6.

With this solution my geojson is drawn in leafletmap but i have this error and i can't build my app. Someone know one solution ?

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' ];

https://raw.githubusercontent.com/alanent/france-geojson/master/regions/pays-de-la-loire/departements-pays-de-la-loire.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);
    }
}

Maybe, i can hide the error ? what is the way ?

解决方案

You need to do it the 'angular way' since you are using ngx-leaflet

Importing a json via import is a nightmare in my personal opinion so what I would do would be to fetch it using a get request when the map is loaded and then get a reference to the map object and add the geojson.

template:

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

template

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

Demo

这篇关于传单-导入Geojson-Angular 6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！