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加载符号图像。

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

1 个答案: