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

时间:2014-03-17 23:00:43

标签: javascript leaflet

我正在尝试使用leaflet.js来实现类似this的内容,其中圆圈的大小在不同的缩放级别上保持不变。例如,如果我想描绘不同美国县的人口,我会得到不同半径的圆圈代表不同的种群范围。它们在完全缩小时可能会重叠,但是一旦我们开始放大,它们就会分开。那么有没有办法使用leaflet.js来做到这一点。我看到issue被抬起,但如果它被修复了,我无法跟进。任何帮助都将深表感谢。

4 个答案:

答案 0 :(得分:17)

对于圈子,只需使用circleMarker代替circlehttp://leafletjs.com/reference.html#circlemarker

答案 1 :(得分:3)

我认为你会想做这样的事情:

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);
    }
});

我所做的只是初始化地图和圈子,并为zoomstartzoomend事件创建事件监听器。有一个myZoom对象可以记录缩放级别,因此您可以通过简单的减法找出最终缩放是否进入或缩小。在zoomEnd听众中,你检查并根据差异是大于还是小于0来改变圆半径。当它为0时我们当然什么都不做。这是我留给你的地方结果更复杂。但是,我认为这表明了如何做到这一点。

答案 2 :(得分:1)

如果由于某些原因无法使用圆形标记,请尝试以下操作:

// Determine the number of meters per pixel based on map zoom and latitude
const zoom = map.getZoom()
const lat = map.getCenter().lat
const metersPerPixel = 156543.03392 * Math.cos(lat * Math.PI / 180) / Math.pow(2, zoom)

// Multiply that by a factor based on how large the circle should appear on the screen
const radius = metersPerPixel * desiredRadiusInPixels

// Create the circle
const circle = L.circle(this.map.getCenter(), {radius: radius}))

我在此答案中找到了“每像素米”公式: https://gis.stackexchange.com/a/127949/106283

答案 3 :(得分:0)

否则,您可以通过根据需要调整Math.pow()的指数来做到这一点

mymap.on('zoomend', function (e) {
    var newRadius = Math.pow((20 - mymap.getZoom()), 4);
    myCircle.setRadius(newRadius);
});