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

时间:2018-08-06 18:31:32

标签: javascript leaflet

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我也只用了{ {1}}作为参数。

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

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

感谢任何有相貌的人!

1 个答案:

答案 0 :(得分:0)

您似乎滥用了L.circle工厂。它仅需要两个参数:位置(坐标)和选项。

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

如果您不更改数组,也无需slice

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

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