基于静态API响应优化Leaflet GeoJSON可视化性能求助

核心优化思路 #

1. 缓存静态API数据：仅发起一次API请求，将结果存入全局变量复用，避免重复请求
2. 构建快速查找映射：把API返回的XDSegID和los转换成以XDSegID为键的对象，将原本O(n²)的循环匹配降为O(1)的直接查找
3. 简化样式判断逻辑：用样式映射表替代多层else if，提升代码可读性与执行效率

代码实现 #

// 全局缓存变量：存储API返回的los映射（XDSegID -> los值）
let losAmCache = null;
// 样式映射表：los值对应颜色
const losStyleMap = {
  'A': '#060',
  'B': '#9f0',
  'C': '#ff3',
  'D': '#f90',
  'E': '#f60',
  'F': '#c00'
};

// 加载API数据（自动复用缓存）
function loadLosAmData() {
  return new Promise((resolve, reject) => {
    if (losAmCache) {
      resolve(losAmCache);
      return;
    }
    $.ajax({
      method: "get",
      url: "/los_am",
      beforeSend: function(){
        $("#loader").css({
          display: "inline-block",
          visibility: "visible"
        });
      },
      complete: function(){
        $("#loader").css({
          display: "none",
          visibility: "hidden"
        });
      },
      success: function(res){
        // 将API数据转换为XDSegID为键的映射对象
        const losMap = {};
        for (const key in res.XDSegID) {
          if (res.XDSegID.hasOwnProperty(key)) {
            const segId = res.XDSegID[key];
            losMap[segId] = res.los[key];
          }
        }
        losAmCache = losMap;
        resolve(losMap);
      },
      error: reject
    });
  });
}

// 点击事件处理
$(".ambtn").on("click", function(){
  loadLosAmData().then(losMap => {
    rdNetworkLyr.eachLayer(function(layer) {
      const segId = layer.feature.properties.XDSegID;
      // 直接通过XDSegID查找对应的los值，无需循环匹配
      const los = losMap[segId];
      if (los && losStyleMap[los]) {
        layer.setStyle({ color: losStyleMap[los] });
      }
      // 可选：处理未匹配到的图层默认样式
      // else {
      //   layer.setStyle({ color: '#ccc' });
      // }
    });
  }).catch(err => {
    console.error('加载LOS数据失败:', err);
  });
});

优化说明 #

• 缓存机制：losAmCache变量存储转换后的映射对象，第一次请求后后续点击直接复用，不再发起API请求
• 映射转换：将API返回的数组结构转为键值对，查找时直接通过losMap[segId]获取los值，彻底消除嵌套循环的性能损耗
• 样式映射表：losStyleMap把los值和颜色对应起来，替代多层条件判断，代码更简洁易维护
• Promise封装：用Promise处理异步加载逻辑，确保数据加载完成后再执行样式设置

内容的提问来源于stack exchange，提问作者RMT