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

Question

我想根据最近草皮更改地图点击上的图标大小。我如何做到这一点？ 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