OpenLayers矢量图层样式异常：颜色切换后无法恢复默认问题咨询

核心问题出在你直接修改了预先定义的常量样式对象，导致这个对象被永久性篡改了。

第一次调用style函数时，你修改了常量的颜色，此时这个常量本身就已经不是初始状态了。之后当你关闭颜色切换、想应用默认颜色时，调用的还是这个已经被修改过的常量对象，自然回不到最初的颜色。

OpenLayers的style函数每次执行时，如果你复用同一个样式对象的引用，一旦修改它的属性，这个修改会被保留下来——因为对象是引用类型，你改的是内存里的同一个实例，后续调用style函数时拿到的都是修改后的版本，不是最初的常量。

解决办法 #

有两种简单的修复方式：

• 克隆默认样式再修改：每次调用style函数时，先克隆默认样式的副本，再对副本修改颜色并返回。这样原常量始终保持初始状态，每次都基于干净的初始样式调整。
  示例代码：

  const defaultStyle = new Style({
    fill: new Fill({ color: '#ffffff' }),
    stroke: new Stroke({ color: '#000000', width: 1 })
  });
  
  const layer = new VectorLayer({
    source: vectorSource,
    style: (feature) => {
      const targetColor = feature.get('color') || '#ffffff';
      // 克隆默认样式，避免修改原对象
      const tempStyle = defaultStyle.clone();
      tempStyle.getFill().setColor(targetColor);
      return tempStyle;
    }
  });
  

• 每次创建新样式实例：放弃复用常量，直接在style函数里创建新的Style对象，根据要素属性设置颜色，默认颜色直接写在创建逻辑里。
  示例代码：

  const layer = new VectorLayer({
    source: vectorSource,
    style: (feature) => {
      const targetColor = feature.get('color') || '#ffffff';
      return new Style({
        fill: new Fill({ color: targetColor }),
        stroke: new Stroke({ color: '#000000', width: 1 })
      });
    }
  });
  

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