上传电子围栏

ruoyi-ui/src/views/business/effectiveFence/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="container">
+    <div style="padding: 12px">
+      <el-form :inline="true" :model="form" class="demo-form-inline">
+        <el-form-item label="条件1">
+          <el-input v-model="form.data1" placeholder="条件1"></el-input>
+        </el-form-item>
+        <el-form-item label="2">
+          <el-input v-model="form.data2" placeholder="2"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="a">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <div>
+
+        <el-button type="primary" @click="createPolygon">新增多边形</el-button>
+
+        <el-button type="primary" @click="createCircle">新增圆</el-button>
+        <el-button type="primary" @click="clear">清空</el-button>
+        <el-button type="primary" @click="getDate">保存</el-button>
+      </div>
+    </div>
+    <div id="map" class="map"></div>
+  </div>
+</template>
+
+<script>
+
+
+let map = null
+let polyEditor = null
+let CircleEditor = null
+let path = [[116.390969, 39.911592], [116.391496, 39.909008], [116.389264, 39.909765], [116.38802, 39.911016]]
+let path1 = [[116.391969, 39.912592], [116.392496, 39.910008], [116.390264, 39.910765], [116.38902, 39.912016]]
+export default {
+  components: {},
+  data() {
+    return {
+      form: {
+        data1: '',
+        data2: ''
+      }
+    }
+  },
+  mounted() {
+    map = new AMap.Map('map', {
+      zoom: 11,
+      center: [113.4, 23.35],
+    });
+    CircleEditor = new AMap.CircleEditor(map);
+    CircleEditor.on('add', function (data) {
+      let circle = data.target;
+      // CircleEditor.addAdsorbCircles(circle);
+      circle.on('dblclick', () => {
+        CircleEditor.setTarget(circle);
+        CircleEditor.open();
+      })
+    })
+    polyEditor = new AMap.PolygonEditor(map);
+    polyEditor.on('add', function (data) {
+      let polygon = data.target;
+      polyEditor.addAdsorbPolygons(polygon);
+      polygon.on('dblclick', () => {
+        polyEditor.setTarget(polygon);
+        polyEditor.open();
+      })
+    })
+  },
+  methods: {
+    a() {
+      this.clear();
+      [path, path1].forEach(e => {
+        this.setPolygon(e)
+      })
+    },
+    clear() {
+      if (!polyEditor) return
+      CircleEditor.close();
+      polyEditor.close();
+      let polygons = map.getAllOverlays('polygon');
+      let circles = map.getAllOverlays('circle');
+      map.remove(polygons)
+      map.remove(circles)
+    },
+    createPolygon() {
+      polyEditor.close();
+      polyEditor.setTarget();
+      polyEditor.open()
+    },
+    createCircle() {
+      CircleEditor.close();
+      CircleEditor.setTarget();
+      CircleEditor.open()
+    },
+    setPolygon(e) {
+      let thisPolygon = new AMap.Polygon({path: e});
+      thisPolygon.on('dblclick', () => {
+        polyEditor.setTarget(thisPolygon);
+        polyEditor.open();
+      })
+      map.add(thisPolygon)
+      map.setFitView()
+    },
+    getDate() {
+      let polygons = map.getAllOverlays('polygon');
+      let circles = map.getAllOverlays('circle');
+      let list = polygons.map(e => e._opts.path)
+      let list1 = circles.map(e => {
+        return {
+          center: e._opts.center,
+          radius: e._opts.radius
+        }
+      })
+      let params = []
+      let params1 = []
+      list.forEach((e, index) => {
+        e.forEach(val => {
+          params.push({
+            longitude: val[0],
+            latitude: val[1],
+            index: index
+          })
+        })
+      })
+      list1.forEach((e, index) => {
+        params1.push({
+          center: e.center,
+          radius: e.radius,
+          index: index
+        })
+      })
+      console.log(params)
+      console.log(params1)
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.container {
+  height: calc(100vh - 84px)
+}
+
+.map {
+  width: 100%;
+  height: 100%;
+}
+</style>