Я пытаюсь создать простую карту, используя Mapbox, Ioni c Framework и Angular, и я хотел бы добавить на карту строку Geo JSON, как в этом примере: https://docs.mapbox.com/mapbox-gl-js/example/geojson-line/
Я новичок в angular и все еще учусь, поэтому я уверен, что моя TS испортилась. Во всяком случае, вот мои файлы ниже:
Пакеты:
"@angular/common": "~8.2.14", "@angular/core": "~8.2.14", "@angular/fire": "^6.0.0", "@angular/forms": "~8.2.14", "@angular/platform-browser": "~8.2.14", "@angular/platform-browser-dynamic": "~8.2.14", "@angular/router": "~8.2.14", "@capacitor/core": "2.0.2", "@ionic-native/core": "^5.24.0", "@ionic-native/geolocation": "^5.24.0", "@ionic-native/google-maps": "^5.5.0", "@ionic-native/splash-screen": "^5.0.0", "@ionic-native/status-bar": "^5.0.0", "@ionic/angular": "^5.0.0", "cordova-browser": "6.0.0", "cordova-plugin-geolocation": "^4.0.2", "cordova-plugin-googlemaps": "^2.7.1", "core-js": "^2.5.4", "firebase": "^7.14.2", "mapbox-gl": "^1.10.0", "rxjs": "^6.5.5", "save": "^2.4.0", "tslib": "^1.9.0", "zone.js": "~0.9.1"
HTML Страница:
<div id="mapbox"></div>
Страница TS:
import { Component, OnInit } from '@angular/core';
import { environment } from 'src/environments/environment';
import * as Mapboxgl from 'mapbox-gl';
@component({
selector: 'app-map',
templateUrl: './map.page.html',
styleUrls: ['./map.page.scss'],
})
export class MapPage implements OnInit {
map: mapboxgl.Map
ngOnInit() {
(Mapboxgl as any).accessToken = environment.mapboxKey;
this.map = new Mapboxgl.Map({
container: 'mapbox',
style: 'mapbox://styles/mapbox/streets-v11',
center: [35.1715959,31.9305916,],
zoom: 10
});
this.mapmarker();
}
mapmarker(){
this.map.on('load', function() {
this.map.addSource('route', {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'LineString',
'coordinates': [
[35.20620346069335,31.941237613275092],
[35.21341323852539,31.952162238024975],
[35.21392822265624,31.961337918930735],
[35.21100997924805,31.965998231173806],
[35.19899368286133,31.971968910549975],
[35.187835693359375,31.97240577428203],
[35.17822265625,31.967163272276267],
[35.173072814941406,31.958133817062862],
[35.17066955566406,31.950560041013226]
]
}
}
});
this.map.addLayer({
'id': 'route',
'type': 'line',
'source': 'route',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#888',
'line-width': 8
}
});
});
}
}
Мой код Visual Studio не показывает ошибок, но когда я загружаю приложение, я получаю следующую ошибку: ERROR TypeError: невозможно прочитать свойство addSource для undefined
Любая помощь приветствуется.