地图功能

zhanghua

2023-01-11 b9698fdce1734673e847ee5f62244dfd27077027

地图功能

 src/views/systemSetting/device/grid/components/components/dialogForm.vue

@@ -39,7 +39,8 @@
          </el-form-item>

          <el-form-item class="optionItem" label="描述:" prop="description">
            <el-input type="textarea"
            <el-input
              type="textarea"
              v-model="form.description"
              placeholder="请填写描述"
              :rows="4"
@@ -48,7 +49,10 @@

          <el-form-item class="optionItem" label="责任区域:" prop="region">
            <Map
              style="width: 400px; height: 300px"
              :point="point"
              :zoom="zoom"
              @getRegion="getRegion"
              style="width: 600px; height: 400px"
              :region="form.region"
            ></Map>
          </el-form-item>
@@ -111,11 +115,18 @@
        children: "children",
        label: "departName",
      },
      point: { x: "119.27179890", y: "28.59027084" },
      zoom: 15,
    };
  },
  created() {
    // 初始化数据
    this.form = this.info;
    if (this.info.center) {
      var center = JSON.parse(this.info.center);
      this.point = { x: center[0], y: center[1] };
      this.zoom = this.info.zoom;
    }
  },

  watch: {
@@ -152,6 +163,14 @@
        }
      });
    },
    getRegion(e) {
      this.form.center = JSON.stringify([
        e.map.getCenter().lng,
        e.map.getCenter().lat,
      ]);
      this.form.zoom = e.map.getZoom();
      this.form.region = JSON.stringify(e.path);
    },
  },
  props: ["info", "closeDialog"],
};

 src/views/systemSetting/device/grid/components/components/map.vue

@@ -1,5 +1,27 @@
<template>
  <div id="container"></div>
  <div>
    <div id="container"></div>
    <div class="optionBtn">
      <el-button
        type="primary"
        class="btn submit"
        @click.native.prevent="handleRanging"
        >测距
      </el-button>
      <el-button
        type="primary"
        class="btn submit"
        @click.native.prevent="handleDraw"
        >画线
      </el-button>
      <el-button
        type="primary"
        class="btn submit"
        @click.native.prevent="handleDelete"
        >删除
      </el-button>
    </div>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
@@ -7,33 +29,56 @@
  data() {
    return {
      map: null,
      mouseTool: null,
      ruler: null,
      _point: { x: "119.27179890", y: "28.59027084" },
      _zoom: 15,
    };
  },
  created() {
  },
  created() {},
  methods: {
    locationMap() {
      const that = this;
        that.map.setZoomAndCenter(that.zoom, [that.point.x, that.point.y]);
        if (that.mark) {
          // 创建一个 Marker 实例：
          var marker = new AMap.Marker({
            position: new AMap.LngLat(that._point.x, that._point.y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: that.mark.title,
          });
      that.zoom = that.zoom || that._zoom;
      that.point = that.point || that._point;
      that.map.setZoomAndCenter(that.zoom, [that.point.x, that.point.y]);

          // 将创建的点标记添加到已有的地图实例：
          that.map.add(marker);
          marker.on('click',function(e){
            console.log('666')
            that.$emit('fatherMethod')
            // that.$parent.fatherMethod();
      if (this.region) {
        let polygon = new AMap.Polygon({
          path: eval(this.region),
          fillColor: "#ccebc5",
          strokeOpacity: 1,
          fillOpacity: 0.5,
          strokeColor: "#2b8cbe",
          strokeWeight: 1,
          strokeStyle: "dashed",
          strokeDasharray: [5, 5],
        });

          })
        }

        that.map.add(polygon);
      } else {
        that.mouseTool.polygon({
          fillColor: "#00b0ff",
          strokeColor: "#80d8ff",
          //同Polygon的Option设置
        });
      }
    },
    handleRanging() {
      this.ruler.turnOn();
      this.mouseTool.close(false);
    },
    handleDraw() {
      this.ruler.turnOff();
      this.mouseTool.close(false);
      this.mouseTool.polygon({
        fillColor: "#00b0ff",
        strokeColor: "#80d8ff",
        //同Polygon的Option设置
      });
    },
    handleDelete() {
      this.map.clearMap();
    },
  },
  mounted() {
@@ -41,28 +86,22 @@
    AMapLoader.load({
      key: "091ade377d4db40f68cc78cb9658ce8d", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      plugins: ["AMap.MouseTool", "AMap.RangingTool"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        that.map = new AMap.Map("container");
        that.map = new AMap.Map("container",{resizeEnable: true});
        that.mouseTool = new AMap.MouseTool(that.map);
        that.mouseTool.on("draw", function (e) {
          //绘制完成后将数组传入表单
          that.$emit("getRegion", e.obj.getOptions());
        });
        //默认样式
        that.ruler = new AMap.RangingTool(that.map);
        that.locationMap();
      })
      .catch((e) => {
        console.log(e);
      });
    // const that = this;
    // debugger
    // that.map.setZoomAndCenter(that._zoom, [that._point.x, that._point.y]);
    // if (that.mark) {
    //   // 创建一个 Marker 实例：
    //   var marker = new AMap.Marker({
    //     position: new AMap.LngLat(that._point.x, that._point.y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    //     title: that.mark.title,
    //   });

    //   // 将创建的点标记添加到已有的地图实例：
    //   that.map.add(marker);
    // }
  },
  watch: {
    point(newval, oldval) {
@@ -73,7 +112,7 @@
      this._zoom = newval;
    },
  },
  props: ["point", "zoom", "mark"],
  props: ["point", "zoom", "region"],
};
</script>
<style lang="scss" scoped>
@@ -81,4 +120,17 @@
  width: 100%;
  height: 100%;
}
.optionBtn {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 9;
}
.el-button {
  width: 70px;
  margin-bottom: 5px;
  margin-left: 10px;
}
</style>

 src/views/systemSetting/device/grid/components/main/index.vue

@@ -25,10 +25,14 @@
      </header>
      <!-- 数据展示 -->
      <el-table
          border
          stripe
        border
        stripe
        ref="multipleTable"
        :header-cell-style="{'background':'#F5F5F5', 'font-weight': '650', 'line-height': '45px' }"
        :header-cell-style="{
          background: '#F5F5F5',
          'font-weight': '650',
          'line-height': '45px',
        }"
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
@@ -175,22 +179,16 @@
    // 获取列表
    getList() {
      const that = this;
     const { currentPage, pageSize, context } = this;
      const { currentPage, pageSize, context } = this;
      this.getOrgGridList({
        currentPage,
        pageSize,
        name: context,
      })
        .then((res) => {
          if (res.code === 200) {
            res.data.records.forEach((item) => {
              item.status === 1 ? (item.status = true) : (item.status = false);
            });
            that.totalNum = res.data.total;
            that.tableData = res.data.records;
            this.renderFlag = true;
          }
        });
      }).then((res) => {
        that.totalNum = res.total;
        that.tableData = res.records;
        this.renderFlag = true;
      });
    },
    handleAdd() {
      this.handheldGrid = {