2016-10-06 1 views
1

mapbox GL JS map을 사용하는 프로젝트에서 전단 레이어를 사용하려고합니다. Mapbox는지도를 인스턴스화하는 두 가지 방법을 제공하며 모든 전단 예제는 'classic' Mapbox API을 사용합니다. 내가 (보다 강력한 기능과 문서를 가진 것 같았다)을 GL JS 방법을 사용하여 전체 경험을 구축했습니다 그러나Mapbox GL JS에서 전단을 사용하고 있습니까?

map = new mapboxgl.Map({ 
    container: 'map', // container id 
    style: videoStyle, 
    center: [-73.945360, 40.717533], // starting position 
    bearing: 90, 
    zoom: mapInitZoom // starting zoom 
    }); 

을, 지금은 중심점까지의 거리를 얻기 위해 전단지를 사용할 필요가 있음을, 전단지의 모든 문서는 다음과 같이지도를 인스턴스화

var mymap = L.map('mapid').setView([51.505, -0.09], 13); 

나는 Mapbox GL JS API를 사용하여 내 프로젝트를 계속하고 결합 전단지 방법이 있나요? 누구나 내가 이것을 읽을 수있는 API 문서의 예제 나 부분으로 안내 할 수 있습니까?

아, 그리고이 기준 다이어그램 이미지처럼 내지도에 이미지 레이어를 추가해야하기 때문에 내가 전단지를 필요로 내가 생각 이유는 다음과 같습니다 당신은 mapbox-gl-js지도에 이미지를 추가 할 수 있습니다 enter image description here

답변

3

. 다음은이 수행하는 방법에 대한 예입니다 : 당신이 예에서 볼 수 있듯이 https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/

, 당신은 추가 할 필요는 ImageSource :

map.addLayer({ 
     'id': 'overlay', 
     'source': 'overlay', 
     'type': 'raster', 
     'paint': {'raster-opacity': 0.85} 
    }); 
:이 소스를 기반으로
map.addSource('overlay', { 
    type: 'image', 
    url: 'https://www.mapbox.com/images/foo.png', 
    coordinates: [ 
     [-76.54, 39.18], 
     [-76.52, 39.18], 
     [-76.52, 39.17], 
     [-76.54, 39.17] 
    ] 
}); 

다음 Raster Layer

일반적으로 Leaflet.js/mapbox.js은 래스터 타일 세트에 가장 적합하고 mapbox-gl-js은 벡터 타일 세트 용입니다. 당신이 벡터 타일 세트 Leaflet를 사용하려면

, 당신은 벡터 타일 세트를 지원하는 리플릿 플러그인의 일부를 살펴 가질 수 있습니다 https://github.com/mapbox/awesome-vector-tiles#clients

+0

감사 @kmandov을 - 그래서 나는 실제로 그 방법을 시도했다 당신을 설명하고 2 가지 중 1 가지가 발생합니다. 이미지 일 경우로드되지만 브라우저가 너무 느리게 작동하여 충돌이 발생합니다. map.flyTo()가 거의 움직이지 않습니다. 그리고 비디오 레이어를 추가하면 브라우저도 충돌하지만 콘솔 경고 메시지가 나타납니다 : github (https://github.com/mapbox/mapbox-gl-js/issues/3312)에 여기에 기록됩니다. – EJW

관련 문제