mapbox-gl-js - 如何在单击时更改 mapbox gl 中的图标大小？

Question

我想根据最近的草皮更改 map 点击时的图标大小。我如何做到这一点？ nearestBuilding.properties['icon-size'] = 0.2; 不起作用。

var retail = {
        type: 'FeatureCollection',
        features: [
            { 
                type: 'Feature',
                properties: {
                    title: 'TEST',
                    description: 'TEST'
                },
                geometry: {
                    type: 'Point',
                    coordinates: [121.051779, 14.550224]
                }
            },
            { 
                type: 'Feature',
                properties: {
                    title: 'TEST',
                    description: 'TEST'
                },
                geometry: {
                    type: 'Point',
                    coordinates: [121.04568958282472, 14.552170837008527]
                } 
            }
        ]
    };

    map.on('load', function() {
        map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Wiki_Loves_Earth_map_marker.svg/600px-Wiki_Loves_Earth_map_marker.svg.png', function(error, image) {
            if (error) throw error;
            map.addImage('marker', image);

            map.addLayer({
                id: 'retail',
                type: 'symbol',
                source: {
                  type: 'geojson',
                  data: retail
                },
                layout: {
                  'icon-image': 'marker',
                  'icon-size': 0.1
                },
                paint: { }
            });
        });
    });
var marker = null;

    map.on('click', function(e){
        if(marker != null) {
            marker.remove();
        }

        var currentLocation = {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [e.lngLat.lng, e.lngLat.lat]
            }
        };

        var el = document.createElement('div');
        el.className = 'currLocMarker';

        marker = new mapboxgl.Marker(el, { offset: [-50 / 2, -50 / 2] })
          .setLngLat(currentLocation.geometry.coordinates)
          .addTo(map);

        var currentLocation = turf.point([e.lngLat.lng, e.lngLat.lat]);
        var nearestBuilding = turf.nearest(currentLocation, retail);
        var distance = turf.distance(currentLocation, nearestBuilding);

        if (distance <= 0.5) {
             nearestBuilding.properties['icon-size'] = 0.2;
        }
    });

Answer 1

自 icon-size支持数据驱动样式( https://www.mapbox.com/mapbox-gl-js/style-spec/#layout-symbol-icon-size )，您是否尝试过这样做，每个功能的属性都有一个标识函数？你可以在布局中配置它，而不是硬编码 0.1 .
更多关于数据驱动样式的文档在这里 - https://www.mapbox.com/mapbox-gl-js/style-spec/#function-type