Отключить отображение последнего многоугольника, созданного с помощью OpenLayers - PullRequest
Новая
       51

Отключить отображение последнего многоугольника, созданного с помощью OpenLayers

0 голосов
/ 18 июня 2020

В этом примере: https://openlayers.org/en/latest/examples/draw-and-modify-features.html

Я пытаюсь создать многоугольник, но хочу, чтобы он исчез, когда многоугольник будет готов.

Может кто-нибудь мне помочь ?

Спасибо :)

Ответы [ 2 ]

1 голос
/ 20 июня 2020

Просто удалите источник при создании взаимодействия: 

draw = new Draw({
    type: 'Polygon'
  });

Если не задан целевой источник для нарисованных объектов, многоугольник просто исчезнет после завершения (в противном случае он добавляется к источнику). Прослушайте событие drawend, чтобы получить многоугольник.

0 голосов
/ 19 июня 2020

Если я вас правильно понял, вы хотите удалить взаимодействие рисования после завершения рисования геометрии пользователя. Подобно упоминанию @Anatoly в комментариях, вы можете использовать событие drawend для удаления взаимодействий.

Взгляните на пример, который я для вас сделал, 

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
    <title>End Draw Interaction After Draw</title>
  </head>
  <body>
    <div>
      <button id="startDraw">Start Draw</button>
      <button id="endDraw">End Draw</button>
    </div>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      // vector layer
      var source = new ol.source.Vector();
      var vector = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.2)'
          }),
          stroke: new ol.style.Stroke({
            color: '#ffcc33',
            width: 2
          })
        })
      });
      // map
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          vector
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });
      // buttons
      var startDrawBtn = document.getElementById('startDraw');
      var endDrawBtn = document.getElementById('endDraw');
      endDrawBtn.disabled = true;

      // interaction
      var draw = new ol.interaction.Draw({
        source: source,
        type: 'Polygon'
      });
      var snap = new ol.interaction.Snap({source: source});

      function endInteractions() {
        map.removeInteraction(draw);
        map.removeInteraction(snap);
        startDrawBtn.disabled = false;
        endDrawBtn.disabled = true;
      }

      function startInteractions() {
        startDrawBtn.disabled = true;
        endDrawBtn.disabled = false;
        map.addInteraction(draw);
        map.addInteraction(snap);
        draw.on('drawend', evt => {
          // console.log(evt.feature);
          endInteractions();
        });
      }

      startDrawBtn.addEventListener('click', startInteractions);
      endDrawBtn.addEventListener('click', endInteractions);
      
    </script>
  </body>
</html>
...