使用turf.nearestPoint始终返回同一个点的技术求助

问题根源 #

嘿，我一眼就发现问题所在啦！你遇到的“无论点击地图哪个位置都返回同一个最近点”的问题，核心原因是坐标顺序不匹配：

• Leaflet的e.latlng返回的是[纬度(lat), 经度(lng)]格式
• Turf.js严格遵循GeoJSON标准，要求坐标格式为[经度(lng), 纬度(lat)]

你在创建目标点时错误地把纬度放在了经度前面，导致每次点击都相当于在同一个错误的坐标位置查找最近点，自然结果始终固定不变。

修正后的关键代码 #

只需要修改地图点击事件里的targetPoint创建逻辑即可：

map.on('click', function(e) {
  var coord = e.latlng;
  // 重点：修正坐标顺序，Turf需要 [经度, 纬度]
  var targetPoint = turf.point([coord.lng, coord.lat]);
  var nearest = turf.nearestPoint(targetPoint, points);
  alert(JSON.stringify(nearest));
});

额外优化建议 #

为了让你的地图体验更好，我还整理了两个小优化：

• 避免使用同步XMLHttpRequest：你的httpGet函数用了同步请求，会阻塞页面加载，推荐换成异步的fetch：

  async function fetchSchoolData() {
    const response = await fetch(url);
    const data = await response.json();
    return data.vectorQuery.layers[243];
  }
  // 使用方式
  fetchSchoolData().then(schoolData => {
    // 加载GeoJSON、创建Turf要素集等逻辑放在这里
  });
  

• 用Leaflet弹窗替代alert：原生alert体验较差，换成Leaflet自带的弹窗更贴合地图场景：

  map.on('click', function(e) {
    var coord = e.latlng;
    var targetPoint = turf.point([coord.lng, coord.lat]);
    var nearest = turf.nearestPoint(targetPoint, points);
    // 弹出Leaflet原生弹窗
    L.popup()
      .setLatLng(coord)
      .setContent(`最近学校：<strong>${nearest.properties.NAME}</strong>`)
      .openOn(map);
  });
  

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