Leaflet加载外部GeoJSON时出现Variable not defined错误求助

可直接落地的排查修复步骤 #

• 首先确认地图容器样式是否正确
  Leaflet要求承载地图的#mapid元素必须明确设置高度，否则地图无法正常渲染，在CSS中添加如下规则即可：

#mapid {
  height: 600px; /* 可根据需求调整高度，设为100vh即可占满整个视口 */
  width: 100%;
}

• 修复瓦片资源的加载协议
  你当前使用的OpenStreetMap瓦片地址是HTTP协议，大多数现代浏览器会拦截HTTPS站点下的HTTP资源请求，建议替换为HTTPS地址：

L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    subdomains: ['a','b','c']
}).addTo( map );

• 解决GeoJSON坐标系不匹配的核心问题
  你提供的GeoJSON使用的是EPSG:3857（Web墨卡托投影，坐标单位为米），但Leaflet的L.geoJson默认按照EPSG:4326（WGS84经纬度）解析坐标，直接加载会导致点位完全无法正常显示，添加坐标转换规则即可修复：

// 保留一份加载逻辑即可，原来的两次重复加载可以删掉
function addSites (feature, layer) {
    layer.bindPopup("<h1>"+ feature.properties.Site_Name +"</h1>")
}
L.geoJson(sitesAtRisk, {
    // 新增坐标转换配置，将3857投影坐标转为Leaflet可用的经纬度
    coordsToLatLng: function (coords) {
        return L.CRS.EPSG3857.unproject(L.point(coords[0], coords[1]))
    },
    onEachFeature: addSites
}).addTo(map)

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