在小册子中的标记之间绘制线条
我试图在小册子中插入标记（从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"
}
}
]
}
有很多方法可以通过迭代原始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数据的工作：
http://fiddle.jshell.net/nathansnider/36twhxux/
假设你的GeoJSON数据只包含点几何，你应该可以在你的$.getJSON成功函数中定义window.geojson之后使用它，如下所示：
pathCoords = connectTheDots(window.geojson);
var pathLine = L.polyline(pathCoords).addTo(map)
如果你的GeoJSON数据更加复杂，你可能需要添加一些条件来检查几何类型等，但这至少应该给你一个关于如何进行的总体思路。
编辑：
内森的想法是正确的，因为你必须自己建立折线（标记之间的界线）。
严格的说，当点列表仍然是一个数组时（假设数组顺序是你想要获得的线路连接的顺序），你必须使用你的数据。 这意味着你必须直接处理你的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);
GeoJSON数据将通过Leaflet转换为多义线，多边形等的矢量 ，以及点要素的标记 。 请参阅宣传单教程和参考。
当你想要指定Leaflet应该如何设计矢量风格时，你应该确定一个保存路径选项的对象（比如你的第一行的style变量），但是你应该把它作为你的L.geoJson图层的style选项，而不是在一个图标里面。
当您想要指定Leaflet如何设计标记样式时，确实可以设置一个特定的图标，该图标仅适用于点要素。 您应该更好地使用pointToLayer选项，因为代码只会应用于点，而不是尝试将其应用于向量（例如，没有setIcon方法）。
最后，当你想要执行一些适用于向量和标记的动作时，你可以使用onEachFeature选项来绑定你的弹出窗口。
所以你最终会得到像这样的东西：
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上重现问题。
链接地址: http://www.djcxy.com/p/30153.html