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.
Advertisement
Answer
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); } }