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

Draw a circle of constant size for all zoom levels leaflet.js

本文关键字：一个 缩放 绘制      更新时间：2023-09-26

我正在尝试使用leaflet.js实现这样的东西，其中圆圈的大小在不同的缩放级别上保持不变。例如，如果我想描绘美国不同县的人口，我会用不同半径的圆代表不同的人口范围。当完全放大时，它们可能会重叠，但一旦我们开始放大，它们就会分开。所以有一种方法来做到这一点使用leaf .js。我看到了一个问题，但我无法跟随它是否被修复。

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

我想你会想这样做:

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时，我们什么都不做。这是我留给你的地方，让你对你的结果更加复杂。但是，我认为这演示了怎么做

如果由于某些原因不能使用圆形标记，请尝试以下操作:

// 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

否则，您可以这样做，通过根据您的需要调整Math.pow()的指数

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