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

通过迭代原始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;
}

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

wdt.io

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

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

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

Answer 2

编辑：

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);

GeletJSON数据将由Leaflet转换为折线，多边形等的向量，以及点要素的标记。请参阅传单tutorial和reference。

如果要指定Leaflet应如何设置向量的样式，您确实应该构成一个包含path options的对象（就像第一行的style变量一样），但是你应该将它作为L.geoJson图层的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);
    }

});

正如评论中所指出的，无论何时你寻求其他人的帮助，如果你花时间正确陈述你的问题，你会让他们的任务更容易（因此你会得到更好更快的支持），描述/截图出了什么问题并发布一些干净的代码。客户端代码的一个很好的做法是在jsFiddle上重现问题。

在传单中的标记之间画线

2 个答案: