带有符号层的 MapBox GL 自定义标记

Question

我正在尝试在 MapBox GL JS 中对自定义标记进行聚类，但我无法弄清楚如何将自定义标记图像从 url 获取到符号层？它要么不起作用，要么根本没有标记出现。它是如何完成的？我需要知道如何将来自 url 的自定义图像与符号层一起使用。非常感谢。

map.addSource('parcelpoints', {
        type: 'geojson',        
        data: geojson,
        cluster: true,
        clusterMaxZoom: 14, // Max zoom to cluster points on
        clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
    });

    map.addLayer({
        id: 'clusters',
        type: 'circle',
        source: 'parcelpoints',
        filter: ['has', 'point_count'],
        paint: {
            // Use step expressions (https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-step)
            // with three steps to implement three types of circles:
            //   * Blue, 20px circles when point count is less than 100
            //   * Yellow, 30px circles when point count is between 100 and 750
            //   * Pink, 40px circles when point count is greater than or equal to 750
            'circle-color': [
                'step',
                ['get', 'point_count'],
                '#51bbd6',
                100,
                '#f1f075',
                750,
                '#f28cb1'
            ],
            'circle-radius': [
                'step',
                ['get', 'point_count'],
                20,
                100,
                30,
                750,
                40
            ]
        }
    });

    map.addLayer({
        id: 'cluster-count',
        type: 'symbol',
        source: 'parcelpoints',
        filter: ['has', 'point_count'],
        layout: {
            'text-field': '{point_count_abbreviated}',
            'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
            'text-size': 12
        }
    });   

        map.addLayer({
        id: 'unclustered-point',
        type: 'symbol',
        source: 'parcelpoints',
        filter: ['!has', 'point_count'],
        'layout': {
         'visibility': 'visible',
         'icon-image':  { url: "marker.svg" }
        }
    });

Answer 1

首先你需要用map.addImage()添加图片。

这里有一个工作示例：https://www.mapbox.com/mapbox-gl-js/example/add-image/

要将加载的图像包含在符号层中，如下所示：

'icon-image':  'my-marker'

不支持直接从 URL 加载符号图像。