Different layer styles affecting each other openlayers

Question

I want to draw dashed line and straight line by using open layers Draw method. In this method there is a LineString option for drawing straight line but I cound not find a option for dashed line. So my aim is to style LineString and make a dashed line. But the problem is, this approach is also affecting the straight line style even though I'm keeping them in different layers.

import map from "./main.js";
const lineString = document.querySelector("#lineString");
const lineDashed = document.querySelector("#lineDashed");
let checkString = false;
let checkDashed = false;

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({
      width: 2,
      lineDash: [1, 20],
    }),
  }),
});
map.addLayer(stringLayer);
map.addLayer(dashLayer);
lineString.addEventListener("click", () => {
  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", () => {
  if (checkDashed === false) {
    lineString.checked = false;
    lineDashed.checked = true;
    checkDashed = true;
    checkString = false;
    addInteraction(dashStringSource);
  } else {
    lineString.checked = false;
    lineDashed.checked = false;
    checkDashed = false;
  }
});
let drawStringLine, drawDashLine;
function addInteraction(sourceType) {
  if (sourceType === lineStringSource) {
    drawStringLine = new ol.interaction.Draw({
      source: sourceType,
      type: "LineString",
    });
    map.addInteraction(drawStringLine);
  } else {
    drawDashLine = new ol.interaction.Draw({
      source: sourceType,
      type: "LineString",
    });
    map.addInteraction(drawDashLine);
  }
}

LineString and lineDashed are input radio. Whenever user select one of this input type I want them to be able to draw that option. But the above code problem is when I select lineDash it is also yellow just like lineString. And if I select lineDash and then select lineString again this time lineString have a dash style on it. This issue is also affecting the lines already on the map.

Answer 1

You need to remove the old interaction before creating and adding a new one

let drawStringLine, drawDashLine;
function addInteraction(sourceType) {
  if (sourceType === lineStringSource) {
    map.removeInteraction(drawDashLine);
    drawStringLine = new ol.interaction.Draw({
      source: sourceType,
      type: "LineString",
    });
    map.addInteraction(drawStringLine);
  } else {
    map.removeInteraction(drawStringLine);
    drawDashLine = new ol.interaction.Draw({
      source: sourceType,
      type: "LineString",
    });
    map.addInteraction(drawDashLine);
  }
}