完成点位的搜索以及渲染

package.json

@@ -19,11 +19,11 @@
     "@element-plus/icons-vue": "2.3.1",
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "10.11.0",
-    "autofit.js": "^3.0.7",
+    "autofit.js": "^3.2.5",
     "axios": "0.28.1",
     "clipboard": "2.0.11",
     "echarts": "5.5.1",
-    "element-plus": "2.7.6",
+    "element-plus": "^2.9.7",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",
     "js-beautify": "1.14.11",

src/App.vue

@@ -6,19 +6,25 @@
 import useSettingsStore from '@/store/modules/settings'
 import { handleThemeStyle } from '@/utils/theme'
 import autofit from "autofit.js";
+
+
+
 onMounted(() => {
   nextTick(() => {
     // 初始化主题样式
     handleThemeStyle(useSettingsStore().theme)
-    //缩放适配
+   
-    autofit.init(
+    // //缩放适配
-      {
+    // autofit.init(
-        designHeight: 1080,
+    //   {
-        designWidth: 1920,
+    //     designHeight: 1080,
+    //     designWidth: 1920,
     
-      }
+    //   }
    
-    );
+    // );
   })
 })
+
+
 </script>

src/views/map.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="map-container">
     <navigationBar></navigationBar>
-    <mars-map :options="options"></mars-map>
+    <mars-map :options="options" @onload="mapLoad"></mars-map>
     <!-- 搜索 -->
     <div class="search-container" id="box">
       <div class="search-input flex-container">
@@ -18,7 +18,7 @@
                 class="list-item"
                 v-for="item in list"
                 :key="item.id"
-                @click="addMarker(item.id, item.lonLat, item.pointName)"
+                @click="handleResultRow(item.id, item.lonLat, item.pointName)"
               >
                 <div class="enterprise-name">{{ item.pointName }}</div>
                 <div class="loaction-icon"></div>
@@ -39,7 +39,12 @@
     </div>
 
     <!-- 树形结构 -->
-    <el-drawer v-model="drawer" title="点位选择">
+    <el-drawer
+      v-model="drawer"
+      title="点位选择"
+      size="20%"
+      :append-to-body="false"
+    >
       <el-tree
         node-key="id"
         :props="props"
@@ -77,21 +82,14 @@
       </div>
     </div>
 
-    <el-dialog
+    <el-dialog v-model="dialogVisible" title="Tips" width="500"> </el-dialog>
-    v-model="dialogVisible"
-    title="Tips"
-    width="500"
-    :before-close="handleClose"
-  >
-   
-    
-  </el-dialog>
   </div>
 </template>
 
 <script setup name="Map">
 import NavigationBar from "@/components/NavigationBar";
 import marsMap from "@/components/marsMap";
+import markerIcon from "@/assets/images/map-marker.png";
 const { proxy } = getCurrentInstance();
 import {
   getPointListByType,
@@ -171,13 +169,14 @@ let queryParams = reactive({
   lonLat: undefined,
 });
 
+let map = reactive({});
+let mapLayer = reactive({});
 let list = reactive([]);
 let popupShow = ref(false);
 let dictList = reactive([]);
 
-const dialogVisible = ref(true)
+const dialogVisible = ref(false);
 
-let map = null;
 let currentIndex = ref(null);
 let currentModelIndex = ref(0);
 //树形结构配置
@@ -192,7 +191,6 @@ const props = {
 let currentNodeKey = reactive({});
 
 onMounted(() => {
-  
   //字典
   getdictList();
   document.addEventListener("click", handleOutsideClick);
@@ -201,6 +199,129 @@ onUnmounted(() => {
   document.removeEventListener("click", handleOutsideClick);
 });
 
+/**
+ * 获取详情
+ * @param id
+ * @param lonLat
+ */
+const getInfo = async (id, lonLat) => {
+  let res = await getPointinfo({
+    id: id,
+    lonLat: lonLat,
+  });
+  res.data.yewuList = [];
+  for (let key in res.data.object) {
+    res.data.yewuList.push({
+      title: filterTypeName(key),
+      list: res.data.object[key],
+    });
+  }
+
+  return res.data;
+};
+/**
+ * 字典翻译
+ * @param key
+ */
+const filterTypeName = (key) => {
+  if (!key) return;
+  const index = dictList.findIndex((item) => item.value == key);
+  if (index > -1) {
+    return dictList[index].title;
+  } else {
+    return "未翻译到";
+  }
+};
+
+/**
+ * 单击查询结构
+ * @param id
+ * @param lonLat
+ * @param pointName
+ */
+const handleResultRow = (id, lonLat, pointName) => {
+  searchMarker(id, lonLat);
+  popupShow.value = false;
+};
+
+/**
+ * 检索图标
+ * @param id
+ * @param lonLat
+ */
+const searchMarker = async (id, lonLat) => {
+  const info = await getInfo(id, lonLat);
+  queryParams.name = info.pointName;
+  //查询图标图层上是否存在，如果不存在就新增一个新图标
+  const markerLength = mapLayer.markerLayer.length;
+  const markerItem = mapLayer.markerLayer.getGraphicById(info.id);
+  if (markerItem) {
+    markerItem.openHighlight();
+    map.flyToPoint(markerItem._point, {
+      radius: 3000,
+      duration: 1,
+    });
+  } else {
+    initMarker(info, true, markerLength);
+  }
+};
+/**
+ * 渲染图标
+ * @param item
+ * @param flyTo
+ * @param markerLength
+ */
+const initMarker = (item, flyTo = false, markerLength = 0) => {
+  mapLayer.markerLayer.enabledEvent = false;
+  const graphic = new mars3d.graphic.BillboardPrimitive({
+    id: item.id,
+    position: item.lonLat.split(","),
+    style: {
+      width: 35,
+      height: 35,
+      scale: 1,
+      image: markerIcon,
+      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+      label: {
+        text: item.pointName,
+        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+        font_size: 14,
+        color: "#fff",
+        pixelOffsetY: -45,
+      },
+      highlight: {
+        label: {
+          outline: true,
+          outlineColor: "yellow",
+          outlineOpacity: 0.7,
+        },
+      },
+    },
+    flyTo: flyTo,
+    flyToOptions: {
+      radius: 3000,
+      duration: 1,
+    },
+    attr: item,
+  });
+  mapLayer.markerLayer.addGraphic(graphic);
+  mapLayer.markerLayer.enabledEvent = true; // 恢复事件
+
+  // //图标单击事件
+  // graphic.on(mars3d.EventType.click, async (event) => {
+  //   const infoItem = event.target.attr;
+  //   this.info = await this.getInfo(infoItem.id, infoItem.lonLat);
+  //   this.queryParams.name = this.info.pointName;
+  //   this.dialogVisible = true;
+  // });
+
+  if (markerLength > 0) {
+    graphic.openHighlight();
+  }
+};
+
 /**
  * 监听搜索结果弹出层
  * @param event
@@ -211,13 +332,6 @@ const handleOutsideClick = (event) => {
     popupShow.value = false;
   }
 };
-/**
- * 地图渲染完成
- * @param mapInstance
- */
-const onload = (mapInstance) => {
-  map = mapInstance;
-};
 
 /**
  * 点图层切换
@@ -266,6 +380,11 @@ const handleNodeClick = (data) => {
  * 树结构选择完毕
  */
 const finishTree = () => {
+  if (!currentNodeKey.id) {
+    proxy.$modal.msgError("该数据缺少唯一id!");
+  } else {
+    searchMarker(currentNodeKey.id, currentNodeKey.lonLat);
+  }
   drawer.value = false;
 };
 
@@ -297,6 +416,19 @@ const laoding3d = () => {
   map.addLayer(tiles3dLayer);
 };
 
+/**
+ * 地图初始化完毕
+ * @param mapInstance
+ */
+const mapLoad = (mapInstance) => {
+  map = mapInstance;
+  //创建marker图层
+  mapLayer.markerLayer = new mars3d.layer.GraphicLayer({
+    allowDrillPick: true, // 如果存在坐标完全相同的图标点，可以打开该属性，click事件通过graphics判断
+  });
+  map.addLayer(mapLayer.markerLayer);
+};
+
 /**
  * 根据关键字搜索
  */
@@ -326,7 +458,7 @@ const getdictList = async () => {
   background: #0059a2;
   .search-container {
     position: absolute;
-    top: 180px;
+    top: 150px;
     left: 50%;
     transform: translateX(-50%);
     width: 900px;