带有符号层的 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

首先你需要：

• 通过 加载具有特定 ID 的外部图像map.loadImage()。
• 通过 . 添加具有特定 ID 的图像map.addImage(https://docs.mapbox.com/mapbox-gl-js/api/map/#map#loadimage)。

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

// If the style's sprite does not already contain an image with ID 'kitty',
// add the image 'cat-icon.png' to the style's sprite with the ID 'kitty'.
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png', (error, image) => {
    if (error) throw error;
    if (!map.hasImage('kitty')) map.addImage('kitty', image);
});

将加载的图像包含在符号层中将类似于：

map.addLayer({
    'id': 'clusters',
    'type': 'circle',
    'source': 'parcelpoints',
    'filter': ['has', 'point_count'],
    'icon-image': 'kitty',
    ...

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