zoukankan      html  css  js  c++  java
  • 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);
            }
          });
        },
  • 相关阅读:
    【概念】using 三种使用方式
    2019-7-2 作业1 2 3
    异常
    java.lang.NullPointerException
    课外作业(建立double类型的小数,按照四舍五入保留2位小数)
    作业1.2.3.4
    左自增与右自增的区别
    深入了解JVM(Java虚拟机)
    Eclipse报错Could not resolve archetype
    ThinkPad E550 连蓝牙鼠标logitech M557
  • 原文地址:https://www.cnblogs.com/leroywang/p/14029506.html
Copyright © 2011-2022 走看看