Листовка - импорт Геойсон - Угловой 6

Я пытаюсь импортировать файл GeoJson в листовку в приложении angular 6.

С помощью этого решения мой geojson отображается в таблице листовок, но у меня есть эта ошибка, и я не могу создать свое приложение. Кто-нибудь знает одно решение?

ОШИБКА TS2345 Аргумент типа '{"тип": строка; "функции": ({"тип": строка; "геометрия": {"тип: строка:" координаты ": число ...' не является назначаемым параметром типа 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);
    }
}

Может, я смогу скрыть ошибку? какой способ?


javascript angular leaflet geojson ngx-leaflet
person al NTM    schedule 16.10.2018    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Вам нужно сделать это "угловым способом", так как вы используете ngx-leaflet

По моему личному мнению, импорт json через import - это кошмар, поэтому я бы получил его с помощью запроса на получение при загрузке карты, а затем получил ссылку на объект карты и добавил 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>

Демо

person kboul    schedule 16.10.2018
comment
Я пробую это, но теперь у меня нет ошибок, но на моей карте нет geojson. Не могли бы вы поставить stackblitz, пожалуйста? - person al NTM; 16.10.2018
comment
Я прикрепил ссылку на репозиторий github. - person kboul; 16.10.2018
comment
спасибо большое, гадость, я не работал с ngx-leaflet, просто с листовкой, так что я пойду, чтобы установить листовки ngx - person al NTM; 16.10.2018
comment
Без проблем. И будьте осторожны. Не публикуйте свой mapboxAccessToken, потому что его могут использовать другие люди. Я отредактировал ваш вопрос и удалил его. - person kboul; 16.10.2018
comment
Я искал простое решение, как это сделать, и вот оно ... вы не поверите, сколько глупо сложных способов я видел, чтобы это сделать! - person 72GM; 15.10.2020