Javascript 在传单中的标记之间画线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33468905/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Draw lines between markers in leaflet
提问by user4131013
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.
我正在尝试在传单中的标记（由 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);
My JSON data:
我的 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"
}
}
]
}
采纳答案by nathansnider
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.geoJsonlayer of points into an array of coordinates that can be passed to L.polyline:
有很多方法可以通过迭代原始 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;
}
and here is a fiddle showing it at work on some synthetic GeoJSON data:
这是一个显示它在一些合成 GeoJSON 数据上工作的小提琴：
http://jsfiddle.net/nathansnider/36twhxux/
http://jsfiddle.net/nathansnider/36twhxux/
Assuming that your GeoJSON data contains only point geometry, you should be able to use it after you define window.geojsonwithin your $.getJSONsuccess function like so:
假设您的 GeoJSON 数据仅包含点几何，您应该能够window.geojson在您的$.getJSON成功函数中定义后使用它，如下所示：
pathCoords = connectTheDots(window.geojson);
var pathLine = L.polyline(pathCoords).addTo(map)
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.
如果您的 GeoJSON 数据更复杂，您可能需要添加一些条件来检查几何类型等，但这至少应该让您大致了解如何进行。
回答by ghybs
EDIT:
编辑：
Nathan's idea is correct in the sense that you will have to build a polyline (the lines between your markers) yourself.
Nathan 的想法是正确的，因为您必须自己构建多段线（标记之间的线）。
To be rigorous, you have to use your data when the list of points is still an array (and assuming the array order is the order of line connections you want to get). Which means you have to work on your GeoJSON data directly.
严格来说，您必须在点列表仍然是数组时使用您的数据（并假设数组顺序是您想要获得的线连接顺序）。这意味着您必须直接处理您的 GeoJSON 数据。
For example, you would do:
例如，你会这样做：
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);
The GeoJSON data will be converted by Leaflet into vectorsfor polylines, polygons, etc., and markersfor point features. Please refer to Leaflet tutorialand reference.
GeoJSON 数据将由 Leaflet 转换为折线、多边形等的向量，以及点要素的标记。请参阅传单教程和参考。
When you want to specify how Leaflet should style the vectors, you should indeed make up an object that holds path options(like your stylevariable on first line), but you should give it as the styleoptionof your L.geoJsonlayer, not inside an icon.
如果要指定单张应该怎样风格的载体，你的确应该补上保持对象的路径选项（如您style在第一行的变量），但你应该把它作为style选择你的L.geoJson层，而不是里面的图标。
When you want to specify how Leaflet should style the markers, you can indeed set a specific icon, which will be applicable only to point features. You should better use the pointToLayeroption, as the code will be really applied only on points, instead of trying to apply it to vectors (which do not have a method setIconfor example).
当您想指定 Leaflet 应如何设置标记的样式时，您确实可以设置一个特定的图标，该图标仅适用于点特征。您应该更好地使用pointToLayeroption，因为代码将真正应用于点，而不是尝试将其应用于向量（例如，没有方法setIcon）。
Finally, when you want to perform some action which applies to both vectors and markers, you use the onEachFeatureoption, for example to bind your popup.
最后，当您想要执行一些适用于向量和标记的操作时，您可以使用onEachFeature选项，例如绑定您的弹出窗口。
So you would end up with something like:
所以你最终会得到类似的东西：
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);
}
});
As pointed out in the comments, whenever you seek for help from other people, you would make their task easier (hence you would get better and faster support) if you take the time to properly state your issue, with description / screenshots of what is going wrong and post some clean code. A very good practice for client side code is to reproduce the issue on jsFiddlefor example.
正如评论中指出的那样，每当您寻求其他人的帮助时，如果您花时间正确地陈述您的问题，并附上描述/截图出错并发布一些干净的代码。例如，客户端代码的一个非常好的做法是在jsFiddle上重现该问题。
