使用Leaflet展示OpenWeatherMap时缩放与x、y坐标参数相关问题

核心问题原因 #

你当前代码的核心错误是硬编码了瓦片URL中的缩放级别、x/y坐标参数，导致Leaflet全局复用同一张瓦片，才会出现重复内容的问题。

问题1解答 #

Leaflet要求传入的缩放级别，和OWM瓦片URL中的缩放级别参数必须保持一致，不需要你手动同步，Leaflet的L.tileLayer会自动根据当前地图状态替换URL里的对应占位符。

问题2解答 #

OWM瓦片URL中的x、y是标准slippy map瓦片网格坐标，取值规则如下：

• 每个缩放级别z下，全球地图会被切分为 2^z × 2^z 个大小相同的正方形瓦片
• x为横向索引，从最西端开始从0计数，最大值为 2^z -1
• y为纵向索引，从最北端开始从0计数，最大值为 2^z -1
  这部分计算完全由Leaflet自动完成，你不需要手动传入数值。

修正后代码 #

function drawMap(lat,lon){
    // 初始化地图，设置初始中心点和缩放级别为3
    const mymap = L.map('map').setView([lat, lon], 3);
    // URL中保留{z}（缩放）、{x}（横向坐标）、{y}（纵向坐标）三个占位符即可
    L.tileLayer(`https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=${apiKey}`).addTo(mymap);
}

内容的提问来源于stack exchange，提问作者altho