2016-10-06 10 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, где я могу прочитать об этом?

Да, и поэтому я думаю, что мне нужна листовка, потому что мне нужно, чтобы добавить слои изображения на мою карту, как эта диаграмма эталонного изображение: enter image description here

ответ

3

Вы можете добавить изображение в mapbox-gl-js карты. Вот пример того, как сделать это: https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/

Как вы можете видеть в данном примере, вам нужно добавить ImageSource:

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 на основе этого источника:

map.addLayer({ 
     'id': 'overlay', 
     'source': 'overlay', 
     'type': 'raster', 
     'paint': {'raster-opacity': 0.85} 
    }); 

Вообще говоря Leaflet.js/mapbox.js лучше всего подходит для наборов растровых плит, а mapbox-gl-js - для наборов векторных плит.

Если вы хотите использовать Leaflet с набором вектор плитки, вы можете взглянуть на некоторые из листовку плагинов, поддерживающих векторные плитки наборы: https://github.com/mapbox/awesome-vector-tiles#clients

+0

Благодаря @kmandov - так что я на самом деле попробовать этот метод, который вам и 1 из 2 вещей происходит - если это просто изображение, оно загружается, но это заставляет мой браузер работать так медленно, что он сбой. Map.flyTo() едва перемещается. И если я добавлю видеослот, тогда он также выйдет из строя браузера, но я получаю предупреждение о консоли: зарегистрирован здесь на github (https://github.com/mapbox/mapbox-gl-js/issues/3312) – EJW

 Смежные вопросы

  • Нет связанных вопросов^_^