为所有缩放级别leaflet.js绘制一个恒定大小的圆

Question

我想实现像这样使用leaflet.js,其中圆的尺寸保持在不同的缩放级别相同.例如,如果我想描绘不同美国县的人口,我会得到不同半径的圆圈代表不同的种群范围.它们在完全缩小时可能会重叠,但是一旦我们开始放大,它们就会分开.那么有没有办法使用leaflet.js来做到这一点.我看到了一个问题,但如果它被修复了,我无法跟进.任何帮助将深表感谢.

Answer 1

对于圈子,只需使用circleMarker而不是circle:http://leafletjs.com/reference.html#circlemarker

Answer 2

我想你会想做这样的事情：

var map = L.map('map').setView([51.505, -0.09], 13);

var circle = L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);

var myZoom = {
  start:  map.getZoom(),
  end: map.getZoom()
};

map.on('zoomstart', function(e) {
   myZoom.start = map.getZoom();
});

map.on('zoomend', function(e) {
    myZoom.end = map.getZoom();
    var diff = myZoom.start - myZoom.end;
    if (diff > 0) {
        circle.setRadius(circle.getRadius() * 2);
    } else if (diff < 0) {
        circle.setRadius(circle.getRadius() / 2);
    }
});

我所做的只是初始化地图和圆圈并为zoomstart和zoomend事件创建事件侦听器。有一个myZoom对象会记录缩放级别，因此您可以通过简单的减法来确定最终缩放是放大还是缩小。在zoomEnd侦听器中，您检查并根据差异是大于还是小于 0 更改圆半径。当它为 0 时，我们当然什么都不做。这是我让您对结果进行更复杂处理的地方。但是，我认为这展示了如何做到这一点。