标绘重新调整

project/sass/apps/grid/AppGridBlock/components/mapPlotting.vue

@@ -0,0 +1,173 @@
+<template>
+  <section class="mapPlotting">
+    <div class="tipinput">
+      <el-input
+          v-model="searchAddress"
+          @change="addressChange"
+          clearable
+          placeholder="请输入关键字"
+          id="tipinput"
+          size="medium"/>
+    </div>
+    <div id="panel"/>
+    <div class="container fill" id="container"/>
+    <div class="operationBtns">
+      <el-alert type="success" title="操作说明:" :closable="false">
+        <li>1.双击覆盖物即可编辑</li>
+        <li>2.编辑状态,对点双击可删除该点</li>
+        <li>3.绘制状态,右键结束绘制</li>
+        <li>4.结束编辑才能保存绘制的覆盖物信息</li>
+      </el-alert>
+      <el-button-group>
+        <el-button type="primary" @click="handleAdd">新建</el-button>
+        <el-button @click="polyEditor.close()">结束编辑</el-button>
+        <el-button @click="clear()">清除绘制</el-button>
+      </el-button-group>
+    </div>
+  </section>
+</template>
+
+<script>
+import AMapLoader from "@amap/amap-jsapi-loader";
+
+export default {
+  name: "mapPlotting",
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    value: Array
+  },
+  data() {
+    return {
+      map: null,
+      polyEditor: null,
+      placeSearch: null,
+      searchAddress: "",
+      overlays: [],
+      points: []
+    }
+  },
+  watch: {
+    points: {
+      deep: true, handler(v) {
+        this.$emit('change', v.flat())
+      }
+    }
+  },
+  methods: {
+    addressChange(val) {
+      this.placeSearch.search(val);
+    },
+    clear() {
+      this.map.remove(this.overlays);
+      this.overlays = [];
+      this.points = []
+    },
+    handleAdd() {
+      let {polyEditor} = this
+      polyEditor.close();
+      polyEditor.setTarget();
+      polyEditor.open();
+    }
+  },
+  mounted() {
+    setTimeout(() => AMapLoader.load({
+      key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
+      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+      plugins: ["AMap.PlaceSearch", "AMap.PolygonEditor"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+      AMapUI: {
+        // 是否加载 AMapUI，缺省不加载
+        version: "1.1", // AMapUI 缺省 1.1
+        plugins: [], // 需要加载的 AMapUI ui插件
+      },
+    }).then((AMap) => {
+      this.map = new AMap.Map("container", {
+        resizeEnable: true,
+      });
+      this.placeSearch = new AMap.PlaceSearch({
+        pageSize: 5, // 单页显示结果条数
+        pageIndex: 1, // 页码
+        city: "", // 兴趣点城市
+        citylimit: false, //是否强制限制在设置的城市内搜索
+        map: this.map, // 展现结果的地图实例
+        panel: "panel", // 结果列表将在此容器中进行展示。
+        autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
+      });
+      this.polyEditor = new AMap.PolygonEditor(this.map).on('add', ({target}) => {
+        this.polyEditor.addAdsorbPolygons(target)
+        target.on("dblclick", () => {
+          this.polyEditor.setTarget(target);
+          this.polyEditor.open()
+        })
+      })
+      this.polyEditor.on('end', ({target}) => {
+        this.overlays.push(target);
+        this.points.push(target.getPath().map((e) => ({lat: e.getLat(), lng: e.getLng()})))
+      });
+      if (this.value?.length > 0) {
+        let path = this.value.map(e => [e.lng, e.lat]);
+        let polygon = new AMap.Polygon({
+          path,
+          strokeColor: "#FF33FF",
+          strokeWeight: 6,
+          strokeOpacity: 0.2,
+          fillOpacity: 0.4,
+          fillColor: "#1791fc",
+        })
+        this.map.add([polygon]);
+        this.map.setFitView();
+        this.polyEditor.addAdsorbPolygons(polygon)
+        polygon.on('dblclick', () => {
+          this.polyEditor.setTarget(polygon);
+          this.polyEditor.open()
+        });
+        this.polyEditor.setTarget(polygon);
+        this.polyEditor.open()
+      }
+    }), 500)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mapPlotting {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .container {
+    width: inherit;
+  }
+
+  #panel {
+    position: absolute;
+    height: 400px;
+    right: 30px;
+    top: 20px;
+    width: 280px;
+    overflow: hidden;
+    z-index: 10000;
+  }
+
+  .tipinput {
+    position: absolute;
+    width: 300px;
+    height: 38px;
+    left: 20px;
+    top: 20px;
+    z-index: 10000;
+  }
+
+  .operationBtns {
+    position: absolute;
+    left: 20px;
+    bottom: 20px;
+    z-index: 10000;
+  }
+}
+</style>