Leaflet中基于GeoJSON计算的平均速度为Polyline折线设置颜色异常问题

• 变量作用域错误：你定义的velocitiy是sendDataToMap函数内部的局部变量，全局作用域的restylemap函数无法读取到这个值，判断逻辑直接失效。
• API调用错误：L.polyline的配置项中没有style参数，style是L.geoJSON的专属配置，你给折线传style属性不会生效，显示的是Leaflet默认的蓝色样式。
• 执行顺序错误：你创建折线时还没有计算出速度值，即使样式配置正确，也拿不到正确的判断条件。
• 时间提取逻辑错误：提取时间戳时你额外套了一层数组，导致后续计算总时长时取值错误。

你可以先创建临时折线用于计算距离，等速度计算完成后再动态设置折线样式即可，参考修改后的核心代码：

var visualizer = {};
visualizer.sendDataToMap = function (jsonData) {
  // 读取坐标
  const latlngs = jsonData.features.map((feature) => [
    feature.geometry.coordinates[1],
    feature.geometry.coordinates[0]
  ]);
  // 提取时间戳（去掉多余的数组嵌套）
  const timeArr = jsonData.features.map((feature) => feature.properties.time);
  // 先创建无特殊样式的临时折线，仅用于计算距离
  var linie = L.polyline(latlngs);
  // 计算距离
  var lengthInMeters = linie.measuredDistance();
  var distance = Number(lengthInMeters.replace(/[^\d.-]/g, '')); 
  // 计算总时长
  var elapstime = (timeArr[timeArr.length - 1] - timeArr[0]) / 1000 / 60 / 60;
  // 计算速度
  var velocitiy = distance / elapstime;
  // 按速度判断颜色
  let lineColor = 'grey';
  if (velocitiy <=4) {
    lineColor = 'red';
  } else if (velocitiy <=20) {
    lineColor = 'green';
  }
  // 给折线设置正确的样式
  linie.setStyle({color: lineColor});
  // 添加到地图
  linie.addTo(map);
  map.fitBounds(linie.getBounds());
  alert("Velocitiy: "+velocitiy.toFixed(1)+" km/h");
};

修改说明 #

• 去掉了不必要的restylemap函数，直接在速度计算完成后判断颜色，避免作用域问题
• 用setStyle方法在速度计算完成后动态设置折线样式，解决执行顺序问题
• 修正了时间戳提取的逻辑，确保时长计算准确
• 修正了L.polyline的样式设置方式，符合Leaflet的API规范

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