顺时针路径排序

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
@@ -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,14 +131,14 @@
     </el-row>
   </div>
 </template>
-<script setup name="AddFence">
+<script name="AddFence" setup>
 import tab from "@/plugins/tab";
 import {onMounted} from "vue";
 import {useRoute} from "vue-router";
 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();
@@ -382,10 +386,12 @@ onMounted(() => {
     left: 20px;
     top: 20px;
   }
+
   #map-container {
     width: 100%;
     height: calc(100vh - 84px);
   }
+
   .fence-form-card {
     height: calc(100vh - 84px);
   }