地图打点优化

Web/src/assets/media/picture.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1719905467401" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10546" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M930.936471 0C992.978824 0 1024 31.021176 1024 93.063529v837.872942c0 62.042353-31.021176 93.063529-93.063529 93.063529H93.063529C31.021176 1024 0 992.978824 0 930.936471V93.063529C0 31.021176 31.021176 0 93.063529 0h837.872942zM601.630118 384.722824a15.811765 15.811765 0 0 0-13.70353 7.318588l-147.57647 231.303529-67.282824-65.867294a15.811765 15.811765 0 0 0-24.18447 2.379294l-101.797648 149.624471a15.811765 15.811765 0 0 0 13.101177 24.69647h524.468706a15.811765 15.811765 0 0 0 13.733647-23.732706l-183.416471-317.801411a15.811765 15.811765 0 0 0-13.342117-7.920941z m-244.254118-93.816471a79.811765 79.811765 0 1 0 0 159.593412 79.811765 79.811765 0 0 0 0-159.593412z" p-id="10547" fill="#c0c6d1"></path></svg>

Web/src/assets/media/video.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1719905321017" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5358" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M450.048 213.504L305.152 42.496H140.8l144.896 170.496h164.352z m426.496 0L731.648 42.496h-164.352l144.896 170.496h164.352z m-212.992 0L518.656 42.496H354.304l144.896 170.496h164.352z m274.944-171.008h-157.696l144.896 170.496h76.8V106.496c0-36.352-27.648-64-64-64z m-846.848 0h-6.144c-36.352 0-64 27.648-64 64v106.496h215.552L91.648 42.496zM21.504 917.504c0 36.352 27.648 64 64 64h853.504c36.352 0 64-27.648 64-64V256H21.504v661.504z m340.992-469.504c0-36.352 29.696-53.248 64-53.248 10.752 0 23.552 2.048 34.304 8.704l243.2 140.8a60.416 60.416 0 0 1 0 106.496L460.8 791.552c-10.752 6.656-21.504 8.704-34.304 8.704-34.304 0-64-16.896-64-53.248V448z" fill="#c0c6d1" p-id="5359"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1722855934710" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13498" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M512.1 63.9c-247.4 0-447.9 200.5-447.9 447.9 0 247.4 200.5 447.9 447.9 447.9S960 759.2 960 511.8c0.1-247.4-200.5-447.9-447.9-447.9z m210.5 480.2L413.7 722.4c-24.9 14.4-56-3.6-56-32.3V333.5c0-28.7 31.1-46.7 56-32.3l308.8 178.3c24.9 14.3 24.9 50.3 0.1 64.6z" p-id="13499" fill="#e6e6e6"></path></svg>

Web/src/components/GMap.vue

@@ -855,25 +855,29 @@ export default defineComponent({
       setLayers(req)
       const coordinates = req.resource.content.geometry.coordinates
       updateCoordinates('gcj02-wgs84', req);
-      (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);
+      const title = coordinates.map((item: any, index: number) => {
+        if (index < 2) {
+          return item.toFixed(4)
+        }
+      });
       obj.setTitle(title)
       store.state.coverMap[req.id] = [obj]
       const map = root.$map
       const AMap = root.$aMap
       const text = new AMap.Text({
         position: new AMap.LngLat(coordinates[0], coordinates[1]),
-        offset: new AMap.Pixel(30, 0),
+        offset: new AMap.Pixel(20, -2),
         text: req.name,
         style: {
           backgroundColor: 'transparent',
           borderColor: 'transparent',
         }
       })
-      map.add(text);
-      store.state.coverMap[req.id + '_other'] = [text]
+      const other = [text]
+      map.add(other);
+      store.state.coverMap[req.id + '_other'] = other
       obj.on('click', function () {
         store.commit('SET_MAP_CLICK_ELEMENT', {
           id: req.id,
@@ -887,16 +891,27 @@ export default defineComponent({
       req.element_from = 1
       req.resource.user_name = userName
       setLayers(req)
-      const coordinatesList = req.resource.content.geometry.coordinates
       updateCoordinates('gcj02-wgs84', req)
       await postElementsReq(shareId.value, req)
       obj.setExtData({ id: req.id, name: req.name })
       store.state.coverMap[req.id] = [obj]
       const map = root.$map
       const AMap = root.$aMap
+      const coordinatesList = req.resource.content.geometry.coordinates.map((item: any) => wgs84togcj02(item[0], item[1]))
       if (coordinatesList.length < 2) {
         return
       }
+      const color = req.resource.content.properties.color
+      const circles = coordinatesList.map((item: any) => {
+        return new AMap.Circle({
+          center: new AMap.LngLat(item[0], item[1]),
+          radius: 8, // 半径
+          strokeColor: color,
+          fillColor: color,
+          fillOpacity: 1,
+          strokeWeight: 8,
+        });
+      })
       const coordinates = coordinatesList[0];
       const text = new AMap.Text({
         position: new AMap.LngLat(coordinates[0], coordinates[1]),
@@ -930,8 +945,8 @@ export default defineComponent({
         });
         distances.push(distanceText);
       }
-      const other = [text, ...distances]
-      map.add([text, ...distances]);
+      const other = [...circles, text, ...distances]
+      map.add(other);
       store.state.coverMap[req.id + '_other'] = other;
       obj.on('click', function () {
         store.commit('SET_MAP_CLICK_ELEMENT', {
@@ -946,16 +961,27 @@ export default defineComponent({
       req.element_from = 1
       req.resource.user_name = userName
       setLayers(req)
-      const coordinatesList = req.resource.content.geometry.coordinates[0]
       updateCoordinates('gcj02-wgs84', req)
       await postElementsReq(shareId.value, req)
       obj.setExtData({ id: req.id, name: req.name })
       store.state.coverMap[req.id] = [obj]
       const map = root.$map
       const AMap = root.$aMap
+      const coordinatesList = req.resource.content.geometry.coordinates[0].map((item: any) => wgs84togcj02(item[0], item[1]))
       if (coordinatesList.length < 3) {
         return
       }
+      const color = req.resource.content.properties.color
+      const circles = coordinatesList.map((item: any) => {
+        return new AMap.Circle({
+          center: new AMap.LngLat(item[0], item[1]),
+          radius: 8, // 半径
+          strokeColor: color,
+          fillColor: color,
+          fillOpacity: 1,
+          strokeWeight: 8,
+        });
+      })
       const coordinates = coordinatesList[0];
       const text = new AMap.Text({
         position: new AMap.LngLat(coordinates[0], coordinates[1]),
@@ -990,8 +1016,8 @@ export default defineComponent({
         });
         distances.push(distanceText);
       }
-      const other = [text, ...distances]
-      map.add([text, ...distances]);
+      const other = [...circles, text, ...distances]
+      map.add(other);
       store.state.coverMap[req.id + '_other'] = other;
       obj.on('click', function () {
         store.commit('SET_MAP_CLICK_ELEMENT', {

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

@@ -45,15 +45,20 @@ export function useGMapCover() {
   }
 
   function init2DPin(name: string, coordinates: GeojsonCoordinate, color?: string, data?: {}) {
+    const title = coordinates.map((item: any, index) => {
+      if (index < 2) {
+        return item.toFixed(4)
+      }
+    });
     const marker = new AMap.Marker({
       position: new AMap.LngLat(coordinates[0], coordinates[1]),
-      title: coordinates,
+      title: title,
       icon: getPinIcon(color),
       extData: data
     })
     const text = new AMap.Text({
       position: new AMap.LngLat(coordinates[0], coordinates[1]),
-      offset: new AMap.Pixel(-30, -30),
+      offset: new AMap.Pixel(20, -2),
       text: name,
       style: {
         backgroundColor: 'transparent',
@@ -89,6 +94,16 @@ export function useGMapCover() {
       strokeStyle: 'solid',
       extData: data
     })
+    const circles = path.map((item, index) => {
+      return new AMap.Circle({
+        center: item,
+        radius: 8, // 半径
+        strokeColor: color,
+        fillColor: color,
+        fillOpacity: 1,
+        strokeWeight: 8,
+      });
+    })
     const coordinatesList = coordinates[0];
     const text = new AMap.Text({
       position: new AMap.LngLat(coordinatesList[0], coordinatesList[1]),
@@ -127,7 +142,7 @@ export function useGMapCover() {
       });
       distances.push(distanceText);
     }
-    const other = [text, ...distances]
+    const other = [...circles, text, ...distances]
     root.$map.add(other)
     coverMap[data.id + '_other'] = [other]
     polyline.on('click', function () {
@@ -155,6 +170,16 @@ export function useGMapCover() {
       strokeColor: color || normalColor,
       extData: data
     })
+    const circles = path.map((item, index) => {
+      return new AMap.Circle({
+        center: item,
+        radius: 8, // 半径
+        strokeColor: color,
+        fillColor: color,
+        fillOpacity: 1,
+        strokeWeight: 8,
+      });
+    })
     const coordinatesList = coordinates[0][0];
     const text = new AMap.Text({
       position: new AMap.LngLat(coordinatesList[0], coordinatesList[1]),
@@ -193,7 +218,7 @@ export function useGMapCover() {
       });
       distances.push(distanceText);
     }
-    const other = [text, ...distances]
+    const other = [...circles, text, ...distances]
     root.$map.add(other)
     coverMap[data.id + '_other'] = [other]
     polygon.on('click', function () {

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

@@ -29,7 +29,7 @@ export function useGMapTrajectory() {
       strokeWeight: 6,//线宽
       strokeStyle: 'solid',
     })
-    const serialList = list.filter(item => [2, 3].includes(item.type));
+    const serialList = list.filter((item) => [2, 3].includes(item.type));
     // 序号
     const text = serialList.map((item, index) => {
       return new AMap.Text({

Web/src/pages/page-web/projects/media/detail/index.vue

@@ -45,12 +45,12 @@
             <template #file_name="{ record }">
               <a-tooltip :title="record.file_name">
                 <div class="fileName">
-                  <div @click="onClickLookFile(record)">
-                    <img :src="panoramaSrc" v-if="record.media_type === 3" />
-                    <img :src="videoSrc" v-else-if="record.media_type === 4" />
-                    <img :src="pictureSrc" v-else />
+                  <div class="fileName-cover" @click="onClickLookFile(record)">
+                    <img class="fileName-cover-img" :src="record.thumbnail_url" />
+                    <img class="fileName-cover-icon" :src="panoramaSrc" v-if="record.media_type === 3" />
+                    <img class="fileName-cover-icon" :src="videoSrc" v-else-if="record.media_type === 4" />
                   </div>
-                  <div>
+                  <div style="margin-left: 5px;">
                     <a-input v-model:value="record.file_name" v-if="state.editableData[record.file_id]" />
                     <div @click="onClickLookFile(record)" v-else>
                       {{ record.file_name }}
@@ -102,7 +102,7 @@
                 <a-card hoverable @click="onClickLookFile(item)">
                   <template #cover>
                     <div style="display: flex;justify-content:center;align-items: center;">
-                      <img style="width: 70%;margin: 10px;" :src="pictureSrc" />
+                      <img style="width: 70%;margin: 10px;" :src="item.thumbnail_url" />
                     </div>
                   </template>
                   <a-card-meta>
@@ -129,7 +129,6 @@ import { message } from 'ant-design-vue';
 import { MenuOutlined, AppstoreOutlined, EditOutlined, DeleteOutlined, DownloadOutlined, AimOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
 import Search from './components/Search.vue';
 import FileInfo from './components/FileInfo.vue';
-import pictureSrc from '/@/assets/media/picture.svg';
 import panoramaSrc from '/@/assets/media/panorama.svg';
 import videoSrc from '/@/assets/media/video.svg';
 import { apis } from '/@/api/custom';
@@ -427,10 +426,23 @@ const onClickDownload = async (record: any) => {
     align-items: center;
     cursor: pointer;
 
-    img {
-      width: 36px;
-      height: 36px;
-      margin-right: 5px;
+    &-cover {
+      position: relative;
+
+      &-img {
+        width: 36px;
+        height: 36px;
+      }
+
+      &-icon {
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        z-index: 2;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
     }
   }
 

Web/src/pages/page-web/projects/member/components/Search.vue

@@ -1,5 +1,10 @@
 <template>
-  <a-row style="margin-bottom: 20px;" justify="end">
+  <a-row style="margin-bottom: 20px;" justify="space-between">
+    <a-col>
+      <a-button type="primary" @click="onClickAddUser">
+        添加飞行员
+      </a-button>
+    </a-col>
     <a-col>
       <a-form ref="formRef" layout="inline" :model="formModel" :colon="false">
         <a-form-item name="device_name">
@@ -34,6 +39,7 @@ import { ref, reactive } from 'vue';
 import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';
 
 interface Props {
+  onClickAddUser: () => void,
   onClickSearch: (query: any) => Promise<any>,
   onClickReset: (query: any) => Promise<any>,
 };

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

@@ -1,6 +1,6 @@
 <template>
   <div class="mediaList">
-    <Search :onClickSearch="onClickSearch" :onClickReset="onClickReset" />
+    <Search :onClickAddUser="onClickAddUser" :onClickSearch="onClickSearch" :onClickReset="onClickReset" />
     <div class="mediaList-table">
       <a-table :scroll="{ x: '100%', y: 500 }" rowKey="user_id" :loading="state.listLoading" :columns="columns"
         @change="refreshData" :rowClassName="rowClassName" :dataSource="state.list" :pagination="paginationConfig" />
@@ -106,6 +106,11 @@ const refreshData = async (page: any) => {
   await fetchList();
 }
 
+// 点击添加用户
+const onClickAddUser = () => {
+
+}
+
 // 点击搜索
 const onClickSearch = async (query: any) => {
   await fetchList(query);