是否可以使用Mapbox GL JS的传单？

Question

我尝试使用mapbox GL JS map在项目中使用传单图层。 Mapbox提供了两种不同的实例化地图的方法，所有的传单示例都使用'classic' 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]
   ]
});

然后基于此来源Raster Layer：

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