如何动态加载额外的数据为LeafletJS弹出加载

How to dynamically load extra data for LeafletJS Popup on load

本文关键字:加载 数据 LeafletJS 何动态 动态      更新时间:2023-09-26

我正在升级一个JSF页面,我有一个在地图上显示数据的OSM基图和最新的稳定传单发布的标记和功能。

对于每个标记,我都有一些元素的基本信息,这些信息是在创建标记时加载的。然而,有一些数据需要显示可用的天数,我不想在用户实际单击弹出窗口之前加载,因为我希望它创建一个比必要的大得多的负载。

是否有一种方法可以使用承诺首先加载所需的额外数据,然后在用户单击后打开弹出窗口?

这个问题的答案非常简单…

从创建标记开始:

function onMapClick(e){
    dataPromise = new Promise(function(resolve,reject){ /*grab your data here*/ });        
    dataPromise.then(function(result){
       popupPromise = new Promise(function(resolve,reject){
          e.target.closePopup();
          e.target.unbindPopup();
          newPopup = createPopupFromServerData(result);
          resolve(newPopup);
        });
   });
   popupPromise .then(function(result){
         e.target.bindPopup(result).openPopup();
   });
}

    marker.bindPopup("Loading element data, please wait..."); //this can include anything
    marker.on('click', onMapClick);

这是正确打开一个新弹出框所需要的第二个承诺,但它却逃过了我两天。