在传单中的标记之间画线 [英] Draw lines between markers in leaflet

问题描述

我正在尝试在传单中插入标记（由JSON数据生成）之间的行。我看到了一个示例，但它不适用于JSON数据。我可以看到标记，但没有出现任何行。

I'm trying to insert lines between markers (which are generated from JSON data) in leaflet. I saw an example, but it doesn't work with JSON data. I can see the markers, but no lines appear.

var style = {
  color: 'red',
  fillColor: "#ff7800",
  opacity: 1.0,
  fillOpacity: 0.8,
  weight: 2
};

$.getJSON('./server?id_dispositivo=' + id_device + '', function(data) {
  window.geojson = L.geoJson(data, {
    onEachFeature: function (feature, layer) {
      var Icon = L.icon({
        iconUrl: './images/mymarker.png',
        iconSize: [18, 28], // size of the icon
        style: style,
      });
      layer.setIcon(Icon);
      layer.bindPopup(feature.properties.date + '<br />' + feature.properties.id);
    }
  });
});
map.addLayer(geojson);

我的JSON数据：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -70.219841,
          8.6310997
        ]
      },
      "properties": {
        "id": 336,
        "id_user": 1,
        "id_device": 1,
        "timestamp": 1446571154,
        "date": "12:49PM 03-11-2015",
        "Latitude": 8.6310997,
        "Longitude": -70.219841,
        "speedKPH": 0,
        "heading": "",
        "Name": "N\/D",
        "City": "N\/D",
        "estatus": "Stop"
      }
    }
  ]
}

推荐答案

通过迭代原始GeoJSON或生成的L.GeoJson图层来生成折线几何图形，有很多方法可以做到这一点。这是一个简单的函数，它将 L.geoJson 点数转换为一个坐标数组，可以传递给 L.polyline ：

There are many ways you could do this by iterating over either the original GeoJSON or the resulting L.GeoJson layer to produce a polyline geometry. Here is one simple function that will turn a L.geoJson layer of points into an array of coordinates that can be passed to L.polyline:

function connectTheDots(data){
    var c = [];
    for(i in data._layers) {
        var x = data._layers[i]._latlng.lat;
        var y = data._layers[i]._latlng.lng;
        c.push([x, y]);
    }
    return c;
}

这里有一个小提琴，展示了一些合成的GeoJSON数据：

and here is a fiddle showing it at work on some synthetic GeoJSON data:

http://fiddle.jshell.net/ nathansnider / 36twhxux /

假设您的GeoJSON数据仅包含点几何，您应该能够在定义窗口后使用它.geojson 在您的 $。getJSON 成功函数中如下：

Assuming that your GeoJSON data contains only point geometry, you should be able to use it after you define window.geojson within your $.getJSON success function like so:

pathCoords = connectTheDots(window.geojson);
var pathLine = L.polyline(pathCoords).addTo(map)

如果你的GeoJSON数据更复杂，您可能需要添加一些条件来检查几何类型等，但这至少可以让您大致了解如何继续。

If your GeoJSON data are more complex, you might need to add some conditionals to check for geometry type, etc., but this should at least give you a general idea of how to proceed.

这篇关于在传单中的标记之间画线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！