Leaflet.js根据提供的点数显示线或圆

Question

function filterSuccessiveDuplicatePositions(latlngs) {
var result = [];

if (latlngs.length > 0) {
  result.push(latlngs[0]);
}

for (var i = 1; i < latlngs.length; i += 1) {
  if (!L.latLng(latlngs[i]).equals(latlngs[i - 1])) {
    result.push(latlngs[i]);
  }
}
return result;
}

$.ajax({
type: "GET",
url: "/geojson/routes",
dataType: 'json',
async: true,
success: function(latlngs) {
  if (filterSuccessiveDuplicatePositions(latlngs).length >= 2){
    console.log("multiple points")
    var filtered = filterSuccessiveDuplicatePositions(latlngs);
    var Geodesic = L.geodesic([filtered], {
      weight: 3,
      opacity: 1,
      color: 'navy',
      steps: 200,
    }).addTo(mymap);
  }
  else{
    console.log("single point")
    var filtered = filterSuccessiveDuplicatePositions(latlngs);
    var Circle = L.circle(filtered.slice(0), filtered.slice(1), {
      radius: 1000,
    }).addTo(mymap);
    }
  }
  });

我收到此错误：

TypeError: this._latlng is null

我想这是因为L.circle（）是没有得到正确的数据，尽管filtered是一个纬度和经度数组-而不是分层filtered我也只是用filtered作为参数。

我目前有一个观点-基于带有空白地图的另一个脚本。

目的是在仅提供一个点的情况下绘制一个圆，而在提供多个点的情况下绘制多条线。

感谢任何看起来的人！

Answer 1

您似乎滥用了L.circle工厂。 它仅需要2个参数：位置（坐标）和选项。

您可能还对存储在filtered变量中的内容（即filterSuccessiveDuplicatePositions函数返回的内容）感到困惑：它是一个坐标数组。 而您似乎尝试提取索引0处的纬度和索引1处的经度。

如果不更改数组，也无需slice 。

L.circle(filtered[0], {
  radius: 1000,
}).addTo(mymap);

顺便说一句，您可以通过在成功回调的开始处缓存filterSuccessiveDuplicatePositions(latlngs)的结果来干燥代码，而不必多次调用它。