传单-功能数据不会实时更新

Question

晚上好，我在传单实时更新坐标时遇到问题，图标在地图上移动，但是如果值​​在地图上的属性发生变化，而在弹出窗口中它们不会发生变化。Ex。标记的旋转不会改变，速度数据也不会改变。等等。

这是我写的代码：

var map = L.map('map', {minZoom: 3, maxZoom: 18});
L.Control.measureControl().addTo(map);
mapLink = 'Esri';
wholink = 'i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community';
L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: '© '+mapLink+', '+wholink,
maxZoom: 18,
}).addTo(map);
var shipLayer = L.layerGroup();
var realtime = L.realtime(
{
url: 'http://localhost/api/xxx/',
crossOrigin: true,
type: 'json',
},
{
interval: 2 * 1000,
getFeatureId: function(featureData){
return featureData.properties.idRisorsa;
},
pointToLayer: function (feature, latlng) {
var track = L.icon({
iconUrl: 'https://localhost' + feature.properties.TipoRisorsa + '.png',
iconSize: [30, 30]
});
tracker = L.marker(latlng, {icon: track, rotationAngle: feature.properties.Angolo, title: feature.properties.NomePilota + " " + feature.properties.MarcaDrone} );
tracker.bindPopup('Id: ' + feature.properties.idRisorsa +
'
Angolo: ' + feature.properties.Angolo +
'
Nome:' + feature.properties.NomePilota +'' +
'
Marca:' + feature.properties.MarcaDrone +
'
Coordinate: ' + latlng);
tracker.addTo(shipLayer);
return tracker;
}}).addTo(map);
realtime.on('update', function() {realtime.getBounds(), {maxZoom: 18};});
map.setView([0, 0], 0);

Answer 1

您必须使用updateEvent。

updateEvent.features是一个具有表示要素ID及其相应要素对象的键的对象。

有一个例子：

realtime.on('update', function (updateEvent) {
for (var featureId in updateEvent.features) {
var updatedFeature = updateEvent.features[featureId];
var layer = realtime.getLayer(featureId);
if (layer) {
// Update tooltip content
layer.setTooltipContent(updatedFeature.properties.name);
// Update popup content
layer.setPopupContent(`<div class="card text-primary border-warning mb-3" style="max-width: 21rem;">
<div class="card-header bg-transparent border-warning">
<h5><img src="${updatedFeature.properties.marker}">: ${updatedFeature.properties.name}</h5>
</div>
...
</div>
</div>`);
}
}
map.fitBounds(realtime.getBounds(), { maxZoom: 15 });
});