如何使用 Leaflet 通过缩放从 geojson 更改图标？答案

【问题标题】：How change icon from geojson with zoom using Leaflet?如何使用 Leaflet 通过缩放从 geojson 更改图标？
【发布时间】：2017-01-09 02:27:46
【问题描述】：

我无法理解这个问题。如何使用 Leaflet 通过缩放从 geoJSON 更改图标？我见过一些例子 - Leaflet :: Changing icon based on zoom level。但是，它对我不起作用。这是我的代码。

<script>
L.mapbox.accessToken = '...';
var myMap = L.map("myMap", {
	center: [47.593492, 14.529092],
	zoom: 8,
	minZoom: 1,
	maxZoom: 10,
    zoomControl: false
});

L.control.zoom({
     position:'topright'
}).addTo(myMap);

L.mapbox.styleLayer('mapbox://styles/....').addTo(myMap);   
 

var geojsonFeature = [
  {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [16.454314, 48.180747]
    },
    properties: {
      title: 'Title',
      description: 'Text, text...',
      image: 'http://link...',
      icon: {
        iconUrl: 'http://link....',
        iconSize: [14, 10], 
        iconAnchor: [0, 0], 
        popupAnchor: [0, 0], 
        className: 'dot'
      }
    }
  },{
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [16.454314, 48.180747]
    },
    properties: {
      title: 'Title',
      description: 'Text, text...',
      image: 'http://link...',
      icon: {
        iconUrl: 'http://link....',
        iconSize: [14, 10], 
        iconAnchor: [0, 0], 
        popupAnchor: [0, 0], 
        className: 'dot'
      }
    }
  },{
  ...
  }
]; 

function onEachFeature(feature, layer) {
  var content = 'my content';
 
  layer.bindPopup(content);
  layer.setIcon(L.icon(feature.properties.icon));
} 

L.geoJson(geojsonFeature, {
    onEachFeature: onEachFeature
}).addTo(myMap);

var busIcon = L.icon({
    iconUrl: 'http://openstationmap.org/0.2.0/client/leaflet/images/marker-icon.png',

    iconSize:     [23, 29], 
    iconAnchor:   [22, 94], 
    popupAnchor:  [-3, -76] 
});

function onZoomend(feature, layer) {
    var currentZoom = myMap.getZoom();
	  if (currentZoom > 9) {
		layer.setIcon(busIcon);
	  } 
 };

myMap.on('zoomend', onZoomend);

</script>

也许有人知道如何解决它？谢谢。

【问题讨论】：

是否必须使用图标来表示点？我的意思是如果你设置点的样式而不是图标，那么你可以重置它
@muzaffar 如何通过缩放更改点的样式（例如大小）？

标签： javascript leaflet zooming

【解决方案1】：

您需要修改您的onZoomend 函数，如下所示

function onZoomend(feature, layer) {
    var currentZoom = myMap.getZoom();
      if (currentZoom > 9) {
        geojson.eachLayer(function(layer) {
          layer.setIcon(busIcon);
        });
      } 
}

另外，将您的 layer 保存到如下变量中

var geojson = L.geoJson(geojsonFeature, {
    onEachFeature: onEachFeature,
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng);
    }
}).addTo(myMap);

Here 是一个工作示例。将地图放大一点以查看它的工作情况

【讨论】：