[英]Draw a circle of constant size for all zoom levels leaflet.js
对于圆圈,只需使用circleMarker
而不是circle
: http : 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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.