jquery 传单-功能数据未实时更新

6xfqseft  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(104)

晚上好,我有一个问题与传单实时,更新坐标,图标移动在Map上,但如果在Map上的属性值的变化,并在弹出窗口中,他们不改变。例如,标记的旋转不改变,速度数据不改变。等等。
下面是我写的代码:

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);

字符串

2exbekwf

2exbekwf1#

必须使用updateEvent。
features是一个对象,它的键表示featureID及其对应的featureobject。
有一个例子:

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 });
});

字符串

相关问题