在传单中的标记之间画线

Question

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

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"
      }
    }
  ]
}

Answer 1

编辑：

Nathan 的想法是正确的，因为您必须自己构建折线（标记之间的线）。

严格来说，当点列表仍然是一个数组时，你必须使用你的数据（并假设数组顺序是你想要获得的线连接的顺序）。这意味着您必须直接处理 GeoJSON 数据。

例如，你会这样做：

function connectDots(data) {
    var features = data.features,
        feature,
        c = [],
        i;

    for (i = 0; i < features.length; i += 1) {
        feature = features[i];
        // Make sure this feature is a point.
        if (feature.geometry === "Point") {
            c.push(feature.geometry.coordinates);
        }
    }
    return c;
}

L.polyline(connectDots(data)).addTo(map);

Leaflet 会将 GeoJSON 数据转换为 vectors 用于折线、多边形等，以及 markers 用于点特征。请参考单张tutorial and reference.

当你想指定 Leaflet 如何设置 vectors 的样式时，你确实应该构建一个包含 L.geoJson 层的 path options (like your style variable on first line), but you should give it as the style option 的对象，不在图标内。

当您想指定 Leaflet 应如何设置标记的样式时，您确实可以设置一个特定的图标，该图标仅适用于点特征。您应该更好地使用 pointToLayer option，因为代码实际上只会应用于点，而不是尝试将其应用于向量（例如，没有方法 setIcon）。

最后，当你想执行一些同时适用于矢量和标记的操作时，你可以使用 onEachFeature option，例如绑定你的弹出窗口。

所以你最终会得到类似的东西：

var myIcon = L.icon({
    iconUrl: './images/mymarker.png',
    iconSize: [18, 28]
});

var geojson = L.geoJson(data, {

    style: style, // only applies to vectors.

    // only applies to point features
    pointToLayer: function(feature, latlng) {
        return L.marker(latlng, {icon: myIcon});
    },

    // will be run for each feature (vectors and points)
    onEachFeature: function(feature, layer) {
        layer.bindPopup(feature.properties.date + '<br />' + feature.properties.id);
    }

});

正如评论中所指出的，无论何时您向其他人寻求帮助，如果您花时间正确地陈述您的问题并附上描述，您就会让他们的任务变得更容易（因此您会得到更好更快的支持） / 出现问题的屏幕截图和 post 一些干净的代码。例如，客户端代码的一个很好的做法是在 jsFiddle 上重现该问题。

Answer 2

通过遍历原始 GeoJSON 或生成的 L.GeoJson 层来生成多段线几何图形，您可以通过多种方式实现这一点。这是一个简单的函数，它将 L.geoJson 点层转换为可以传递给 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;
}

这里是 fiddle 显示它在一些合成 GeoJSON 数据上的工作：

http://jsfiddle.net/nathansnider/36twhxux/

假设您的 GeoJSON 数据仅包含点几何，您应该可以在 $.getJSON 成功函数中定义 window.geojson 后使用它，如下所示：

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

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

在传单中的标记之间画线

Draw lines between markers in leaflet

javascript

geojson

leaflet