jquery - リーフレット - フィーチャ データがリアルタイムで更新されない

こんばんは。リーフレットリアルタイムで座標を更新すると問題が発生し、地図上でアイコンが移動しますが、地図上のプロパティの値が変更されても、ポップアップ内の値は変更されません。 元。 マーカーの回転は変化せず、速度データも変化しません。など..

私が書いたコードは次のとおりです。

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

pointToLayer() 関数は、リアルタイム レイヤーが最初に作成されたときに 1 回だけ実行されます。その後、各マーカーの位置はリアルタイムで更新されますが、他のプロパティは変更されません。これを行う必要があります。更新ハンドラー内で。 updateEvent は、マーカーが更新されたハッシュを渡すので、これを処理できるようになります。

2020 年 9 月 4 日 7:36

ご回答ありがとうございます...でも私はあまり得意ではないので、例を教えていただけますか?

2020 年 9 月 7 日 14:20

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