openlayer 地图实现圈选框选清楚 选择地图区域

             <el-button
                        size="mini"
                        type="primary"
                        @click="graph('rectangle')"
                        >框选</el-button
                      >
                      <el-button
                        size="mini"
                        type="primary"
                        @click="graph('Circle')"
                        >圈选</el-button
                      >
                      <el-button
                        size="mini"
                        type="warning"
                        @click="graph('clear')"
                        >清除</el-button
                      >
  graph(e) {
      this.$refs.HomeMap.addCircle(e);
    },
  addCircle(e) {
      var that = this;
      let source = new sourceVector({ wrapX: false });
      if (that.clickLayerEvt) {
        unByKey(that.clickLayerEvt);
        that.clickLayerEvt = "";
      }
      that.map.removeLayer(that.vectorCircle);
      that.map.removeInteraction(that.drawCircle);
      if (e == "rectangle") {
        that.drawCircle = new Draw({
          source: source,
          type: "Circle",
          freehand: false,
          geometryFunction: new createBox(),
        });
        that.map.addInteraction(that.drawCircle);
      } else if (e == "Circle") {
        that.drawCircle = new Draw({
          source: source,
          type: "Circle",
        });
        that.map.addInteraction(that.drawCircle);
      } else {
        that.map.removeInteraction(that.drawCircle);
        that.map.removeLayer(that.vectorCircle);
        that.map.removeLayer(that.Layer);
        return;
      }
      that.drawCircle.on("drawstart", function () {
        that.map.removeLayer(that.vectorCircle);
        that.vectorCircle = new LayerVector({
          source: source,
          zIndex: 10000,
        });
        that.map.addLayer(that.vectorCircle);
      });
      that.drawCircle.on("drawend", function (data) {
        if (e == "Circle") {
          that.map.removeInteraction(that.drawCircle);
        }
      });
    },

 

posted @ 2020-11-24 12:00  leroywong  阅读(558)  评论(0)    收藏  举报