时间戳

首页 > 解决方案 > 圆形标记 - 基于缩放值的大小传单

leaflet - 圆形标记 - 基于缩放值的大小传单

问题描述

试图找到一种通过实际缩放值动态确定圆形标记大小的方法。我希望通过使用缩放值计算大小来缩小圆圈时更小。尽量避免圆圈在缩小时碰撞太多但仍然有比例......我的想法是使用“getZoom”函数并使用该值来计算圆圈的大小。在下面的示例中将如何实现？我需要稍微玩一下才能找到正确的计算值，但现在无法正常工作，缺少一些东西......未定义是错误......

// Get zoom level
   map.on('zoomend', function() {

    var currentZoom = map.getZoom();

});

// Scale circle markers by using the zoom value
// you need to know what the min value is, 
// calculated at runtime or prior
var minValue = 1;

//  desired radius size of circles based on zoom levels
var minRadius = currentZoom/2; 

function calcRadius(val) {
     
    return 1.0083 * Math.pow(val/minValue,.5716) * minRadius;      
}
............
............

编辑到这里************************************

// Scaling circle markers for best looking
// you need to know what the min value is, 
// calculated at runtime or prior
var minValue = 1;

//  minimum desired radius size of circles
//var minRadius = 4; 

function calcRadius(val, zoom) {
     
    return 1.0083 * Math.pow(val/minValue,0.5716) * (zoom / 2);      
}

$.getJSON("../data/population/country.geojson", function(json) {
    geoLayer = L.geoJson(json, {
    pointToLayer: function(feature, latlng) {   
var pop = (feature.properties.pop + feature.properties.pop2);
    
var circle;
    
map.on('zoomend', function() {
        var currentZoom = map.getZoom();
        circle.setRadius(calcRadius(circle._orgRadius,currentZoom))
    });

   
// Filtrering
if (pop >= 1 && pop < 10){
        circle = new L.circleMarker(latlng, {radius: 4, color: '#b30000', weight: 1.5}).addTo(map);
        circle._orgRadius = circle.getRadius();
      } 
else if (pop >= 10 && pop < 25){
        circle = new L.circleMarker(latlng, {radius: 4, color: '#d7301f', weight: 1.5}).addTo(map);
        circle._orgRadius = circle.getRadius();
      }
else if (pop >= 25 && pop < 50){
        circle = new L.circleMarker(latlng, {radius: 4, color: '#ef6548', weight: 2}).addTo(map);
        circle._orgRadius = circle.getRadius();
      }
else if (pop >= 50 && pop < 100){
        circle = new L.circleMarker(latlng, {radius: 4, color: '#fc8d59', weight: 2}).addTo(map);
        circle._orgRadius = circle.getRadius();
      }
else if (pop >= 100){
        circle = new L.circleMarker(latlng, {radius: 4, color: '#fdbb84', weight: 2.5}).addTo(map);
        circle._orgRadius = circle.getRadius();
}
else {
circle = null;
}
return circle;
},

标签： leafletsizezooming

解决方案

将您的代码更改为：

var circle = L.circleMarker([39.73, -104.99],{radius: 100}).addTo(map)
circle._orgRadius = circle.getRadius();

// Scale circle markers by using the zoom value
// you need to know what the min value is, 
// calculated at runtime or prior
var minValue = 1;
function calcRadius(val, zoom) {
    return 1.0083 * Math.pow(val/minValue,0.5716) * (zoom / 2);      
}

map.on('zoomend', function() {
    var currentZoom = map.getZoom();
    // Recalc always with the original value
    circle.setRadius(calcRadius(circle._orgRadius,currentZoom))
});

https://jsfiddle.net/falkedesign/nobapxvd/

推荐阅读