如何监听Google Maps中数据层setStyle()方法的完成状态

因为Data.setStyle()是异步批量处理要素样式的，直接在调用前后切换加载器状态会失效。你可以通过手动遍历要素并逐个设置样式，结合Promise追踪所有样式更新完成的时机，从而准确控制加载器的显示/隐藏。

方案1：封装异步样式设置函数 #

显示图层样式的异步实现 #

// 封装异步设置图层样式的函数
function setLayerStyleAsync(layer, styleCallback) {
  return new Promise((resolve) => {
    const features = layer.getFeatures();
    const totalFeatures = features.getLength();
    if (totalFeatures === 0) {
      resolve();
      return;
    }

    let completedCount = 0;
    features.forEach((feature) => {
      // 执行自定义样式逻辑
      const style = styleCallback(feature);
      // 为单个要素设置样式
      layer.overrideStyle(feature, style);
      
      completedCount++;
      // 所有要素处理完成后触发resolve
      if (completedCount === totalFeatures) {
        resolve();
      }
    });
  });
}

// 使用示例
// 显示加载器
showLoader();

setLayerStyleAsync(layer, (feature) => {
  if (feature.getGeometry().getType() === "Polygon") {
    return {
      strokeColor: "blue",
      strokeWeight: 1,
      strokeOpacity: 0.6,
      fillColor: "rgba(0, 0, 255)",
      fillOpacity: 0.35,
      visible: true,
    };
  } else {
    return { visible: true };
  }
}).then(() => {
  // 所有样式设置完成，隐藏加载器
  hideLoader();
});

隐藏图层的异步实现 #

// 封装异步隐藏图层的函数
function hideLayerAsync(layer) {
  return new Promise((resolve) => {
    const features = layer.getFeatures();
    const totalFeatures = features.getLength();
    if (totalFeatures === 0) {
      resolve();
      return;
    }

    let completedCount = 0;
    features.forEach((feature) => {
      layer.overrideStyle(feature, { visible: false });
      
      completedCount++;
      if (completedCount === totalFeatures) {
        resolve();
      }
    });
  });
}

// 使用示例
showLoader();
hideLayerAsync(layer).then(() => hideLoader());

方案2：利用Promise.all简化实现 #

如果偏好更简洁的写法，可以用Promise.all并行处理所有要素的样式设置：

function setLayerStyleAsync(layer, styleCallback) {
  const features = layer.getFeatures();
  const stylePromises = [];

  features.forEach((feature) => {
    stylePromises.push(new Promise((resolve) => {
      const style = styleCallback(feature);
      layer.overrideStyle(feature, style);
      resolve();
    }));
  });

  return Promise.all(stylePromises);
}

// 显示样式调用
showLoader();
setLayerStyleAsync(layer, (feature) => {
  return feature.getGeometry().getType() === "Polygon" 
    ? { strokeColor: "blue", strokeWeight: 1, strokeOpacity: 0.6, fillColor: "rgba(0, 0, 255)", fillOpacity: 0.35, visible: true } 
    : { visible: true };
}).then(() => hideLoader());

// 隐藏样式调用
showLoader();
setLayerStyleAsync(layer, () => ({ visible: false })).then(() => hideLoader());

注意事项 #

• overrideStyle会为单个要素设置样式，优先级高于setStyle的全局样式。如果之后需要恢复全局样式，可以调用layer.revertStyle(feature)清除单个要素的自定义样式，或者layer.setStyle()重新设置全局样式。
• 如果图层要素数量极其庞大，遍历过程可能阻塞主线程，可以考虑分批次处理（比如每次处理50个要素，用setTimeout间隔执行），避免页面卡顿。

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