Mi idea era hacer que el usuario pudiera escribir un comentario, después de hacer clic, trato de agregar un nuevo Punto a la capa existente con interacción de dibujo e información sobre herramientas donde el usuario puede escribir el comentario, cancelar (eliminar información sobre herramientas) o dibujar el punto en otro lugar. Después de configurar dibujar en el mapa y configurar layer.getsource() para dibujar la interacción y dibujar algo, tengo un error de que la función ya existe. Noté que OL no toma otra identificación gratuita, simplemente esta identificación ya está en uso. Sucede después de algunos dibujos. ¿Alguien puede ayudar?
let commentLayer = this.map.getLayers().getArray().find((layer) => layer.get('title') === 'Comments') const writeComments = () => { if (this.mode === 'read') { this.map.getInteractions().forEach((interaction) => { if (interaction && interaction.get('name') === 'select comment') this.map.removeInteraction(interaction); }); } this.mode = 'write' if (commentLayer) { draw = new ol.interaction.Draw({ source: commentLayer.getSource(), type: "Point", }); draw.set('name', 'comments interaction') this.map.addInteraction(draw); }; draw.on('drawstart', (evt) => { // if last draw was not saved delete tooltip and features if (commentLayer) { const layerArr = commentLayer.getSource().getFeatures(); if (feature !== null) { if (document.getElementById('OutputElement')) { const elem = document.getElementById('OutputElement'); elem.parentNode.removeChild(elem); } if (document.getElementById('InputElement')) { commentLayer.getSource().removeFeature(feature); feature = null const elem = document.getElementById('InputElement'); elem.parentNode.removeChild(elem); }; }; }; }); // create tooltip on draw end draw.on('drawend', (evt) => { if (tooltip) this.map.removeOverlay(tooltip); feature = evt.feature const pointCoordinates = feature.getGeometry().getFlatCoordinates(); feature.set('type', 'comment'); tooltipElement = document.createElement('div'); tooltipElement.id = 'InputElement'; tooltipElement.className = 'ol-tooltip ol-tooltip-measure'; tooltipElement.appendChild(createTooltip(feature)); tooltip = new ol.Overlay({ element: tooltipElement, offset: [0, -15], positioning: 'bottom-center' }); tooltip.setPosition(pointCoordinates); this.map.addOverlay(tooltip); }); };