可以使用Mapbox GL JS的傳單嗎？

Question

我正在嘗試使用mapbox GL JS地圖在項目上使用傳單圖層。 Mapbox提供了兩種不同的實例化地圖的方法，所有的傳單示例都使用了“經典”Mapbox API 。 我使用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文檔的示例或部分，我可以在這里閱讀這些內容嗎？

哦，我認為我需要傳單的原因是因為我需要像我的參考圖像一樣將圖像層添加到我的地圖中：

Answer 1

您可以將圖像添加到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]
   ]
});

然后是基於此源的柵格圖層 ：

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

一般來說， Leaflet.js / mapbox.js最適合柵格圖塊集，而mapbox-gl-js適用於矢量圖塊集。

如果您想使用帶有矢量圖塊集的Leaflet ，您可以查看一些支持矢量圖塊集的Leaflet插件： https ： //github.com/mapbox/awesome-vector-tiles#clients