传单实时弹出数据

Question

我在基于传单的网站上有一个用于标记的 json 数据链接。当我单击地图上的标记时，我希望它显示从 json 文件中提取的实时数据。我希望它每秒钟左右刷新一次。如果你能指导我，我会很高兴。我尝试了其他方法，但它们将我引导到具有实时数据的网站。

    //add more latitude and longitude
      let arrs = [
      [39.921567, 32.798871],
      [39.9172415, 32.803959]
              ];

  var antPath = L.polyline.antPath;

  var path = antPath(arrs, {
      "paused": false,   　　
      "reverse": false,　　
      "delay": 500,　　　　
      "dashArray": [43, 30],　
      "weight": 5,　　　　
      "opacity": 0.5,　　
      "color": "#0000FF",　
      "pulseColor": "#FFFFFF"　　
  });

  path.addTo(map).bindPopup("SPEED:6<br>BİTRATE:150<br>NSS:5");

  let arrs1 = [
  [39.912916, 32.809047],
  [39.9172415, 32.803959]
          ];

  var antPath = L.polyline.antPath;
  var path = antPath(arrs1, {
      "paused": true,   　　
      "reverse": false,　　
      "delay": 500,　　　　
      "dashArray": [43, 30],　
      "weight": 5,　　　　
      "opacity": 0.5,　　
      "color": "#FF0005",　
      "pulseColor": "#31203E"　　
  });

  path.addTo(map).bindPopup("SPEED:8<br>BİTRATE:125<br>NSS:8");

  let arrs2 = [
  [39.921567, 32.798871],
  [39.92105, 32.8007925]
          ];

  var antPath = L.polyline.antPath;
  var path = antPath(arrs2, {
      "paused": false,   　　
      "reverse": false,　　
      "delay": 500,　　　　
      "dashArray": [43, 30],　
      "weight": 5,　　　　
      "opacity": 0.5,　　
      "color": "#0000FF",　
      "pulseColor": "#FFFFFF"
  });
  path.addTo(map).bindPopup("SPEED:2<br>BİTRATE:25<br>NSS:6");

  let arrs3 = [
  [39.920533, 32.802714],
  [39.92105, 32.8007925]
          ];

  var antPath = L.polyline.antPath;
  var path = antPath(arrs3, {
      "paused": false,   　　
      "reverse": false,　　
      "delay": 500,　　　　
      "dashArray": [43, 30],　
      "weight": 5,　　　　
      "opacity": 0.5,　　
      "color": "#FF0005",　
      "pulseColor": "#31203E"　　
  });

  path.addTo(map).bindPopup("SPEED:5<br>BİTRATE:250<br>NSS:4");

  let arrs4 = [
  [39.920533, 32.802714],
  [39.918802, 32.802637]
          ];

  var antPath = L.polyline.antPath;
  var path = antPath(arrs4, {
      "paused": false,   　　
      "reverse": false,　　
      "delay": 500,　　　　
      "dashArray": [43, 30],　
      "weight": 5,　　　　
      "opacity": 0.5,　　
      "color": "#0000FF",　
      "pulseColor": "#FFFFFF"　　
  });

  path.addTo(map).bindPopup("SPEED:6<br>BİTRATE:125<br>NSS:7");

  let arrs5 = [
  [39.917071, 32.802560],
  [39.918802, 32.802637]
          ];

  var antPath = L.polyline.antPath;
  var path = antPath(arrs5, {
      "paused": false,   　　
      "reverse": false,　　
      "delay": 500,　　　　
      "dashArray": [43, 30],　
      "weight": 5,　　　　
      "opacity": 0.5,　　
      "color": "#FF0005",　
      "pulseColor": "#31203E"　　
  });

    

  path.addTo(map).bindPopup("SPEED:10<br>BİTRATE:100<br>NSS:7");

  var greenIcon = L.icon({
      iconUrl: 'tobb.png',
      iconSize:     [50, 50], // size of the icon



   popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

  L.marker([39.921567, 32.798871], {icon: greenIcon}).addTo(map).bindPopup("A");

  L.marker([39.912916, 32.809047], {icon: greenIcon}).addTo(map).bindPopup("B");

  L.marker([39.917071, 32.802560], {icon: greenIcon}).addTo(map).bindPopup("C");

  L.marker([39.920533, 32.802714], {icon: greenIcon}).addTo(map).bindPopup("D");
  </script>
}

    

Answer 1

收听popupopen 事件，然后您可以使用setContent() 更新内容。当一个新的弹出窗口打开或旧的弹出窗口关闭时，间隔被清除==停止。

现在您必须通过默认请求获取数据，然后更新内容。

var i = 0;
var timeout = null;
map.on('popupopen',(e)=>{
  var layer = e.target;
  var popup = e.popup;
  clearInterval(timeout);
  timeout = setInterval(()=>{
    popup.setContent('TEST '+i);
    i++;
  },1000) 
});
map.on('popupclose',(e)=>{
  clearInterval(timeout); 
});

更新

我把setInterval改成了setTimeout，现在是等到请求完成了。

var i = 0;
var timeout = null; 

map.on('popupopen',(e)=>{
    console.log(e);
  var layer = e.target;
  var popup = e.popup;
  clearTimeout(timeout);
  startTimeout(popup);
  
});
map.on('popupclose',(e)=>{
  clearTimeout(timeout); 
});

function startTimeout(popup){
    timeout = setTimeout(()=>{
    fetch('http://medikalarge.com/ayy/mesh_path.json')
    .then(response => response.json())
    .then(result => {
        console.log(result)
        var data = result.data;
        console.log(data);
        popup.setContent(data[0].from_loc + " "+data[0].bitrate);
        startTimeout(popup);
    });
  },1000); 
}

https://jsfiddle.net/falkedesign/pcnqL1dm/

如果它对你有用，我希望你不要忘记接受/赞成这个答案