修改坐标切换

ruoyi-ui/package.json

@@ -20,6 +20,7 @@
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "@vueuse/core": "9.5.0",
     "axios": "0.27.2",
+    "coordtransform": "^2.1.2",
     "echarts": "^5.4.0",
     "element-plus": "2.2.21",
     "file-saver": "2.0.5",

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

@@ -34,6 +34,7 @@
   </div>
 </template>
 <script setup>
+import coordtransform from 'coordtransform'
 import AMapLoader from '@amap/amap-jsapi-loader';
 import {useI18n} from 'vue-i18n';
 import Cookies from "js-cookie";
@@ -41,6 +42,7 @@ import {listBaseCar} from "@/api/realTimeMonitoring/electronicFence";
 import {getInfoById} from "@/api/realTimeMonitoring/alarmSendingSettings";
 import {parseTime} from "@/utils/ruoyi";
 
+
 const {t} = useI18n();
 
 const locale = (Cookies.get('language') || 'zhCn') === 'zhCn'
@@ -73,9 +75,10 @@ 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])
+let areaPath = [path]
-const areaPath1 = ref([path1])
+let areaPath1 = [path1]
-const marketPath = ref([[116.390669, 39.911147], [116.400669, 39.921147]])
+let marketPath = [[116.390669, 39.911147], [116.400669, 39.921147]]
+let polygonArr = []
 AMapLoader.load({
   key: "ba8fb8d8bae1b280b93406d5959d492f",             // 申请好的Web端开发者Key，首次调用 load 时必填
   // version: "1.4.15",      //
@@ -105,23 +108,36 @@ AMapLoader.load({
   // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
   map.addControl(new AMap.MapType());
 
-  // setPolygon(areaPath.value)
+  // setPolygon(areaPath)
-  // setMarker(marketPath.value)
+  // setMarker(marketPath)
   setPolygon([])
 
 }).catch(e => {
   console.log(e);
 })
-
+const FormattedCoordinates = (e) => {
+  console.log(e)
+  polygonArr = []
+  e.forEach(val => {
+    AMap.convertFrom(val, 'gps', function (status, result) {
+      if (result.info === 'ok') {
+        let data1 = result.locations.map(e => [e.lng, e.lat])
+        setPolygon(data1)
+      }
+    })
+  })
+}
 let one = true
 const handleQuery = () => {
   clearPolygon()
   if (one) {
-    setPolygon(areaPath.value)
+    FormattedCoordinates([...areaPath, ...areaPath1])
+    // setPolygon(areaPath)
   } else {
-    setPolygon(areaPath1.value)
+    FormattedCoordinates(areaPath1)
+    // setPolygon(areaPath1)
   }
-  setMarker(marketPath.value)
+  setMarker(marketPath)
   one = !one
 }
 
@@ -154,6 +170,7 @@ const setMarker = (e) => {
   })
 }
 const createPolygon = () => {
+  if (carIds.value.length === 0) return
   polyEditor.close();
   polyEditor.setTarget();
   polyEditor.open()
@@ -165,15 +182,15 @@ const clearPolygon = () => {
   map.remove(polygons)
 }
 const setPolygon = (res) => {
-  let polygonArr = []
+  // polygonArr=[]
-  res.forEach(val => {
+  // res.forEach(val => {
-    let thisPolygon = new AMap.Polygon({path: val});
+  let thisPolygon = new AMap.Polygon({path: res});
   polygonArr.push(thisPolygon)
   thisPolygon.on('dblclick', () => {
     polyEditor.setTarget(thisPolygon);
     polyEditor.open();
   })
-  })
+  // })
   map.add(polygonArr)
   polyEditor = new AMap.PolygonEditor(map);
   polyEditor.addAdsorbPolygons(polygonArr);
@@ -186,12 +203,10 @@ const setPolygon = (res) => {
     })
   })
   polyEditor.on('addnode', function (data) {
-    console.log('addnode', data)
+    setMarker(marketPath)
-    setMarker(marketPath.value)
   })
   polyEditor.on('adjust', function (data) {
-    console.log('adjust', data)
+    setMarker(marketPath)
-    setMarker(marketPath.value)
   })
   map.setFitView();
 }
@@ -208,6 +223,15 @@ const getLine = () => {
       })
     })
   })
+  console.log(params)
+  params = params.map(val => {
+    let path = coordtransform.gcj02towgs84(val.longitude, val.latitude)
+    return {
+      longitude: path[0],
+      latitude: path[1],
+      index: val.index
+    }
+  })
   console.log({
     carIds: carIds.value,
     polygons: params