如何在Leaflet Route360服务中使用GeoJSON点图层？

嘿，很高兴你对Route360服务感兴趣！结合GeoJSON图层来使用它其实很顺手，我来一步步帮你梳理具体怎么做：

你的现有代码已经在收集GeoJSON点的坐标到coords数组里了，接下来我们可以基于这个基础，把Route360服务的调用逻辑整合进去：

1. 先确认Route360依赖已加载 #

首先要保证页面里已经引入了Route360的官方脚本和样式（记得替换成你自己的API密钥）：

<link rel="stylesheet" href="https://route360.net/api/[你的API密钥]/leaflet/route360.css" />
<script src="https://route360.net/api/[你的API密钥]/leaflet/route360.js"></script>

2. 等GeoJSON加载完成后批量调用服务 #

因为L.GeoJSON.AJAX是异步加载的，最好等所有点加载完成后再处理坐标，我们可以用图层的load事件来触发：

let coords = []; 
const points = new L.GeoJSON.AJAX("{% url 'mylayer' %}",{ 
  onEachFeature:function (feature, layer) { 
    // GeoJSON是[lng,lat]，Leaflet用[lat,lng]，所以反转坐标是对的
    coords.push(feature.geometry.coordinates.reverse()); 
    // 保留你原有的点击事件逻辑
    layer.on('click', function (e) { 
      const field1 = document.getElementById('f1'); 
      field1.innerHTML = e.target.feature.properties.你的字段名; // 补全你要展示的属性
    });
  }
});

// 当所有GeoJSON点加载完成后，调用Route360服务
points.on('load', function() {
  const route360 = new r360.Route360('你的API密钥');
  
  // 示例：以第一个点为起点生成30分钟驾车等时圈
  if (coords.length > 0) {
    const isochrone = new r360.Isochrone({
      center: new r360.LatLng(coords[0][0], coords[0][1]),
      time: 30, // 时间阈值（分钟）
      travelType: 'car' // 出行方式：car/bike/walk等
    });
    
    route360.calculateIsochrones(isochrone, function(isochrones) {
      // 把生成的等时圈添加到地图上
      isochrones.getLayer().addTo(map);
    });
  }
});

// 别忘了把GeoJSON图层添加到地图
points.addTo(map);

3. 点击单个GeoJSON点时触发Route360服务 #

如果你想点击某个点时，以该点为起点调用服务，可以修改点击事件的逻辑：

layer.on('click', function (e) { 
  // 保留原有展示属性的逻辑
  const field1 = document.getElementById('f1'); 
  field1.innerHTML = e.target.feature.properties.你的字段名;

  // 获取点击点的坐标
  const clickedLatLng = e.latlng;
  const route360 = new r360.Route360('你的API密钥');
  
  // 生成该点的20分钟步行等时圈
  const isochrone = new r360.Isochrone({
    center: new r360.LatLng(clickedLatLng.lat, clickedLatLng.lng),
    time: 20,
    travelType: 'walk'
  });
  
  route360.calculateIsochrones(isochrone, function(isochrones) {
    // 先清除之前的等时圈（避免重复叠加）
    if (window.isochroneLayer) map.removeLayer(window.isochroneLayer);
    window.isochroneLayer = isochrones.getLayer();
    map.addLayer(window.isochroneLayer);
  });
});

几个小提醒 #

• 确保你的GeoJSON坐标是标准的WGS84（EPSG:4326），Route360默认用这个坐标系；
• 如果你的GeoJSON点数量很多，批量调用时要注意API的请求限制，避免超出调用次数；
• 如果你需要计算多点间的路线而非等时圈，可以替换成Route360的Route类来实现。

这样应该就能轻松把GeoJSON图层和Route360服务结合起来啦！

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