0
각도 cli 프로젝트를 시작하고 npm을 통해 mapbox-gl을 설치했습니다. angular-cli.json 파일에 mapbox-gl 스크립트 및 스타일이 포함되었습니다. 표시 할 맵을 가져올 수는 있지만로드 이벤트에 레이어를 추가 할 수는 없습니다. 지도가 갑자기 정의되지 않았습니까? 내 구성 요소 코드 (app.component.ts) 여기Mapbox-gl.js 맵은로드 이벤트의 angular-cli 프로젝트에서 정의되지 않았습니다.
<div id="map" style="margin:0; padding:0; position:absolute; top:25px; bottom:0; width:100%;">
</div>
그리고있다 :
import { Component, ViewChild, AfterViewInit, OnInit } from '@angular/core';
import * as mapboxgl from 'mapbox-gl';
import { Map } from 'mapbox-gl';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
@ViewChild("map") map: Map;
title = 'app';
ngOnInit() {
mapboxgl.accessToken = 'blah';
this.map = new Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
zoom: 5,
center: [-78.880453, 42.897852]
});
this.map.on('load', this.onLoad);
}
onLoad(){
console.log("map is loaded, can I still talk to it?");
this.map.addLayer({
"id": "points",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.03238901390978, 38.913188059745586]
},
"properties": {
"title": "Mapbox DC",
"icon": "monument"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-122.414, 37.776]
},
"properties": {
"title": "Mapbox SF",
"icon": "harbor"
}
}]
}
},
"layout": {
"icon-image": "{icon}-15",
"text-field": "{title}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
}
}
프로젝트 위치 : https://github.com/derobiom/mapboxAngularCli
,
이 참조 될 본 방법 .지도 .on ('load', this.onLoad.bind (this)); 일했다. 고맙습니다! –