问题描述
我正在尝试在传单中插入标记(由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:
假设您的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.
这篇关于在传单中的标记之间画线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!