这是我在网址上的json回复:
{
"geometry": {
"type": "Point",
"coordinates": [
-1.480921,
52.979698
],
"Timestamp": "2017-07-09T09:21:30",
"GatewayID": 193,
"Speed": 94.9,
"Heading": 157
},
"type": "Feature",
"properties": {}
}
这是我的js文件:
var map = L.map('map', {
'center': [0, 0],
'zoom': 0,
'layers': [
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
})
]
});
var geojsonMarkerOptions = {
radius: 18,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
var realtime = L.realtime({
url: 'http://127.0.0.1:8000/mongo/getgpsdata/',
crossOrigin: true,
type: 'json'
}, {
interval: 3 * 1000,
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng)
}
}).addTo(map);
realtime.on('layeradd', function(e) {
var coordPart = function(v, dirs) {
return dirs.charAt(v >= 0 ? 0 : 1) +
(Math.round(Math.abs(v) * 100) / 100).toString();
},
popupContent = function(fId) {
var feature = e.features[fId],
c1 = feature.geometry.Speed
c2=feature.geometry.Timestamp
c = feature.geometry.coordinates;
return '<b>coord: </b>' +c + '<br><b>Speed:</b> '+c1 + '<br><b>Time: </b>' + c2;
},
bindFeaturePopup = function(fId) {
realtime.getLayer(fId).bindPopup(popupContent(fId));
},
updateFeaturePopup = function(fId) {
realtime.getLayer(fId).getPopup().setContent(popupContent(fId));
};
map.fitBounds(realtime.getBounds(), {maxZoom: 30});
Object.keys(e.enter).forEach(bindFeaturePopup);
Object.keys(e.update).forEach(updateFeaturePopup);
});
它工作得非常好,但它不会显示弹出窗口,但如果我提供更新&#39;代替layeradd&#39;然后它给了我弹出窗口,但历史数据丢失,因为它每次都会更新。
任何帮助都会很棒,谢谢!
答案 0 :(得分:2)
在返回Marker时添加bindPopup,这对我有用。
return L.circleMarker(latlng).bindPopup("your content")