修改电子围栏

ruoyi-ui/src/views/realTimeMonitoring/electronicFence/index.vue

@@ -24,12 +24,13 @@
       <el-form-item label=" ">
         <el-button icon="Search" type="primary" @click="handleQuery">{{ t('option.search') }}</el-button>
         <el-button icon="Refresh" @click="resetQuery">{{ t('option.reset') }}</el-button>
-        <el-button icon="Refresh" @click="getLine">获取点位</el-button>
       </el-form-item>
     </el-form>
 
+    <el-button class="add" @click="createPolygon">新建围栏</el-button>
+    <el-button class="clear" @click="clearPolygon">清空</el-button>
+    <el-button class="clear" type="primary" @click="getLine">保存</el-button>
     <div id="container4"></div>
-    <el-button class="add" @click="createPolygon">新建</el-button>
   </div>
 </template>
 <script setup>
@@ -45,9 +46,12 @@ const {proxy} = getCurrentInstance();
 const queryParams = ref({})
 
 let map = null
+let polyEditor = 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]]
 const areaPath = ref([path])
-const marketPath = ref([[116.390669, 39.911147],[116.400669, 39.921147]])
+const areaPath1 = ref([path1])
+const marketPath = ref([[116.390669, 39.911147], [116.400669, 39.921147]])
 AMapLoader.load({
   key: "ba8fb8d8bae1b280b93406d5959d492f",             // 申请好的Web端开发者Key，首次调用 load 时必填
   // version: "1.4.15",      //
@@ -78,99 +82,99 @@ AMapLoader.load({
   map.addControl(new AMap.MapType());
 
 
-  setPolygon(areaPath.value)
-  setMarker(marketPath.value)
+  // setPolygon(areaPath.value)
+  // setMarker(marketPath.value)
 
 
 }).catch(e => {
   console.log(e);
 })
-const setMarker = (e)=>{
+
+let one = true
+const handleQuery = () => {
+  clearPolygon()
+  if (one) {
+    setPolygon(areaPath.value)
+  } else {
+    setPolygon(areaPath1.value)
+  }
+  setMarker(marketPath.value)
+  one = !one
+}
+
+
+const setMarker = (e) => {
   let markers = map.getAllOverlays('marker');
   map.remove(markers)
-  e.forEach(val=>{
+  let polygons = map.getAllOverlays('polygon');
+  let list = polygons.map(e => e._opts.path)
+  e.forEach(val => {
     let marker = new AMap.Marker({
       position: val,
       anchor: 'bottom-center',
       offset: new AMap.Pixel(0, 0)
     });
     marker.setTitle('我是marker的title');
-    console.log((areaPath.value))
     let isPointInRing = false
-    areaPath.value.forEach(res=>{
-      if(AMap.GeometryUtil.isPointInRing(val, res)){
-        isPointInRing=true
+    list.forEach(res => {
+      if (AMap.GeometryUtil.isPointInRing(val, res)) {
+        isPointInRing = true
       }
     })
 
     marker.setLabel({
       direction: 'top',
       offset: new AMap.Pixel(0, -10),  //设置文本标注偏移量
-      content: "" +isPointInRing,
+      content: "" + isPointInRing,
     });
     marker.setMap(map);
   })
 }
-const setPolygon = (res) => {
-  res.forEach((e, index) => {
-    let polygon = new AMap.Polygon({path: e});
-    map.add([polygon]);
-    let polyEditor = new AMap.PolygonEditor(map);
-    polyEditor.addAdsorbPolygons([polygon]);
-    polygon.on('dblclick', () => {
-      polyEditor.setTarget(polygon);
-      polyEditor.open();
-    })
-    polyEditor.on('addnode', function (data) {
-      // 获取区域坐标
-      areaPath.value[index] = polyEditor.getTarget()._opts.path
-      setMarker(marketPath.value)
-    })
-    polyEditor.on('adjust', function (data) {
-      // 获取区域坐标
-      areaPath.value[index] = polyEditor.getTarget()._opts.path
-      setMarker(marketPath.value)
-    })
-  })
-  setMarker(marketPath.value)
+const createPolygon = () => {
+  polyEditor.close();
+  polyEditor.setTarget();
+  polyEditor.open()
 }
-const removePolygon = () =>{
-
+const clearPolygon = () => {
+  if (!polyEditor) return
+  polyEditor.close();
   let polygons = map.getAllOverlays('polygon');
-  console.log('s',polygons)
-  polygons.forEach(e=>{
-    // e.close()
-  })
+  map.remove(polygons)
 }
-let createPolygon = () => {
-  let arr = []
-  map.add([new AMap.Polygon({path: arr})]);
-  let polyEditor = new AMap.PolygonEditor(map)
-  let index = areaPath.value.length
-  polyEditor.close();
-  polyEditor.setTarget();
+const setPolygon = (res) => {
+  let polygonArr = []
+  res.forEach(val => {
+    let thisPolygon = new AMap.Polygon({path: val});
+    polygonArr.push(thisPolygon)
+    thisPolygon.on('dblclick', () => {
+      polyEditor.setTarget(thisPolygon);
       polyEditor.open();
+    })
+  })
+  map.add(polygonArr)
+  polyEditor = new AMap.PolygonEditor(map);
+  polyEditor.addAdsorbPolygons(polygonArr);
   polyEditor.on('add', function (data) {
-    areaPath.value.push(data.target._opts.path)
-    // polyEditor.close();
-    // map.clearMap()
-    // removePolygon()
-    // setPolygon([data.target._opts.path])
+    let polygon = data.target;
+    polyEditor.addAdsorbPolygons(polygon);
+    polygon.on('dblclick', () => {
+      polyEditor.setTarget(polygon);
+      polyEditor.open();
+    })
   })
   polyEditor.on('addnode', function (data) {
-    // 获取区域坐标
-    areaPath.value[index] = polyEditor.getTarget()._opts.path
+    console.log('addnode', data)
     setMarker(marketPath.value)
   })
   polyEditor.on('adjust', function (data) {
-    // 获取区域坐标
-    areaPath.value[index] = polyEditor.getTarget()._opts.path
+    console.log('adjust', data)
     setMarker(marketPath.value)
   })
-
+  map.setFitView();
 }
 const getLine = () => {
-  let list = areaPath.value
+  let polygons = map.getAllOverlays('polygon');
+  let list = polygons.map(e => e._opts.path)
   let params = []
   list.forEach((e, index) => {
     e.forEach(val => {
@@ -189,12 +193,13 @@ const getLine = () => {
   padding: 0px;
   margin: 20px 0 0 0;
   width: 100%;
-  height: calc(100vh - 190px);
+  height: calc(100vh - 220px);
 }
 
 .add {
-  position: absolute;
-  bottom: 15px;
-  right: 150px;
+  margin-left: 30px;
+}
+
+.clear {
 }
 </style>