OpenLayers 4.6.5要素颜色设置异常问题求助

我之前也碰到过一模一样的问题！其实核心原因是：OpenLayers的Draw组件设置的style只作用于绘制过程中的临时预览，当你完成绘制后，这个样式并不会自动绑定到新创建的要素上——所以要素会 fallback 到图层的默认样式（就是你说的蓝底浅蓝样式）。

要实现“单个要素自身持有颜色”的需求，关键是在绘制完成后，把样式直接赋值给要素本身。具体做法如下：

修改后的代码示例 #

addInteraction() { 
  this.style = new Style({ 
    fill: new Fill({ color: this.fillColour }), 
    stroke: new Stroke({ color: this.lineColour, width: 2 }), 
    image: new CircleStyle({ 
      radius: 7, 
      fill: new Fill({ color: this.fillColour }), 
      stroke: new Stroke({ color: this.lineColour }) 
    }) 
  }) 
  this.draw = new Draw({ 
    source: this.vectorSource, 
    style: [this.style], 
    type: this.selectedShape, 
  }) 

  // 关键步骤：监听drawend事件，给新创建的要素绑定样式
  this.draw.on('drawend', (event) => {
    const newFeature = event.feature;
    // 将当前定义的样式赋值给要素，让要素自身持有样式
    newFeature.setStyle(this.style);
  });

  this.coreMap.map.addInteraction(this.draw) 
  this.snap = new Snap({ source: this.vectorSource }) 
  this.coreMap.map.addInteraction(this.snap); 
  this.coreMap.map.addInteraction(this.modifyLayer); 
}

原理说明 #

1. Draw的style参数仅控制绘制过程中鼠标拖拽时的预览样式，不会自动同步到最终生成的要素上。
2. 通过监听drawend事件，我们能获取到刚创建完成的要素，此时调用feature.setStyle()方法，就能把样式直接存在要素自身的属性中。
3. OpenLayers渲染时，会优先使用要素自身的style属性，其次才会使用图层的默认样式，这样同一图层的不同要素就能拥有各自独立的颜色了。

补充：为什么之前的尝试没生效？ #

• 你提到的“在newDraw对象外通过set方法设颜色”，大概率是时机不对——如果在drawend事件触发前操作，此时要素还未创建，自然无法生效。
• 而“在draw对象内用样式函数”，这个函数同样只作用于绘制过程的预览，不会修改最终要素的样式属性，所以也达不到需求。

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