OpenLayers不同图层绘制实线虚线时样式互相干扰如何解决？

问题根因 #

• 切换绘制模式、取消绘制操作时，未移除之前添加的ol.interaction.Draw 实例，导致地图同一时间存在多个生效的绘制交互，新绘制的要素会被同时写入多个矢量源，触发跨图层样式干扰
• 虚线图层的描边样式未显式指定颜色，默认继承描边配置导致虚线也显示为黄色
• 取消选中的逻辑中没有绘制交互的移除步骤，交互实例一直保留在地图上持续生效

修复代码 #

import map from "./main.js";
const lineString = document.querySelector("#lineString");
const lineDashed = document.querySelector("#lineDashed");
let checkString = false;
let checkDashed = false;
// 存储当前激活的draw实例
let activeDraw = null;

const lineStringSource = new ol.source.Vector();
let stringLayer = new ol.layer.Vector({
  source: lineStringSource,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: "#ffcc33",
      width: 2,
    }),
  }),
});
const dashStringSource = new ol.source.Vector();
let dashLayer = new ol.layer.Vector({
  source: dashStringSource,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      // 补全虚线颜色配置
      color: "#3399ff",
      width: 2,
      lineDash: [1, 20],
    }),
  }),
});
map.addLayer(stringLayer);
map.addLayer(dashLayer);

// 新增绘制交互移除公共方法
function removeActiveDraw() {
  if (activeDraw) {
    map.removeInteraction(activeDraw);
    activeDraw = null;
  }
}

lineString.addEventListener("click", () => {
  // 先清理已有交互
  removeActiveDraw();
  if (checkString === false) {
    lineString.checked = true;
    lineDashed.checked = false;
    checkDashed = false;
    checkString = true;
    addInteraction(lineStringSource);
  } else {
    lineString.checked = false;
    lineDashed.checked = false;
    checkString = false;
    checkDashed = false;
  }
});

lineDashed.addEventListener("click", () => {
  // 先清理已有交互
  removeActiveDraw();
  if (checkDashed === false) {
    lineString.checked = false;
    lineDashed.checked = true;
    checkDashed = true;
    checkString = false;
    addInteraction(dashStringSource);
  } else {
    lineString.checked = false;
    lineDashed.checked = false;
    checkDashed = false;
  }
});

function addInteraction(sourceType) {
  activeDraw = new ol.interaction.Draw({
    source: sourceType,
    type: "LineString",
  });
  map.addInteraction(activeDraw);
}

补充说明 #

如果需要自定义绘制过程中临时预览的样式和最终样式保持一致，可以在初始化ol.interaction.Draw时传入style参数，指定和对应图层一致的样式即可。

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