完成3d模型渲染，以及详情页

src/assets/styles/index.scss

@@ -179,3 +179,5 @@ aside {
     margin-bottom: 10px;
   }
 }
+
+

src/views/map.vue

@@ -65,6 +65,7 @@
           :class="currentModelIndex == index ? 'activeBtn' : ''"
           v-for="(item, index) in mapModel"
           :key="index"
+          @click="changeModel(index)"
         >
           {{ item }}
         </div>
@@ -82,7 +83,130 @@
       </div>
     </div>
 
-    <el-dialog v-model="dialogVisible" title="Tips" width="500"> </el-dialog>
+    <!-- 点位详情 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="info.pointName"
+      width="30%"
+      class="info-dialog"
+    >
+      <div class="info-box">
+        <div class="info-title">基本信息</div>
+        <div class="info-row">
+          <div class="row-lable">地址：</div>
+          <div class="row-value">{{ info.address }}</div>
+        </div>
+        <div class="info-row">
+          <div class="row-lable">办公时间：</div>
+          <div class="row-value">{{ info.officeHours }}</div>
+        </div>
+        <div class="info-row">
+          <div class="row-lable">联系电话：</div>
+          <div class="row-value">{{ info.phone }}</div>
+        </div>
+        <div class="info-row">
+          <div class="row-lable">封面：</div>
+          <div class="row-value">
+            <el-image
+              class="info-image"
+              fit="cover"
+              v-if="info.image"
+              :src="`${baseUrl}/api/yzt-data/file/image?name=${info.image}`"
+              :preview-src-list="[
+                `${baseUrl}/api/yzt-data/file/image?name=${info.image}`,
+              ]"
+            >
+              <div slot="error" class="image-slot">
+                <i class="el-icon-picture-outline"></i>
+                <span>图片加载出错</span>
+              </div>
+            </el-image>
+          </div>
+        </div>
+
+        <div
+          class="info-title"
+          v-show="info.yewuList && info.yewuList.length > 0"
+        >
+          办理业务
+        </div>
+        <div
+          class="yewu-list"
+          v-for="(item, index) in info.yewuList"
+          :key="index"
+        >
+          <div class="yewu-title">{{ item.title }}</div>
+
+          <div
+            class="list-sub"
+            v-for="(subItem, subIndex) in item.list"
+            :key="subItem.id"
+            @click="handleInfoByyewu(subItem.id)"
+          >
+            <div class="file-icon"></div>
+            <div>{{ subIndex + 1 }}. {{ subItem.simpleName }}</div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 业务详情 -->
+    <el-dialog
+      width="30%"
+      :title="businessInfo.businessName"
+      v-model="innerVisible"
+      class="info-dialog"
+    >
+      <div class="info-box">
+        <div class="info-row">
+          <div class="row-lable">业务名称：</div>
+          <div class="row-value">{{ businessInfo.businessName }}</div>
+        </div>
+        <div class="info-row">
+          <div class="row-lable">业务简称：</div>
+          <div class="row-value">{{ businessInfo.simpleName }}</div>
+        </div>
+        <div class="info-row">
+          <div class="row-lable">申办条件：</div>
+          <div class="row-value">{{ businessInfo.businessInstructions }}</div>
+        </div>
+        <div class="info-row">
+          <div class="row-lable">申办要求：</div>
+          <div class="row-value">{{ businessInfo.businessGuide }}</div>
+        </div>
+        <div class="info-row">
+          <div class="row-lable">相关材料：</div>
+          <div class="row-value value-list">
+            <div v-for="(item, index) in businessInfo.formList" :key="item.id">
+              <div class="value-list-title">{{ item.name }}</div>
+              <div
+                class="value-list-subTitle"
+                @click="lookIamge(index)"
+              >
+                参考样本
+           
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="info-row">
+          <div class="row-lable">法定时限：</div>
+          <div class="row-value">{{ businessInfo.legaltime }}</div>
+        </div>
+        <div class="info-row">
+          <div class="row-lable">承诺时限：</div>
+          <div class="row-value">{{ businessInfo.promisetime }}</div>
+        </div>
+      </div>
+
+      <el-image-viewer
+        v-if="showPreview"
+        :url-list="businessInfo.srcList"
+        show-progress
+        :initial-index="initialIndex"
+        @close="showPreview = false"
+      />
+    </el-dialog>
   </div>
 </template>
 
@@ -100,6 +224,7 @@ import {
   getEnterpriseTree,
 } from "@/api/mapApi";
 import { ref, reactive, onMounted, onUnmounted } from "vue";
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
 let options = reactive({
   scene: {
     center: {
@@ -174,9 +299,14 @@ let mapLayer = reactive({});
 let list = reactive([]);
 let popupShow = ref(false);
 let dictList = reactive([]);
+let info = reactive({});
+let businessInfo = reactive({});
+const showPreview = ref(false)
+let srcList = reactive([])
+let initialIndex = ref(0)
 
 const dialogVisible = ref(false);
-
+const innerVisible = ref(false);
 let currentIndex = ref(null);
 let currentModelIndex = ref(0);
 //树形结构配置
@@ -199,6 +329,44 @@ onUnmounted(() => {
   document.removeEventListener("click", handleOutsideClick);
 });
 
+/**
+ *
+ * @param index
+ * 
+ */
+const lookIamge = (index) => {
+
+  initialIndex.value = index //阅览的索引
+  showPreview.value = true
+  
+
+ 
+  // if (!exampleFile) return;
+  // const imageItem = document.getElementById(`businessImage` + index);
+  // console.log('sssddd',)
+  // imageItem.click();
+};
+
+/**
+ * 获取业务详情
+ * @param id
+ */
+const handleInfoByyewu = async (id) => {
+  const res = await getbusinessById({
+    id,
+    parent: info.parent,
+  });
+  res.data.srcList = []
+  if(res.data.formList.length>0){
+    res.data.srcList=  res.data.formList.map(item=>{
+      return `${baseUrl}/api/yzt-data/file/otherImage?name=${item.exampleFile}&imgname=${item.name}` 
+    })
+  }
+
+  businessInfo = res.data;
+  innerVisible.value = true;
+};
+
 /**
  * 获取详情
  * @param id
@@ -309,13 +477,13 @@ const initMarker = (item, flyTo = false, markerLength = 0) => {
   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;
-  // });
+  //图标单击事件
+  graphic.on(mars3d.EventType.click, async (event) => {
+    const infoItem = event.target.attr;
+    info = await getInfo(infoItem.id, infoItem.lonLat);
+    queryParams.name = info.pointName;
+    dialogVisible.value = true;
+  });
 
   if (markerLength > 0) {
     graphic.openHighlight();
@@ -388,6 +556,57 @@ const finishTree = () => {
   drawer.value = false;
 };
 
+/**
+ * 二三维地图变化
+ * @param index
+ */
+const changeModel = (index) => {
+  if (currentModelIndex.value != index) {
+    currentModelIndex.value = index;
+    if (index == 1) {
+      if (mapLayer.tiles3dLayer == undefined) {
+        mapLayer.tiles3dLayer = new mars3d.layer.TilesetLayer({
+          name: "模型名称",
+          url: "http://localhost:9090/B3dmqlh06/tileset.json",
+          maximumScreenSpaceError: 16,
+          maxMemory: 1024, // 最大缓存内存大小(MB)
+          matrixMove: {
+            hasMiddle: false,
+          },
+          flyTo: true,
+          // cacheBytes: 1073741824, // 1024MB = 1024*1024*1024 【重要】额定显存大小(以字节为单位)，允许在这个值上下波动。
+          // maximumCacheOverflowBytes: 2147483648, // 2048MB = 2048*1024*1024 【重要】最大显存大小(以字节为单位)。
+          // maximumMemoryUsage: 512, //【cesium 1.107+弃用】内存建议显存大小的50%左右，内存分配变小有利于倾斜摄影数据回收，提升性能体验
+          // skipLevelOfDetail: true, //是Cesium在1.5x 引入的一个优化参数，这个参数在金字塔数据加载中，可以跳过一些级别，这样整体的效率会高一些，数据占用也会小一些。但是带来的异常是：1） 加载过程中闪烁，看起来像是透过去了，数据载入完成后正常。2，有些异常的面片，这个还是因为两级LOD之间数据差异较大，导致的。当这个参数设置false，两级之间的变化更平滑，不会跳跃穿透，但是清晰的数据需要更长，而且还有个致命问题，一旦某一个tile数据无法请求到或者失败，导致一直不清晰。所以我们建议：对于网络条件好，并且数据总量较小的情况下，可以设置false，提升数据显示质量。
+          // loadSiblings: true, // 如果为true则不会在已加载完模型后，自动从中心开始超清化模型
+          // cullRequestsWhileMoving: true,
+          // cullRequestsWhileMovingMultiplier: 10, //【重要】 值越小能够更快的剔除
+          // preferLeaves: true, //【重要】这个参数默认是false，同等条件下，叶子节点会优先加载。但是Cesium的tile加载优先级有很多考虑条件，这个只是其中之一，如果skipLevelOfDetail=false，这个参数几乎无意义。所以要配合skipLevelOfDetail=true来使用，此时设置preferLeaves=true。这样我们就能最快的看见符合当前视觉精度的块，对于提升大数据以及网络环境不好的前提下有一点点改善意义。
+          // progressiveResolutionHeightFraction: 0.5, //【重要】 数值偏于0能够让初始加载变得模糊
+          // dynamicScreenSpaceError: true, // true时会在真正的全屏加载完之后才清晰化模型
+          // preloadWhenHidden: true, //tileset.show是false时，也去预加载数据
+        });
+        map.addLayer(mapLayer.tiles3dLayer);
+      } else {
+        mapLayer.tiles3dLayer.show = true;
+        map.sceneOptionsmap({
+          center: {
+            lat: 31.967646,
+            lng: 120.847855,
+            alt: 1250,
+            heading: 6.6,
+            pitch: -18.8,
+          },
+        });
+      }
+    } else {
+      if (mapLayer.tiles3dLayer) {
+        mapLayer.tiles3dLayer.show = false;
+      }
+    }
+  }
+};
+
 const laoding3d = () => {
   const tiles3dLayer = new mars3d.layer.TilesetLayer({
     name: "模型名称",
@@ -603,6 +822,97 @@ const getdictList = async () => {
   background: #409eff !important;
 }
 
+::v-deep .info-dialog {
+  background: rgba(15, 42, 79, 1);
+  border: 1px solid #094edb;
+  .el-dialog__title,
+  .el-dialog__close {
+    color: #fff !important;
+    font-weight: bold;
+    font-size: 22px;
+  }
+  .info-title {
+    font-size: 16px;
+    color: #fff;
+    font-weight: 550;
+    margin-bottom: 15px;
+  }
+  .info-box {
+    max-height: 500px;
+    overflow-y: auto;
+  }
+  .info-row {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 10px;
+    font-size: 14px;
+    color: #fff;
+
+    .row-lable {
+      width: 75px;
+      color: #9acfff;
+    }
+    .row-value {
+      flex: 1;
+    }
+    .value-list {
+      & > div {
+        padding: 10px 0;
+
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid rgba(3, 91, 178, 0.5);
+        .value-list-title {
+          flex: 1;
+        }
+        .value-list-subTitle {
+          color: #094edb;
+          margin-left: 3px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  ::v-deep .image-slot {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    border: 1px solid #094edb;
+  }
+
+  .yewu-list {
+    .yewu-title {
+      margin: 15px 0;
+      font-size: 15px;
+      color: #fff;
+      border-left: 5px solid #409eff;
+      padding-left: 10px;
+    }
+    .list-sub {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      color: #fff;
+      padding: 10px 0;
+      border-bottom: 1px solid rgba(3, 91, 178, 0.5);
+    }
+    .file-icon {
+      margin-right: 10px;
+      height: 20px;
+      width: 20px;
+      background: url("@/assets/images/file.png");
+
+      background-size: 100% 100%;
+    }
+  }
+}
+
 // 滚动条
 /* 设置滚动条整体样式 */
 ::-webkit-scrollbar {