openlayers 刪除上一個圖形

時間 2019-12-09

標籤 openlayers 刪除上一個圖形简体版

原文原文鏈接

原由

近幾日羣裏常常有人問如何刪除一個繪製的圖形(openlayers 中) ，顧有此文css

需求

在openlayers中繪製圖形，而且分爲不一樣的樣式
刪除上一個繪製的圖形

思路

建立多個point—style
構造一個列表存放當前繪製的html
- 本文只有三個圖層，使用了一個數組包裝 :[圖層索引,freature]

刪除
根據圖層索引刪除
jiankongLayerVector.getSource().removeFeature(pop[1]);

效果

本文源碼

若是對你有幫助，請給一個star,fork 源碼jquery

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
        integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
        crossorigin="anonymous">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
          integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
          crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
          integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
          crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
          integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
          crossorigin="anonymous"></script>
  <!--openlayers -->
  <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css"-->
  <!--integrity="sha256-rQq4Fxpq3LlPQ8yP11i6Z2lAo82b6ACDgd35CKyNEBw=" crossorigin="anonymous"/>-->
  <!---->
  <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"-->
  <!--integrity="sha256-77IKwU93jwIX7zmgEBfYGHcmeO0Fx2MoWB/ooh9QkBA="-->
  <!--crossorigin="anonymous"></script>-->

  <script src="https://cdn.bootcss.com/openlayers/3.20.1/ol.js"></script>
  <link href="https://cdn.bootcss.com/openlayers/3.20.1/ol.css" rel="stylesheet">
  <!--openlayers-->

  <script
      src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
  <title>繪製圖形</title>
</head>
<body>
<div class="container">
  <br>

  <div class="btn-group btn-group-sm" id="bar" role="group" aria-label="Draw">
    <button id="point" value="pointless" type="button" class="btn btn-success">視頻監控點</button>
    <button id="szy" value="pointless" type="button" class="btn btn-info">水質檢測儀</button>
    <button id="swy" value="pointless" type="button" class="btn btn-success">水位監測儀</button>
    <button id="chexiao" value="pointless" type="button" class="btn btn-error"
            onclick="chexiaobtn()">撤銷
    </button>

  </div>
</div>
<div id="map" class="map"></div>


</body>
<script>

  var gaodeMapLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
      url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
    })
  });

  var jiankong = [
    new ol.style.Style({
      image: new ol.style.Circle({
        radius: 10,
        fill: new ol.style.Fill({
          color: '#de3f32'
        })
      })
    })
  ];

  var shuizhi = [
    new ol.style.Style({
      image: new ol.style.Circle({
        radius: 8,
        fill: new ol.style.Fill({
          color: '#003ade'
        })
      })
    })
  ];

  var shuiweiyi = [
    new ol.style.Style({
      image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
          color: '#ff5b1e'
        })
      })
    })
  ];

  var jiankongLayerVector = new ol.layer.Vector({
    source: new ol.source.Vector(),
    style: jiankong

  });

  var shuizhiLayerVector = new ol.layer.Vector({
    source: new ol.source.Vector(),
    style: shuizhi

  });

  var shuiweiLayerVector = new ol.layer.Vector({
    source: new ol.source.Vector(),
    style: shuiweiyi

  });

  var map = new ol.Map({
    layers: [
      gaodeMapLayer,
      jiankongLayerVector,
      shuizhiLayerVector,
      shuiweiLayerVector
    ],
    target: 'map',
    view: new ol.View({
      center: [120, 30],
      projection: 'EPSG:4326',
      zoom: 10
    })
  });

  map.on('pointermove', function (e) {
    if (e.dragging) {
      return;
    }
    pixel = map.getEventPixel(e.originalEvent),
        hit = map.hasFeatureAtPixel(pixel);
    map.getTargetElement().style.cursor = hit ? 'pointer' : '';
  });

  var button = $('#pan').button('toggle');
  var interaction;
  var features = undefined;

  var all_draw_feature = [];

  $('div.btn-group button').on('click', function (event) {
    var id = event.target.id;
    var features;
    var selectedFeatures = undefined;
    button.button('toggle');
    button = $('#' + id).button('toggle');
    map.removeInteraction(interaction);
    switch (id) {
      case "point":
        interaction = new ol.interaction.Draw({
          type: 'Point',
          source: jiankongLayerVector.getSource()
        });
        interaction.on("drawend", function (e) {
          var source = e.target;
          var writer = new ol.format.WKT();
          var lest = e.feature;
          all_draw_feature.push([0, lest]);
          console.log("當前圖像內容" + all_draw_feature.length)
        });
        map.addInteraction(interaction);
        break;
      case "szy":
        interaction = new ol.interaction.Draw({
          type: 'Point',
          source: shuizhiLayerVector.getSource()
        });
        interaction.on("drawend", function (e) {
          var source = e.target;
          var writer = new ol.format.WKT();
          var lest = e.feature;
          all_draw_feature.push([1, lest]);
          console.log("當前圖像內容" + all_draw_feature.length)
        });
        map.addInteraction(interaction);
        break;
      case "swy":
        interaction = new ol.interaction.Draw({
          type: 'Point',
          source: shuiweiLayerVector.getSource()
        });
        interaction.on("drawend", function (e) {
          console.log("數萬元");
          var source = e.target;
          var writer = new ol.format.WKT();
          var lest = e.feature;
          all_draw_feature.push([2, lest]);
          console.log("當前圖像內容" + all_draw_feature.length)
        });
        map.addInteraction(interaction);
        break;
      default:
        break;
    }
    var snap = new ol.interaction.Snap({
      source: shuiweiLayerVector.getSource()
    });
    map.addInteraction(snap);
  });

  function chexiaobtn() {
    var pop = all_draw_feature.pop();
    console.log("當前圖像內容 " + all_draw_feature.length);
    if (pop == undefined) {
      alert("沒了不能刪除了 ");
    } else if (pop[0] == 0) {
      jiankongLayerVector.getSource().removeFeature(pop[1]);
    } else if (pop[0] == 1) {
      shuizhiLayerVector.getSource().removeFeature(pop[1]);

    } else if (pop[0] == 2) {
      shuiweiLayerVector.getSource().removeFeature(pop[1]);

    }
  }


</script>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。