javascript - 为什么 map 上的圆圈大小会变化？

Question

这是一个说明我的问题的演示:我在半径为 500000 的 map 上绘制一个圆，但在一个位置该圆看起来更大。我尝试检查 map 的缩放比例，结果总是一样。

place = {
name1:[-33.8650, 151.2094],
name2:[59.3293, 18.0686]
};

var id,circle,center;

function panMap() {
    id=this.getAttribute('id');
    center=place[id];
    map.panTo(center);
    circle = L.circle(center,500000, {
                 color: 'red',
                 fillColor: '#f03',
                 fillOpacity: 0.5
                 }).addTo(map);
    console.log("zoom = " +map.getZoom());
};

// center of the map
var center = [29,29];

// Create the map
var map = L.map('map').setView(center, 3);

// Set up the OSM layer
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
  }).addTo(map);
  
var classname = document.getElementsByTagName("button");
for (var i=0;i<classname.length;i++) {
    classname[i].addEventListener("click", panMap, false);  
};

.container {
  height: 30px;
  width:100%;
}
#map {
  height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css">

<div class="container">
<button id="name1">place1</button>
<button id="name2">place2</button>
</div>
<div id="map"></div>

Answer 1

这是由于 Mercator projection 。引用维基百科:

the Mercator projection distorts the size of objects as the latitude increases from the Equator to the poles, where the scale becomes infinite

地点 1 的纬度比地点 2 的纬度更接近赤道，因此显得更小。