vue3-openlayers根据feature属性动态修改要素颜色及样式复用问题

• 你当前使用的<ol-style>组件会创建全局共享的单一样式实例，所有矢量要素都会复用这个实例
• 你在overrideStyleFunction中直接修改该实例的填充色，本质是修改同一个内存地址的属性值，后修改的配置会覆盖之前的设置，最终所有要素渲染时都会使用最后一次赋值的颜色，所以出现所有点颜色和第一个一致的问题

方案1（推荐）：使用自定义样式生成函数 #

直接给矢量图层绑定style-function属性，每个要素返回独立的样式实例，从根源避免样式复用冲突

模板修改： #

移除原有的<ol-style>标签块，给<ol-vector-layer>增加样式函数绑定：

<ol-vector-layer 
  title="Features" 
  :visible="vectorMenuDisplay"
  :style-function="customStyle"
>
  <ol-source-vector ref="sourceVectorNew" :projection="projection" :features="existingFeatures">
    <ol-interaction-modify v-if="!mapLock && modifyEnabled" :features="selectedFeatures" @modifyend="modifyend"></ol-interaction-modify>
    <ol-interaction-draw v-if="!mapLock && drawEnable" :type="drawType" @drawend="drawend"></ol-interaction-draw>
  </ol-source-vector>
</ol-vector-layer>

JS逻辑： #

先导入OpenLayers样式类，再编写自定义样式函数：

import { Style, Stroke, Fill, Circle as CircleStyle } from 'ol/style'

const customStyle = (feature) => {
  const difficulty = feature.get('difficulty')
  const mode = feature.get('mode')
  const pointColor = getPointColor(mode, difficulty)
  return new Style({
    stroke: new Stroke({
      color: 'red',
      width: 5
    }),
    fill: new Fill({
      color: 'rgba(255,255,255,0.1)'
    }),
    image: new CircleStyle({
      radius: 7,
      fill: new Fill({
        color: pointColor
      })
    })
  })
}

方案2：克隆样式实例修改 #

如果要保留原有模板的<ol-style>结构，修改overrideStyleFunction，每次克隆原始样式后再修改属性，避免修改全局共享的样式实例：

const overrideStyleFunction = (feature, style) => {
  const difficulty = feature.get('difficulty')
  const mode = feature.get('mode')
  const color = getPointColor(mode, difficulty)
  // 克隆样式实例生成新对象
  const clonedStyle = style.clone()
  clonedStyle.getImage().getFill().setColor(color)
  // 必须返回克隆后的新样式
  return clonedStyle
}

同时确保模板中给<ol-vector-layer>绑定了该函数：

<ol-vector-layer 
  title="Features" 
  :visible="vectorMenuDisplay"
  :override-style-function="overrideStyleFunction"
>
<!-- 其他原有代码 -->
</ol-vector-layer>

如果要素的mode/difficulty属性会动态变更，修改属性后需要调用feature.changed()或者矢量源的sourceVectorNew.value.source.changed()触发重新渲染，样式才会同步更新。

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