高德地图效果优化

Web/env/.env.test

@@ -2,7 +2,7 @@
 VITE_ENV = 'test'
 
 # Api 地址
-VITE_API_URL = 'http://192.168.3.42:6789'
+VITE_API_URL = 'http://192.168.3.89:6789'
 
 # WebSocket 地址
-VITE_WEBSOCKET_URL = 'ws://192.168.3.42:6789/api/v1/ws'
+VITE_WEBSOCKET_URL = 'ws://192.168.3.89:6789/api/v1/ws'

Web/src/api/custom/index.ts

@@ -4,6 +4,13 @@ import { ELocalStorageKey } from "/@/types";
 const workspaceId: string = localStorage.getItem(ELocalStorageKey.WorkspaceId) || '';
 
 // Api参数类型
+export type SignLoginApiParams = {
+    userCode: string,
+    key: string,
+    sign: string,
+    workSpaceId: string,
+};
+
 export type FetchFeedbackRecordListApiParams = {
     page: number,
     page_size: number,
@@ -60,6 +67,7 @@ export type FetchTrajectoryListApiParams = Partial<{
 }>;
 
 // Api函数类型
+export type SignLoginApi = (data: SignLoginApiParams) => Promise<any>;
 export type FetchPayloadListApi = () => Promise<any>;
 export type FetchFeedbackRecordListApi = (data: FetchFeedbackRecordListApiParams) => Promise<any>;
 export type FetchChangeRecordListApi = (params: FetchFeedbackRecordListApiParams) => Promise<any>;
@@ -76,6 +84,12 @@ export type BatchDeletePictureApi = (params: BatchDeletePictureApiParams) => Pro
 export type FetchTrajectoryListApi = (params: FetchTrajectoryListApiParams) => Promise<any>;
 export type FetchTrajectoryMapApi = (taskId: string) => Promise<any>;
 
+// 密钥登录
+const signLoginApi: SignLoginApi = async (data) => {
+    const res = await request.post('/manage/api/v1/signLogin', data);
+    return res.data;
+}
+
 // 获取负载列表
 const fetchPayloadListApi: FetchPayloadListApi = async () => {
     const res = await request.get(`/manage/api/v1/devices/${workspaceId}/payloads`);
@@ -178,6 +192,7 @@ const fetchTrajectoryMapApi: FetchTrajectoryMapApi = async (taskId) => {
 };
 
 export const apis = {
+    signLogin: signLoginApi,
     fetchPayloadList: fetchPayloadListApi,
     fetchFeedbackRecordList: fetchFeedbackRecordListApi,
     fetchChangeRecordList: fetchChangeRecordListApi,

Web/src/api/http/request.ts

@@ -10,24 +10,11 @@ const REQUEST_ID = 'X-Request-Id'
 export const getHeaders = () => {
   const headers: {
     'x-auth-token'?: string,
-    'sign': string,
-    'key': string,
-    'userCode': string,
-  } = {
-    'sign': '',
-    'key': '',
-    'userCode': '',
-  };
+  } = {};
   const token = localStorage.getItem(ELocalStorageKey.Token)
   if (token) {
     headers['x-auth-token'] = token;
   }
-  const sign = localStorage.getItem('sign') || '';
-  const key = localStorage.getItem('key') || '';
-  const userCode = localStorage.getItem('userCode') || '';
-  headers['sign'] = sign;
-  headers['key'] = key;
-  headers['userCode'] = userCode;
   return headers;
 };
 

Web/src/components/GMap.vue

@@ -62,12 +62,11 @@
               </a-tooltip>
             </a-col>
             <a-col span="20">
-              <span
-                :style="deviceInfo.device.mode_code === EModeCode.Disconnected ? 'color: red; font-weight: 700;' : 'color: rgb(25,190,107)'">
-                {{ EModeCode[deviceInfo.device.mode_code] }}
+              <span>
+                飞行状态：
               </span>
               <span>
-                飞行状态
+                {{ getTextByModeCode(deviceInfo.device.mode_code) }}
               </span>
               <div class="openLiveButton" @click="state.deviceLiveStatus = true" v-if="!state.deviceLiveStatus">
                 开启直播
@@ -564,6 +563,7 @@ import FlightAreaActionIcon from './flight-area/FlightAreaActionIcon.vue'
 import { EFlightAreaType } from '../types/flight-area'
 import { useFlightArea } from './flight-area/use-flight-area'
 import { useFlightAreaDroneLocationEvent } from './flight-area/use-flight-area-drone-location-event'
+import { getTextByModeCode } from '/@/utils/index'
 
 export default defineComponent({
   components: {
@@ -858,6 +858,8 @@ export default defineComponent({
       (req.resource.content.geometry.coordinates as GeojsonCoordinate).push((coordinates as GeojsonCoordinate)[2])
       await postElementsReq(shareId.value, req)
       obj.setExtData({ id: req.id, name: req.name })
+      const title = coordinates.slice(0, 2);
+      obj.setTitle(title)
       store.state.coverMap[req.id] = [obj]
       const map = root.$map
       const AMap = root.$aMap
@@ -866,14 +868,12 @@ export default defineComponent({
         offset: new AMap.Pixel(30, 0),
         text: req.name,
         style: {
-          fontSize: 12,
-          padding: 0,
           backgroundColor: 'transparent',
           borderColor: 'transparent',
         }
       })
       map.add(text);
-      store.state.coverMap[req.id + '_text'] = [text]
+      store.state.coverMap[req.id + '_other'] = [text]
       obj.on('click', function () {
         store.commit('SET_MAP_CLICK_ELEMENT', {
           id: req.id,
@@ -903,14 +903,36 @@ export default defineComponent({
         offset: new AMap.Pixel(-30, -30),
         text: req.name,
         style: {
-          fontSize: 12,
-          padding: 0,
           backgroundColor: 'transparent',
           borderColor: 'transparent',
         }
       })
-      map.add(text);
-      store.state.coverMap[req.id + '_text'] = [text]
+      const distances = [];
+      const paths = [...coordinatesList]
+      // 计算并显示每段线的距离
+      for (let i = 0; i < paths.length - 1; i++) {
+        const distance = AMap.GeometryUtil.distance(new AMap.LngLat(paths[i][0], paths[i][1]), new AMap.LngLat(paths[i + 1][0], paths[i + 1][1]));
+        // 计算两个点之间的中点坐标
+        const midLng = (paths[i][0] + paths[i + 1][0]) / 2;
+        const midLat = (paths[i][1] + paths[i + 1][1]) / 2;
+        const midPoint = new AMap.LngLat(midLng, midLat);
+        // 在中点位置放置文本以显示距离
+        const distanceText = new AMap.Text({
+          position: midPoint,
+          offset: new AMap.Pixel(-16, 10),
+          text: `${distance.toFixed(1)} m`,// 距离
+          style: {
+            fontSize: '10px',
+            color: '#FFFFFF',
+            backgroundColor: 'rgba(0, 0, 0, 0.75)',
+            borderColor: 'transparent',
+          },
+        });
+        distances.push(distanceText);
+      }
+      const other = [text, ...distances]
+      map.add([text, ...distances]);
+      store.state.coverMap[req.id + '_other'] = other;
       obj.on('click', function () {
         store.commit('SET_MAP_CLICK_ELEMENT', {
           id: req.id,
@@ -940,14 +962,37 @@ export default defineComponent({
         offset: new AMap.Pixel(0, -30),
         text: req.name,
         style: {
-          fontSize: 12,
-          padding: 0,
           backgroundColor: 'transparent',
           borderColor: 'transparent',
         }
       })
-      map.add(text);
-      store.state.coverMap[req.id + '_text'] = [text]
+      const distances = [];
+      // 确保首尾相连
+      const paths = [...coordinatesList, coordinatesList[0]]
+      // 计算并显示每段线的距离
+      for (let i = 0; i < paths.length - 1; i++) {
+        const distance = AMap.GeometryUtil.distance(new AMap.LngLat(paths[i][0], paths[i][1]), new AMap.LngLat(paths[i + 1][0], paths[i + 1][1]));
+        // 计算两个点之间的中点坐标
+        const midLng = (paths[i][0] + paths[i + 1][0]) / 2;
+        const midLat = (paths[i][1] + paths[i + 1][1]) / 2;
+        const midPoint = new AMap.LngLat(midLng, midLat);
+        // 在中点位置放置文本以显示距离
+        const distanceText = new AMap.Text({
+          position: midPoint,
+          offset: new AMap.Pixel(-16, 10),
+          text: `${distance.toFixed(1)} m`,// 距离
+          style: {
+            fontSize: '10px',
+            color: '#FFFFFF',
+            backgroundColor: 'rgba(0, 0, 0, 0.75)',
+            borderColor: 'transparent',
+          },
+        });
+        distances.push(distanceText);
+      }
+      const other = [text, ...distances]
+      map.add([text, ...distances]);
+      store.state.coverMap[req.id + '_other'] = other;
       obj.on('click', function () {
         store.commit('SET_MAP_CLICK_ELEMENT', {
           id: req.id,
@@ -1066,6 +1111,7 @@ export default defineComponent({
         }
       }
     }
+
     return {
       draw,
       mouseMode,
@@ -1094,6 +1140,7 @@ export default defineComponent({
       closeLivestreamAgora,
       qualityStyle,
       selectFlightAreaAction,
+      getTextByModeCode,
     }
   }
 })

Web/src/constants/index.ts

@@ -17,6 +17,6 @@ export const AMapConfig = {
     'AMap.RangingTool',
     'AMap.Weather',
     'AMap.MouseTool',
-    'AMap.MoveAnimation'
+    'AMap.MoveAnimation',
   ]
 }

Web/src/hooks/use-g-map-cover.ts

@@ -47,7 +47,7 @@ export function useGMapCover() {
   function init2DPin(name: string, coordinates: GeojsonCoordinate, color?: string, data?: {}) {
     const marker = new AMap.Marker({
       position: new AMap.LngLat(coordinates[0], coordinates[1]),
-      title: name,
+      title: coordinates,
       icon: getPinIcon(color),
       extData: data
     })
@@ -56,14 +56,12 @@ export function useGMapCover() {
       offset: new AMap.Pixel(-30, -30),
       text: name,
       style: {
-        fontSize: 12,
-        padding: 0,
         backgroundColor: 'transparent',
         borderColor: 'transparent',
       },
       extData: {
         ...data,
-        id: data.id + '_text',
+        id: data.id + '_other',
       },
     })
     AddCoverToMap(text)
@@ -97,17 +95,41 @@ export function useGMapCover() {
       offset: new AMap.Pixel(-30, -30),
       text: name,
       style: {
-        fontSize: 12,
-        padding: 0,
         backgroundColor: 'transparent',
         borderColor: 'transparent',
       },
       extData: {
         ...data,
-        id: data.id + '_text',
+        id: data.id + '_other',
       },
     })
-    AddCoverToMap(text)
+    const distances = [];
+    // 确保首尾相连
+    const paths = [...coordinates, coordinates[0]]
+    // 计算并显示每段线的距离
+    for (let i = 0; i < paths.length - 1; i++) {
+      const distance = AMap.GeometryUtil.distance(new AMap.LngLat(paths[i][0], paths[i][1]), new AMap.LngLat(paths[i + 1][0], paths[i + 1][1]));
+      // 计算两个点之间的中点坐标
+      const midLng = (paths[i][0] + paths[i + 1][0]) / 2;
+      const midLat = (paths[i][1] + paths[i + 1][1]) / 2;
+      const midPoint = new AMap.LngLat(midLng, midLat);
+      // 在中点位置放置文本以显示距离
+      const distanceText = new AMap.Text({
+        position: midPoint,
+        offset: new AMap.Pixel(-16, 10),
+        text: `${distance.toFixed(1)} m`,// 距离
+        style: {
+          fontSize: '10px',
+          color: '#FFFFFF',
+          backgroundColor: 'rgba(0, 0, 0, 0.75)',
+          borderColor: 'transparent',
+        },
+      });
+      distances.push(distanceText);
+    }
+    const other = [text, ...distances]
+    root.$map.add(other)
+    coverMap[data.id + '_other'] = [other]
     polyline.on('click', function () {
       const options = polyline.getOptions()
       const id = options.extData.id;
@@ -139,17 +161,41 @@ export function useGMapCover() {
       offset: new AMap.Pixel(-30, -30),
       text: name,
       style: {
-        fontSize: 12,
-        padding: 0,
         backgroundColor: 'transparent',
         borderColor: 'transparent',
       },
       extData: {
         ...data,
-        id: data.id + '_text',
+        id: data.id + '_other',
       },
     })
-    AddCoverToMap(text)
+    const distances = [];
+    // 确保首尾相连
+    const paths = [...coordinates[0], coordinates[0][0]]
+    // 计算并显示每段线的距离
+    for (let i = 0; i < paths.length - 1; i++) {
+      const distance = AMap.GeometryUtil.distance(new AMap.LngLat(paths[i][0], paths[i][1]), new AMap.LngLat(paths[i + 1][0], paths[i + 1][1]));
+      // 计算两个点之间的中点坐标
+      const midLng = (paths[i][0] + paths[i + 1][0]) / 2;
+      const midLat = (paths[i][1] + paths[i + 1][1]) / 2;
+      const midPoint = new AMap.LngLat(midLng, midLat);
+      // 在中点位置放置文本以显示距离
+      const distanceText = new AMap.Text({
+        position: midPoint,
+        offset: new AMap.Pixel(-16, 10),
+        text: `${distance.toFixed(1)} m`,// 距离
+        style: {
+          fontSize: '10px',
+          color: '#FFFFFF',
+          backgroundColor: 'rgba(0, 0, 0, 0.75)',
+          borderColor: 'transparent',
+        },
+      });
+      distances.push(distanceText);
+    }
+    const other = [text, ...distances]
+    root.$map.add(other)
+    coverMap[data.id + '_other'] = [other]
     polygon.on('click', function () {
       const options = polygon.getOptions()
       const id = options.extData.id;
@@ -161,6 +207,17 @@ export function useGMapCover() {
     AddOverlayGroup(polygon)
   }
 
+  function getPolygonArea(coordinates: GeojsonCoordinate[][]) {
+    const path = [] as GeojsonCoordinate[]
+    coordinates[0].forEach(coordinate => {
+      path.push(new AMap.LngLat(coordinate[0], coordinate[1]))
+    })
+    const polygon = new AMap.Polygon({
+      path: path,
+    })
+    return polygon.getArea();
+  }
+
   function AddOverlayGroup(overlayGroup: any) {
     root.$map.add(overlayGroup)
     const id = overlayGroup.getExtData().id
@@ -336,6 +393,7 @@ export function useGMapCover() {
     init2DPin,
     initPolyline,
     initPolygon,
+    getPolygonArea,
     removeCoverFromMap,
     getElementFromMap,
     updatePhotoElement,

Web/src/hooks/use-g-map-trajectory.ts

@@ -29,22 +29,54 @@ export function useGMapTrajectory() {
       strokeWeight: 6,//线宽
       strokeStyle: 'solid',
     })
-    // 渲染序号
     const serialList = list.filter(item => [2, 3].includes(item.type));
+    // 序号
     const text = serialList.map((item, index) => {
       return new AMap.Text({
         position: new AMap.LngLat(item.paths[0], item.paths[1]),
-        // offset: new AMap.Pixel(-30, -30),
+        offset: new AMap.Pixel(-8, -30),
         text: index + 1,
         style: {
-          fontSize: 12,
-          padding: 0,
           backgroundColor: 'transparent',
           borderColor: 'transparent',
         }
       })
     })
-    root.$map.add([startMarker, polyline, ...text]);
+    // 序号下方圆形标记
+    const circles = serialList.map((item, index) => {
+      return new AMap.Circle({
+        center: new AMap.LngLat(item.paths[0], item.paths[1]),
+        radius: 0.5, // 半径
+        // strokeColor: 'white',
+        fillColor: 'white',
+        fillOpacity: 1,
+        strokeWeight: 2,
+      });
+    })
+    // 计算并显示每段线的距离
+    const distances = [];
+    const serialPaths = serialList.map(item => item.paths)
+    for (let i = 0; i < serialPaths.length - 1; i++) {
+      const distance = AMap.GeometryUtil.distance(new AMap.LngLat(serialPaths[i][0], serialPaths[i][1]), new AMap.LngLat(serialPaths[i + 1][0], serialPaths[i + 1][1]));
+      // 计算两个点之间的中点坐标
+      const midLng = (serialPaths[i][0] + serialPaths[i + 1][0]) / 2;
+      const midLat = (serialPaths[i][1] + serialPaths[i + 1][1]) / 2;
+      const midPoint = new AMap.LngLat(midLng, midLat);
+      // 在中点位置放置文本以显示距离
+      const distanceText = new AMap.Text({
+        position: midPoint,
+        offset: new AMap.Pixel(-16, 10),
+        text: `${distance.toFixed(1)} m`,// 距离
+        style: {
+          fontSize: '10px',
+          color: '#FFFFFF',
+          backgroundColor: 'rgba(0, 0, 0, 0.75)',
+          borderColor: 'transparent',
+        },
+      });
+      distances.push(distanceText);
+    }
+    root.$map.add([startMarker, polyline, ...text, ...circles, ...distances]);
     // 自动缩放地图到合适的视野级别
     root.$map.setFitView([startMarker, polyline]);
   }

Web/src/pages/page-web/projects/layer/index.vue

@@ -8,23 +8,27 @@
       getContainer="#g-container" :wrap-style="{ position: 'absolute' }" wrapClassName="drawer-element-wrapper"
       @close="closeDrawer" width="300">
       <div class="drawer-element-content">
-        <div class="name element-item">
+        <div class="element-item">
           <span class="mr30">名称:</span>
           <a-input v-model:value="layerState.layerName" style="width:110px" placeholder="element name"
             @change="changeLayer" />
         </div>
-        <div class="longitude element-item" v-if="layerState.currentType === geoType.Point">
+        <div class="element-item" v-if="layerState.currentType === geoType.Point">
           <span class="mr30">经度:</span>
           {{ layerState.longitude || '--' }}
         </div>
-        <div class="latitude element-item" v-if="layerState.currentType === geoType.Point">
+        <div class="element-item" v-if="layerState.currentType === geoType.Point">
           <span class="mr30">纬度:</span>
           {{ layerState.latitude || '--' }}
         </div>
-        <div class="latitude element-item" v-if="layerState.element_from === 2">
+        <div class="element-item" v-if="layerState.element_from === 2">
           <span class="mr30">高度:</span>
           {{ layerState.height || '--' }}
         </div>
+        <div class="element-item" v-if="layerState.currentType === geoType.Polygon">
+          <span class="mr30">面积:</span>
+          {{ layerState.area || '--' }}
+        </div>
         <div class="color-content">
           <span class="mr30">颜色: </span>
           <div v-for="item in colors" :key="item.id" class="color-item" :style="'background:' + item.color"
@@ -153,6 +157,7 @@ const layerState = reactive({
   longitude: 0,
   latitude: 0,
   height: 0,
+  area: '',// 面积
   currentType: '',// “LineString”,"Polygon","Point"
   color: '#212121',
   user_name: '',
@@ -265,17 +270,26 @@ function getCurrentLayer(id: string) {
   findCan(Layers)
   return layer
 }
+
 function setBaseInfo() {
   const layer = selectedLayer.value
   if (layer) {
-    const geoType = layer.resource?.content.geometry.type;
-    layerState.currentType = geoType;
-    layerState.layerName = layer.name;
+    const content = layer.resource?.content;
+    const coordinates = content.geometry.coordinates;
+    const type = content.geometry.type;
     layerState.layerId = layer.id;
-    layerState.color = layer.resource?.content.properties.color;
+    layerState.layerName = layer.name;
+    layerState.longitude = coordinates[0];
+    layerState.latitude = coordinates[1];
+    layerState.height = layer.height;
+    layerState.currentType = type;
+    layerState.color = content.properties.color;
     layerState.user_name = layer.resource?.user_name;
     layerState.element_from = layer.element_from;
-    layerState.height = layer.height
+    if (type === 'Polygon') {
+      const area = useGMapCoverHook.getPolygonArea(coordinates);
+      layerState.area = area + 'm²';
+    }
   }
 }
 
@@ -316,7 +330,7 @@ async function deleteElement() {
     // 移除标点
     useGMapCoverHook.removeCoverFromMap(elementid)
     // 移除文本覆盖物
-    useGMapCoverHook.removeCoverFromMap(elementid + '_text')
+    useGMapCoverHook.removeCoverFromMap(elementid + '_other')
     getElementGroups()
   })
 }
@@ -373,7 +387,7 @@ async function updateElements() {
   // 移除标点
   useGMapCoverHook.removeCoverFromMap(currentLayer.id)
   // 移除文本覆盖物
-  useGMapCoverHook.removeCoverFromMap(currentLayer.id + '_text')
+  useGMapCoverHook.removeCoverFromMap(currentLayer.id + '_other')
   updateMapElement(selectedLayer.value, layerState.layerName, layerState.color)
   const result = await updateElementsReq(layerState.layerId, {
     name: layerState.layerName,
@@ -435,7 +449,6 @@ function updateCoordinates(transformType: string, element: LayerResource) {
     } else if (MapElementEnum.POLY === type) {
       const coordinates = element.resource?.content.geometry
         .coordinates[0] as GeojsonCoordinate[]
-
       if (transformType === 'wgs84-gcj02') {
         coordinates.forEach((coordinate, i, arr) => {
           arr[i] = wgs84togcj02(

Web/src/pages/page-web/projects/tsa.vue

@@ -185,10 +185,11 @@
                     <span class="ml5 mr5">
                       <RocketOutlined />
                     </span>
-                    <span class="font-bold"
-                      :style="deviceInfo[device.sn] && deviceInfo[device.sn].mode_code !== EModeCode.Disconnected ? 'color: #00ee8b' : 'color: red;'">
-                      {{ deviceInfo[device.sn] ? EModeCode[deviceInfo[device.sn].mode_code] :
-                        EModeCode[EModeCode.Disconnected] }}
+                    <span class="font-bold">
+                      {{
+                        getTextByModeCode(deviceInfo[device.sn] ? deviceInfo[device.sn].mode_code :
+                          EModeCode.Disconnected)
+                      }}
                     </span>
                   </div>
                 </div>
@@ -238,17 +239,18 @@
 
 <script lang="ts" setup>
 import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { RocketOutlined, EyeInvisibleOutlined, EyeOutlined, RobotOutlined, DoubleRightOutlined } from '@ant-design/icons-vue'
 import Layer from './layer/index.vue'
-import { EDeviceTypeName, ELocalStorageKey } from '/@/types'
 import noData from '/@/assets/icons/no-data.png'
 import rc from '/@/assets/icons/rc.png'
-import { OnlineDevice, EModeCode, EDockModeCode } from '/@/types/device'
 import { useMyStore } from '/@/store'
 import { getDeviceTopo, getUnreadDeviceHms, updateDeviceHms } from '/@/api/manage'
-import { RocketOutlined, EyeInvisibleOutlined, EyeOutlined, RobotOutlined, DoubleRightOutlined } from '@ant-design/icons-vue'
 import { EHmsLevel, ERouterName } from '/@/types/enums'
+import { OnlineDevice, EModeCode, EDockModeCode } from '/@/types/device'
+import { EDeviceTypeName, ELocalStorageKey } from '/@/types'
 import { getRoot } from '/@/root'
 import { wgs84togcj02 } from '/@/vendors/coordtransform'
+import { getTextByModeCode } from '/@/utils/index'
 
 const store = useMyStore()
 const workspaceId = ref(localStorage.getItem(ELocalStorageKey.WorkspaceId)!)

Web/src/router/index.ts

@@ -3,6 +3,7 @@ import { ERouterName } from '/@/types/index'
 import CreatePlan from '/@/components/task/CreatePlan.vue'
 import WaylinePanel from '/@/pages/page-web/projects/wayline.vue'
 import DockPanel from '/@/pages/page-web/projects/dock.vue'
+import { apis, SignLoginApiParams } from '/@/api/custom/index'
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -101,12 +102,18 @@ const router = createRouter({
   routes
 })
 
-router.beforeEach((to, from, next) => {
-  const { sign, key, userCode } = from.query as any
-  if (sign && key && userCode) {
-    localStorage.setItem('sign', sign);
-    localStorage.setItem('key', key);
-    localStorage.setItem('userCode', userCode);
+const updateToken = async (data: SignLoginApiParams) => {
+  try {
+    await apis.signLogin(data)
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+router.beforeEach(async (to, from, next) => {
+  const { sign, key, userCode, workSpaceId } = to.query as any
+  if (sign && key && userCode && workSpaceId) {
+    await updateToken({ sign, key, userCode, workSpaceId })
     next();
   } else {
     next();

Web/src/types/map.d.ts

@@ -1,100 +1,105 @@
-
 export interface MapGeographicPosition {
- longitude: number;
- latitude: number;
- height?: number;
+  longitude: number;
+  latitude: number;
+  height?: number;
 }
+
 export enum LayerType {
- Normal,
- Default,
- Share
+  Normal,
+  Default,
+  Share
 }
+
 export interface pinAMapPosition {
- KL: number
- className: string
- kT: number
- lng: number
- lat: number
+  KL: number
+  className: string
+  kT: number
+  lng: number
+  lat: number
 }
+
 export enum ResourceStatus {
- NotShow,
- Show
+  NotShow,
+  Show
 }
+
 export type GeojsonCoordinate = [number, number, number?]
 
 export interface GeojsonLine {
- type: 'Feature'
- properties: {
-   color: string
-   directConnected?: boolean
- }
- geometry: {
-   type: 'LineString'
-   coordinates: GeojsonCoordinate[]
- }
+  type: 'Feature'
+  properties: {
+    color: string
+    directConnected?: boolean
+  }
+  geometry: {
+    type: 'LineString'
+    coordinates: GeojsonCoordinate[]
+  }
 }
 
 export interface GeojsonPolygon {
- type: 'Feature'
- properties: {
-   color: string
- }
- geometry: {
-   type: 'Polygon'
-   coordinates: GeojsonCoordinate[][]
- }
+  type: 'Feature'
+  properties: {
+    color: string
+  }
+  geometry: {
+    type: 'Polygon'
+    coordinates: GeojsonCoordinate[][]
+  }
 }
 
 export interface GeojsonPoint {
- type: 'Feature'
- properties: {
-   color: string
-   clampToGround?: boolean
- }
- geometry: {
-   type: 'Point'
-   coordinates: GeojsonCoordinate
- }
+  type: 'Feature'
+  properties: {
+    color: string
+    clampToGround?: boolean
+  }
+  geometry: {
+    type: 'Point'
+    coordinates: GeojsonCoordinate
+  }
 }
+
 export type GeojsonFeature = GeojsonLine | GeojsonPolygon | GeojsonPoint
 
 interface ResourceObjectBasic {
- user_name: string
- user_id?: string
- type:0| 1 | 2
- content: unknown
+  user_name: string
+  user_id?: string
+  type: 0 | 1 | 2
+  content: unknown
 }
+
 export interface PinResource extends ResourceObjectBasic {
- type: 0
- content: GeojsonFeature
+  type: 0
+  content: GeojsonFeature
 }
 
 export type ResourceObject = PinResource
 export enum LayerElevationLoadStatus {
- Unload,
- Load
+  Unload,
+  Load
 }
 
 export interface LayerResource {
- id: string
- name: string
- order: number
- status: ResourceStatus
- resource: ResourceObject | null
- display: number
- create_time: number
- elevation_load_status?: LayerElevationLoadStatus //
+  id: string
+  name: string
+  order: number
+  status: ResourceStatus
+  resource: ResourceObject | null
+  display: number
+  create_time: number
+  elevation_load_status?: LayerElevationLoadStatus //
 }
-export interface Layer {
- id: string
- name: string
- order: number
- create_time: number
- type: LayerType
- is_distributed: boolean
- is_lock: boolean
- elements: null | LayerResource[],
- is_check?: boolean
- is_select?: boolean
 
-}
+export interface Layer {
+  id: string
+  name: string
+  order: number
+  create_time: number
+  type: LayerType
+  is_distributed: boolean
+  is_lock: boolean
+  elements: null | LayerResource[],
+  is_check?: boolean
+  is_select?: boolean
+}

Web/src/types/mapLayer.ts

@@ -10,6 +10,7 @@ export interface mapLayerChildren {
   title: string
   obj: any
 }
+
 export interface mapLayerChildrenObj {
   className: string
   key: string

Web/src/utils/index.ts

@@ -0,0 +1,65 @@
+export const getTextByModeCode = (code: number) => {
+    let text = '';
+    switch (code) {
+        case 0:
+            text = '待机';
+            break;
+        case 1:
+            text = '起飞准备';
+            break;
+        case 2:
+            text = '起飞准备完毕';
+            break;
+        case 3:
+            text = '手动飞行';
+            break;
+        case 4:
+            text = '自动起飞';
+            break;
+        case 5:
+            text = '航线飞行';
+            break;
+        case 6:
+            text = '全景拍照';
+            break;
+        case 7:
+            text = '智能跟随';
+            break;
+        case 8:
+            text = 'ADS-B 躲避';
+            break;
+        case 9:
+            text = '自动返航';
+            break;
+        case 10:
+            text = '自动降落';
+            break;
+        case 11:
+            text = '强制降落';
+            break;
+        case 12:
+            text = '三桨叶降落';
+            break;
+        case 13:
+            text = '升级中';
+            break;
+        case 14:
+            text = '未连接';
+            break;
+        case 15:
+            text = 'APAS';
+            break;
+        case 16:
+            text = '虚拟摇杆状态';
+            break;
+        case 17:
+            text = '指令飞行';
+            break;
+        case 18:
+            text = '空中 RTK 收敛模式';
+            break;
+        default:
+            break;
+    }
+    return text;
+}