Question

我使用Leaflet制作一个圆形地图。索引代码：

<div id="mapid" style="height: 500px;"></div>

        <script type="text/javascript">

            var mymap = L.map('mapid').setView([52.233333, 19.016667], 6);

                L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
                            minZoom: 6,
                }).addTo(mymap);

                var x = 52.233333;
                var y = 19.016667;

                    showCircle(x,y);
        </script>

ShowCircle：

function showCircle(x,y)
{
    var circle = L.circle([x,y], 1900, {
        color: 'blue',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).addTo(mymap);
}

问题是：圆圈的大小始终相同。我想得到：如果我缩小地图圆圈更大，当我缩放圆圈更小。（zoomin，zoomout来自滚动）

如何获得此效果？

Answer 1

传单中有两种圈子：L.Circle和L.CircleMarker。 L.Circle has a radius specified in meters和L.CircleMarker has a radius specified in pixels。

你的问题并不完全清楚（你的意思是＆＃34;总是有相同的尺寸＆＃34;？米或像素？）;但我想您要使用L.CircleMarker代替L.Circle。

Answer 2

尝试以下操作，并根据您的要求进行调整：

  var radiusQuantifier=100;
  map.on('zoomend',function (e) { 
        circle.setRadius(map.getZoom()*radiusQuantifier); 
    });

这将更改zoomend事件中圆圈的半径。您可以将其与zoomstart事件结合使用，以获得所需的结果。注意：增加/减少radiusQuantifier的值，因为它似乎合适。

地图圆（尺寸可扩展）

2 个答案: