如何在 Mapbox 上的自定义容器中添加图像？

Question

我想以类似的风格将图像添加到 Mapbox，如下所示：

我不知道如何去做，因为在向地图添加图像时，Mapbox 并没有真正提供很多选项。我尝试添加一个自定义标记，其中包含图像并且可以工作，但随后我失去了隐藏等图层功能。关于如何做到这一点有什么想法吗？

Answer 1

您可以加载图像，然后将其用作符号图层的一部分。您可以在官方示例之一中看到它。

    map.on('load', function () {
        map.loadImage(
            'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png',
            function (error, image) {
                if (error) throw error;
                map.addImage('cat', image);
                map.addSource('point', {
                    'type': 'geojson',
                    'data': {
                        'type': 'FeatureCollection',
                        'features': [
                            {
                                'type': 'Feature',
                                'geometry': {
                                    'type': 'Point',
                                    'coordinates': [0, 0]
                                }
                            }
                        ]
                    }
                });
                map.addLayer({
                    'id': 'points',
                    'type': 'symbol',
                    'source': 'point',
                    'layout': {
                        'icon-image': 'cat',
                        'icon-size': 0.25
                    }
                });
            }
        );
    });

Answer 2

为了在mapbox中添加多个图像，您可以多次使用相同的loadImage和addImage。我的建议是将图像保存在一个数组中，然后迭代它们并只执行 loadImage 部分。

const images = [{url: <IMage1_URL>, name: <Image1_Name>}, {url: <IMage2_URL>, name: <Image2_Name>}]
images.forEach(img => {
  map.loadImage(
    img.url,
    function (error, image) {
      if (error) throw error;
      map.addImage(img.name, image);
    }
})

另一方面，如果您想使用 d3.js/canvas 绘制自定义 svg，例如蓝色图标或非常具体的东西。我过去使用过画布，如果您需要的话，也许可以为您创建一个简约的演示。

还有另一种方法可以做到这一点，但它需要您在地图上显式添加标记，但您也可以在地图上添加像 DonutChart 这样的东西，看起来相当不错！这是该博客的链接。

谢谢！