Leaflet无法加载EPSG:3857坐标的GeoJSON问题求助

嗨，我看你遇到的问题很典型——刚接触非经纬度坐标的话很容易踩这个坑！咱们一步步来理清楚：

首先，你的GeoJSON里的坐标不是EPSG:3857，从数值[6690861, 682187]和你注释里写的UTM15来看，这应该是**UTM Zone 15N（对应EPSG:32615）**的坐标。Leaflet默认只认WGS84经纬度（EPSG:4326）和Web墨卡托（EPSG:3857），直接扔给它UTM坐标，它根本不知道怎么转成地图上的位置，所以才啥都看不到，而且控制台还没报错（因为语法没问题，只是坐标不在Leaflet能识别的范围内）。

下面是具体的解决步骤和修正后的代码，你跟着改就行：

1. 先准备好必要的工具库 #

你需要proj4和proj4leaflet这两个库——proj4负责坐标转换，proj4leaflet把它和Leaflet打通，让Leaflet能识别自定义坐标系。记得在Leaflet的脚本之后加载这两个库。

2. 定义UTM15N的坐标系参数 #

先给proj4注册EPSG:32615的参数，告诉它这个坐标系的规则：

proj4.defs('EPSG:32615', '+proj=utm +zone=15 +datum=WGS84 +units=m +no_defs');

3. 把坐标系转换成Leaflet能懂的格式 #

用proj4leaflet创建一个Leaflet可用的CRS对象，里面要包含瓦片分辨率（和OpenStreetMap的瓦片层级对应）：

var crsUTM15 = new L.Proj.CRS('EPSG:32615', proj4.defs('EPSG:32615'), {
  resolutions: [8192, 4096, 2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5]
});

4. 修正你的GeoJSON加载代码 #

之前你重复加载了两次GeoJSON（一次是L.geoJson(data).addTo(map)，一次是后面的layerGroup），这完全没必要，我帮你合并成了一次，而且加上了坐标转换的逻辑：

完整的修正后代码：

var map = L.map('map').setView([52.2129919, 5.2793703], 8);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data © OpenStreetMap'
}).addTo(map);

// 注册UTM15N坐标系
proj4.defs('EPSG:32615', '+proj=utm +zone=15 +datum=WGS84 +units=m +no_defs');
// 创建Leaflet可识别的CRS对象
var crsUTM15 = new L.Proj.CRS('EPSG:32615', proj4.defs('EPSG:32615'), {
  resolutions: [8192, 4096, 2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5]
});

async function addGeoJson() {
  try {
    const response = await fetch("geojs.php");
    const data = await response.json();
    
    // 加载GeoJSON时指定CRS，自动完成坐标转换
    L.geoJSON(data, {
      crs: crsUTM15,
      onEachFeature: function (feature, layer) {
        // 给popup加个默认值，避免date为空时显示奇怪
        const dateText = feature.properties.date || '未填写日期';
        layer.bindPopup(`<h1>${feature.properties.message}</h1><p>Datum: ${dateText}</p>`);
      }
    }).addTo(map);
  } catch (error) {
    // 加个错误捕获，方便排查加载问题
    console.error('加载GeoJSON时出错啦:', error);
  }
}

addGeoJson();

几个额外的小提示 #

• 如果你发现坐标还是不对，先确认你的地点是不是真的在UTM Zone 15N的范围里（大概是西经90°到84°之间，北纬0°到84°），如果不在，那你得换对应的UTM带号和EPSG代码哦。
• 你的GeoJSON里的坐标是字符串类型（比如"6690861"），proj4leaflet一般能自动转成数字，但如果还是有问题，你可以在加载后手动转：遍历features，把feature.geometry.coordinates的每个元素用parseFloat()转成数字。
• 加了try/catch之后，要是fetch或者解析JSON出错，控制台会有提示，再也不会像之前那样毫无头绪啦。

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