Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

184
Visualizações
Add new Feature Point to existing layer with draw interaction in OpenLayers

My idea was to make the user able to write a comment, after click I try to add a new Point to the existing layer with draw interaction and tooltip where user can write the comment, cancel (remove tooltip) or draw point in another place. After set draw to map and set layer.getsource() to draw interaction and drawing something, I have error that feature already exists. I noticed that OL does not take another free id, simply this id is already used. It happens after a few drawings. Can anyone help?

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);
          });
        };
about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda