可以使用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