Quiero dibujar una línea discontinua y una línea recta usando el método de dibujo de capas abiertas. En este método, hay una opción LineString para dibujar una línea recta, pero no encontré una opción para una línea discontinua. Así que mi objetivo es diseñar LineString y hacer una línea discontinua. Pero el problema es que este enfoque también afecta el estilo de línea recta a pesar de que los mantengo en diferentes capas.

 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 y lineDashed son radio de entrada. Siempre que el usuario seleccione uno de este tipo de entrada, quiero que pueda dibujar esa opción. Pero el problema del código anterior es cuando selecciono lineDash, también es amarillo como lineString. Y si selecciono lineDash y luego selecciono lineString nuevamente, esta vez lineString tiene un estilo de guión. Este problema también está afectando las líneas que ya están en el mapa.