顺时针路径排序

package.json

@@ -18,6 +18,8 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@element-plus/icons-vue": "2.0.10",
     "@highlightjs/vue-plugin": "^2.1.0",
+    "@turf/center": "^6.5.0",
+    "@turf/helpers": "^6.5.0",
     "@vueuse/core": "9.5.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",

src/utils/geoUtils.js

@@ -0,0 +1,15 @@
+import {points} from "@turf/helpers";
+import center from "@turf/center";
+
+// [[-97.522259, 35.4691],
+//     [-97.502754, 35.463455],
+//     [-97.508269, 35.463245]]
+export const pointSortClockwise = (coordinates) => {
+    const centerCoor = center(points(coordinates)).geometry.coordinates;
+    return coordinates.sort((a, b) => {
+        // 转换为以 centerCoor 为原点的坐标
+        const point_a = [a[0] - centerCoor[0], a[1] - centerCoor[1]]
+        const point_b = [b[0] - centerCoor[0], b[1] - centerCoor[1]]
+        return Math.atan2(...point_b.reverse()) - Math.atan2(...point_a.reverse())
+    })
+}

src/views/basic/fence/add.vue

@@ -10,33 +10,36 @@
           <div class="search-bar">
             <el-row :gutter="10">
               <!-- <el-col :span="7"> -->
-              <el-button type="info" size="small" @click="back"
+              <el-button size="small" type="info" @click="back"
-                >返回上层</el-button
+              >返回上层
+              </el-button
               >
               <!-- </el-col> -->
               <el-col :span="10">
                 <el-input
                     v-model="searchKeyword"
+                    placeholder="请输入地名或点击地图选点"
                     size="small"
                     @keypress.enter="searchPoint"
-                  placeholder="请输入地名或点击地图选点"
                 ></el-input>
               </el-col>
               <!-- <el-col :span="7"> -->
               <el-button
-                type="primary"
-                size="small"
                   icon="search"
+                  size="small"
+                  type="primary"
                   @click="searchPoint"
-                >搜索</el-button
+              >搜索
+              </el-button
               >
               <!-- </el-col> -->
               <el-button
-                type="primary"
                   plain
                   size="small"
+                  type="primary"
                   @click="switchMapLayer"
-                >{{ isSatelliteMode ? "标准模式" : "卫星模式" }}</el-button
+              >{{ isSatelliteMode ? "标准模式" : "卫星模式" }}
+              </el-button
               >
             </el-row>
           </div>
@@ -47,13 +50,13 @@
               right: '20px',
               top: '20px',
             }"
+              circle
+              icon="refresh"
+              type="primary"
               @click="
               map.clearMap();
               form.fencePath = [];
             "
-            type="primary"
-            icon="refresh"
-            circle
           />
         </div>
       </el-col>
@@ -68,8 +71,8 @@
                 ref="fenceRef"
                 :model="form"
                 :rules="rules"
-              label-width="80px"
                 label-position="top"
+                label-width="80px"
             >
               <el-form-item label="围栏名称" prop="fenceName">
                 <el-input
@@ -78,7 +81,7 @@
                 />
               </el-form-item>
               <el-form-item label="限速(km/h)" prop="speed">
-                <el-input v-model="form.speed" placeholder="请输入限速(km/h)" />
+                <el-input v-model="form.speed" placeholder="请输入限速(km/h)"/>
               </el-form-item>
               <el-form-item label="报警类型" prop="reportType">
                 <el-radio-group v-model="form.reportType" class="ml-4">
@@ -107,10 +110,11 @@
                       :style="{
                       width: '100%',
                     }"
-                    @click="submitForm"
-                    type="primary"
                       size="small"
-                    >保存</el-button
+                      type="primary"
+                      @click="submitForm"
+                  >保存
+                  </el-button
                   >
                 </el-col>
               </el-row>
@@ -127,17 +131,17 @@
     </el-row>
   </div>
 </template>
-<script setup name="AddFence">
+<script name="AddFence" setup>
 import tab from "@/plugins/tab";
-import { onMounted } from "vue";
+import {onMounted} from "vue";
-import { useRoute } from "vue-router";
+import {useRoute} from "vue-router";
-import { loadAMap } from "@/utils/map";
+import {loadAMap} from "@/utils/map";
 import markBsPng from "@/assets/images/mark_bs.png";
 import mapPinPng from "@/assets/images/map-pin.png";
-import { addFence, updateFence, getFence } from "@/api/fence";
+import {addFence, getFence, updateFence} from "@/api/fence";
 
 const route = useRoute();
-const { proxy } = getCurrentInstance();
+const {proxy} = getCurrentInstance();
 const AMap = shallowRef(null);
 const map = shallowRef(null);
 const placeSearch = shallowRef(null);
@@ -169,7 +173,7 @@ const data = reactive({
   },
 });
 
-const { form, rules } = toRefs(data);
+const {form, rules} = toRefs(data);
 
 const addFencePath = (lnglat) => {
   if (map.value.getAllOverlays("polygon").length === 0) {
@@ -327,7 +331,7 @@ function reset() {
 
 function back() {
   reset();
-  tab.closeOpenPage({ path: "/basic/fence" });
+  tab.closeOpenPage({path: "/basic/fence"});
 }
 
 reset();
@@ -355,7 +359,7 @@ onMounted(() => {
     map.value.add(fencePolygon.value);
     map.value.addControl(new AMap.value.Scale());
     if (route.query.fenceId && route.query.uuid) {
-      const routerObj = Object.assign({}, route, { title: "修改电子围栏" });
+      const routerObj = Object.assign({}, route, {title: "修改电子围栏"});
       tab.updatePage(routerObj);
       getFence(route.query.fenceId, route.query.uuid).then((resp) => {
         form.value = {
@@ -382,10 +386,12 @@ onMounted(() => {
     left: 20px;
     top: 20px;
   }
+
   #map-container {
     width: 100%;
     height: calc(100vh - 84px);
   }
+
   .fence-form-card {
     height: calc(100vh - 84px);
   }