feature:完成数据更新

public/datas/redline/53_46.geojson

@@ -0,0 +1,8 @@
+{
+"type": "FeatureCollection",
+"name": "53",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "FID_": 0, "Entity": "LWPolyline", "Layer": "JZD", "Color": 1, "Linetype": "CONTINUOUS", "Elevation": 0.0, "LineWt": 25, "RefName": null, "height": 0.0 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 113.817802708539915, 23.25060214342405, 0.0 ], [ 113.817802708539915, 23.25060214342405, 0.0 ], [ 113.817809209046672, 23.250598103484563, 0.0 ], [ 113.817855785345316, 23.250585433085476, 0.0 ], [ 113.81793855664921, 23.250555340601839, 0.0 ], [ 113.818018127784654, 23.250518604038916, 0.0 ], [ 113.818093874889314, 23.250475514332937, 0.0 ], [ 113.818165200421845, 23.250426411211176, 0.0 ], [ 113.818225004498359, 23.250377074401491, 0.0 ], [ 113.818230115191383, 23.250367625771254, 0.0 ], [ 113.818246739999964, 23.25032178, 0.0 ], [ 113.81827989, 23.25027594, 0.0 ], [ 113.818321329999989, 23.25023012000003, 0.0 ], [ 113.81837102999998, 23.250184310000016, 0.0 ], [ 113.81844554999995, 23.250146160000018, 0.0 ], [ 113.818577990000023, 23.25010045, 0.0 ], [ 113.818599689337915, 23.250093793546359, 0.0 ], [ 113.818776638917882, 23.250039512643596, 0.0 ], [ 113.818798112030606, 23.250035137153137, 0.0 ], [ 113.818798819911265, 23.250034925527586, 0.0 ], [ 113.818890475116518, 23.25001517349089, 0.0 ], [ 113.818906597420508, 23.250012992352701, 0.0 ], [ 113.81892561, 23.250009110000029, 0.0 ], [ 113.819124210000055, 23.249986400000036, 0.0 ], [ 113.819223500000021, 23.24998652, 0.0 ], [ 113.819322769999971, 23.25000193, 0.0 ], [ 113.819482908267261, 23.250045286516855, 0.0 ], [ 113.819521259999902, 23.25005567, 0.0 ], [ 113.819570880000029, 23.250071030000019, 0.0 ], [ 113.819670129999949, 23.250101720000011, 0.0 ], [ 113.819868629999974, 23.250155459999974, 0.0 ], [ 113.81991824, 23.250178450000053, 0.0 ], [ 113.820017450000051, 23.250239720000057, 0.0 ], [ 113.820116590000026, 23.250346870000037, 0.0 ], [ 113.82019918000006, 23.250453990000047, 0.0 ], [ 113.820273499999985, 23.250568760000032, 0.0 ], [ 113.820285758999944, 23.250591481, 0.0 ], [ 113.82039730043364, 23.250798250372064, 0.0 ], [ 113.820413778125314, 23.250844140522545, 0.0 ], [ 113.820428549588939, 23.250926669564006, 0.0 ], [ 113.820450298403813, 23.25104816801165, 0.0 ], [ 113.820462322491494, 23.251061022575083, 0.0 ], [ 113.820753331516244, 23.250575433613296, 0.0 ], [ 113.820936583386228, 23.25024723771757, 0.0 ], [ 113.821372995245312, 23.249453251704708, 0.0 ], [ 113.821321563463144, 23.24943988473623, 0.0 ], [ 113.821276832613407, 23.249428279408797, 0.0 ], [ 113.820077691457442, 23.249117159196416, 0.0 ], [ 113.819864355443414, 23.24906180751713, 0.0 ], [ 113.819811693738714, 23.249051312555086, 0.0 ], [ 113.819758038924448, 23.24904684546361, 0.0 ], [ 113.819704195134463, 23.249048474886461, 0.0 ], [ 113.819650971514591, 23.249056175567016, 0.0 ], [ 113.819599166581824, 23.249069832845016, 0.0 ], [ 113.819549556501471, 23.249089240837158, 0.0 ], [ 113.819502888239626, 23.249114107846619, 0.0 ], [ 113.819459860012387, 23.249144061758503, 0.0 ], [ 113.819396154131695, 23.24919006988787, 0.0 ], [ 113.819328355998238, 23.249230781065691, 0.0 ], [ 113.819256981992382, 23.24926588707077, 0.0 ], [ 113.819182572872364, 23.249295120343501, 0.0 ], [ 113.819105692787318, 23.249318260305749, 0.0 ], [ 113.819034095962081, 23.249333595487272, 0.0 ], [ 113.819026924393754, 23.249335131549199, 0.0 ], [ 113.818946885472812, 23.249345600243281, 0.0 ], [ 113.818931185714248, 23.249346381255837, 0.0 ], [ 113.818920392994343, 23.249338093232097, 0.0 ], [ 113.818875358851315, 23.249303511361038, 0.0 ], [ 113.818846754163772, 23.249304056186872, 0.0 ], [ 113.818755286125437, 23.249300539191228, 0.0 ], [ 113.818671838201269, 23.249285993468142, 0.0 ], [ 113.81857688591073, 23.249261768553307, 0.0 ], [ 113.818499746685958, 23.249233488550558, 0.0 ], [ 113.818298429456462, 23.249563382917916, 0.0 ], [ 113.818114864900934, 23.249902005396926, 0.0 ], [ 113.817949490839737, 23.250248537998175, 0.0 ], [ 113.817802708539915, 23.25060214342405, 0.0 ] ] ] ] } }
+]
+}

src/App.vue

@@ -102,7 +102,7 @@
   <div class="position">
     <label>经度：{{ lng }}</label>
     <label>纬度：{{ lat }}</label>
-    <!-- <label>视角高：{{cameraHeight}}</label> -->
+    <label>视角高：{{cameraHeight}}</label>
   </div>
 </template>
 <script setup>
@@ -110,7 +110,7 @@ import { ref, onMounted, nextTick } from 'vue'
 import { Plus, Minus, View } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import dataLoading from './utils/dataLoading.js';
-import { getHeightByType, cartesianToLnglat ,debounce} from './utils/common.js';
+import { getHeightByType, cartesianToLnglat ,debounce,getAssetsFile} from './utils/common.js';
 import { queryGridItem } from './api/index.js';
 import Bubble from '@/components/bubble/index.js'
 import { sourceEpsgCode, targetProj4Defined } from "@/config/index.js"
@@ -183,10 +183,14 @@ const initViewer = async () => {
   // viewer.scene.globe.translucency.enabled = true;
   viewer.scene.globe.undergroundColor = Cesium.Color.TRANSPARENT;
   // 限制相机视角
-  viewer.scene.screenSpaceCameraController.minimumZoomDistance = 20
+  viewer.scene.screenSpaceCameraController.minimumZoomDistance = 5;
+  // viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;//禁止模型穿透
   // viewer.scene.pickTranslucentDepth = true;
   // 开启帧率显示
   viewer.scene.debugShowFramesPerSecond = true;
+
+  addSkyBox();
+
   initNavigation();
   initEvent(viewer);
   window.viewer = viewer;
@@ -220,6 +224,11 @@ const initViewer = async () => {
           if (lc.type === "poi") {
             dataLoading.addPoiLayer(viewer, wsConfig.url, lc.id, wsConfig.show)
           }
+          if (lc.type === "geojson") {
+            fetch(wsConfig.url).then(res => res.json()).then(data => {
+              dataLoading.addGeoJSONData(viewer, data, lc.id, wsConfig.show)
+            })
+          }
           if (lc.type === "3dTilesLayer") {
             let url = tileUrlTemplate.replace('{Text}', lc.id);
             dataLoading.loadTileset(viewer, url, lc.id,false).then(tileset => {
@@ -240,6 +249,24 @@ const initViewer = async () => {
   window.coordSource = new Cesium.CustomDataSource("coordSource");
   viewer.dataSources.add(window.coordSource);
 }
+
+// 自带的天空盒会有倾斜
+import GroundSkyBox  from './utils/SkyboxOnGround/index.js';
+const addSkyBox = () => {
+  viewer.scene.skyBox = new GroundSkyBox ({
+    show: true,
+    sources: {
+      positiveX: getAssetsFile('img/skybox/lantian/Right.jpg'),
+      negativeX: getAssetsFile('img/skybox/lantian/Left.jpg'),
+      positiveY: getAssetsFile('img/skybox/lantian/Front.jpg'),
+      negativeY: getAssetsFile('img/skybox/lantian/Back.jpg'),
+      positiveZ: getAssetsFile('img/skybox/lantian/Up.jpg'),
+      negativeZ: getAssetsFile('img/skybox/lantian/Down.jpg'),
+    },
+    nearGround:true
+  });
+}
+
 const clearEntity = () => {
   if (!isDraw) {
     // 清空绘制的路径
@@ -520,34 +547,34 @@ const initEvent = (viewer) => {
   // 可以根据需要动态调整最大屏幕空间误差
   // 例如，当相机距离模型较远时，增大最大屏幕空间误差
   // 当相机靠近模型时，减小最大屏幕空间误差
-  viewer.scene.postRender.addEventListener(() => {
+  // viewer.scene.postRender.addEventListener(() => {
 
-    const allTilesets = getAll3DTilesets(viewer);
+  //   const allTilesets = getAll3DTilesets(viewer);
-    allTilesets.forEach(tileset => {
+  //   allTilesets.forEach(tileset => {
-      const distance = Cesium.Cartesian3.distance(
+  //     const distance = Cesium.Cartesian3.distance(
-        viewer.camera.position,
+  //       viewer.camera.position,
-        tileset.boundingSphere.center
+  //       tileset.boundingSphere.center
-      );
+  //     );
-      if (distance > 2500) {
+  //     if (distance > 2500) {
-        tileset.maximumScreenSpaceError = 256;
+  //       tileset.maximumScreenSpaceError = 256;
-        tileset.baseScreenSpaceError = 1024 * 3;
+  //       tileset.baseScreenSpaceError = 1024 * 3;
-      }else if (distance > 2000) {
+  //     }else if (distance > 2000) {
-        tileset.maximumScreenSpaceError = 128;
+  //       tileset.maximumScreenSpaceError = 128;
-        tileset.baseScreenSpaceError = 1024 * 2;
+  //       tileset.baseScreenSpaceError = 1024 * 2;
-      }else if (distance > 1500) {
+  //     }else if (distance > 1500) {
-        tileset.maximumScreenSpaceError = 64;
+  //       tileset.maximumScreenSpaceError = 64;
-        tileset.baseScreenSpaceError = 1024 ;
+  //       tileset.baseScreenSpaceError = 1024 ;
-        // tileset.skipScreenSpaceErrorFactor = 512;
+  //       // tileset.skipScreenSpaceErrorFactor = 512;
-      } else if (distance > 500) {
+  //     } else if (distance > 500) {
-        tileset.maximumScreenSpaceError = 32;
+  //       tileset.maximumScreenSpaceError = 32;
-        tileset.baseScreenSpaceError = 16;
+  //       tileset.baseScreenSpaceError = 16;
-      } else {
+  //     } else {
-        tileset.maximumScreenSpaceError = 16;
+  //       tileset.maximumScreenSpaceError = 16;
-        tileset.baseScreenSpaceError = 16;
+  //       tileset.baseScreenSpaceError = 16;
-      }
+  //     }
-    })
+  //   })
 
-  });
+  // });
 
   let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
   // 鼠标全局的点击事件处理函数
@@ -654,6 +681,7 @@ const initEvent = (viewer) => {
       var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
       lat.value = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
       lng.value = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
+      cameraHeight.value = viewer.camera.positionCartographic.height.toFixed(2);
     }
   }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
 }
@@ -701,6 +729,16 @@ const checkChange = (data, checked, childrenChecked) => {
     if (data.type === "poi") {
       viewer.dataSources.getByName(data.id)[0].show = checked
     }
+    if (data.type === "geojson") {
+      const primitives = viewer.scene.primitives;
+      for (let i = 0; i < primitives.length; ++i) {
+        if (primitives.get(i).name == data.id) {
+          primitives.get(i).show = checked;
+          checked&&dataLoading.focusPrimitivesCollection(primitives.get(i));
+          break;
+        }
+      }
+    }
     if (data.type === "userVector") {
       const primitives = viewer.scene.primitives;
       let currPrimitive = null;
@@ -724,7 +762,8 @@ const checkChange = (data, checked, childrenChecked) => {
         }
       }
       if (currPrimitive) {
-        currPrimitive.show = checked
+        currPrimitive.show = checked;
+        // viewer.zoomTo(currPrimitive);
       } else {
         if (checked) {
           let url = tileUrlTemplate.replace('{Text}', data.id);
@@ -1180,6 +1219,9 @@ async function calcArea(points) {
   label:nth-child(2) {
     margin-left: 0.8rem;
   }
+  label:nth-child(3) {
+    margin-left: 0.8rem;
+  }
 }
 
 .addition-nav {

src/config/index.js

@@ -1,68 +1,68 @@
 // const host = "192.168.21.30";
 // const host = "172.27.40.60";
-const host = "192.168.28.126";
+const host = "127.0.0.1";
-const geoserverUrl = "http://"+host+":8088/geoserver"
+const geoserverUrl = "http://" + host + ":8088/geoserver"
 
-const geoserverWMTSUrl = geoserverUrl+"/cxy/gwc/service/wmts"
+const geoserverWMTSUrl = geoserverUrl + "/cxy/gwc/service/wmts"
 
 const gridServiceName = "cxy:modelgrid4326"
 
 const demoWmtsService = {
-  id:"dom0.2m",
+  id: "dom0.2m",
   url: geoserverWMTSUrl,
   layerName: "cxy:dom0.2m",
   epsgCode: "EPSG:4326",
-  extent:[
+  extent: [
     113.7574461874795,
     23.213844014596848,
     113.8554165916731,
     23.317278851278726
   ]
 }
-export const geoserverWFSUrl = geoserverUrl+"/wfs";
+export const geoserverWFSUrl = geoserverUrl + "/wfs";
-export const terrainUrl = 'http://'+host+':9090/terrain/';
+export const terrainUrl = 'http://' + host + ':9090/terrain/';
 export const targetProj4Defined = "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs"
 export const sourceEpsgCode = "EPSG:4326"
 // export const tileUrlTemplate = `http://61.144.79.174:9095/data/3dtiles/%E5%A2%9E%E5%9F%8E%E5%8C%BA100%E5%B9%B3%E6%96%B9%E5%8D%83%E7%B1%B3%E6%A8%A1%E5%9E%8B/{Text}/tileset.json`
 export const tileUrlTemplate = `http://${host}:9090/3dtiles/{Text}/tileset.json`
 // export const tileUrlTemplate = `http://${host}:9292/3dtiles1.1/draco/{Text}/tileset.json`
 export const initConfig = {
-  point:[113.804,23.263,20000.0]
+  point: [113.804, 23.263, 20000.0]
 }
-export const queryUrl = geoserverUrl+`/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${gridServiceName}&outputFormat=application/json&maxFeatures=50`;
+export const queryUrl = geoserverUrl + `/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${gridServiceName}&outputFormat=application/json&maxFeatures=50`;
-export const gridGeojsonUrl = geoserverUrl+`/cxy/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${gridServiceName}&maxFeatures=99999&outputFormat=application/json`
+export const gridGeojsonUrl = geoserverUrl + `/cxy/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${gridServiceName}&maxFeatures=99999&outputFormat=application/json`
 export const cesiumKey = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyNjI2ZjVjMS0zZTFjLTQ3MDAtYTZlZC02YWFjOWQwNzBjNjIiLCJpZCI6ODM1NTQsImlhdCI6MTY0NTY1NzYzM30.IPqS_sM-s_vzNnK0EAiTy6kpYP5RBYkuMgbqJtKQkPw";
 
-export const layerTreeData =  [
+export const layerTreeData = [
   {
     label: '基础图层',
-    id:'baseLayer',
+    id: 'baseLayer',
     disabled: true,
     children: [
       {
         label: '电子地图-高德',
-        id:'amap-vector',
+        id: 'amap-vector',
-        type:'xyz',
+        type: 'xyz',
-        layerConfig:{
+        layerConfig: {
-          url:"http://"+host+":9090/data/wmts/amap/{z}/{x}/{y}.png",
+          url: "http://" + host + ":9090/data/wmts/amap/{z}/{x}/{y}.png",
           show: true
         }
       },
       {
         label: '遥感影像',
-        id:demoWmtsService.id,
+        id: demoWmtsService.id,
-        type:'xyz',
+        type: 'xyz',
-        layerConfig:{
+        layerConfig: {
-          url:"http://"+host+":9090/data/wmts/grid/{z}/{x}/{y}.png",
+          url: "http://" + host + ":9090/data/wmts/grid/{z}/{x}/{y}.png",
           show: true
         }
       },
       {
         label: '分幅网格',
-        id:gridServiceName,
+        id: gridServiceName,
         type: "wfs",
-        layerConfig:{
+        layerConfig: {
-          url:gridGeojsonUrl,
+          url: gridGeojsonUrl,
           show: true
         }
       },
@@ -70,46 +70,138 @@ export const layerTreeData =  [
   },
   {
     label: '矢量数据',
-    id:'vectorLayer',
+    id: 'vectorLayer',
     disabled: true,
     children: [
       {
         label: '兴趣点',
-        id:'poi',
+        id: 'poi',
         type: "poi",
-        layerConfig:{
+        layerConfig: {
           url: '/datas/poi0317.geojson',
           show: false
         }
       },
-    ],
-  },
-  {
-    label: '规划设计模型',
-    id:'slope', 
-    disabled: true,
-    children: [
       {
-        label: '保利251亩地块',
+        label: '增城251亩地块项目',
-        id:'baoli0309',
+        id: 'redline251',
-        type: "3dTilesLayer",
+        type: "geojson",
-        layerConfig:{
+        layerConfig: {
+          url: '/datas/redline/251.geojson',
           show: false
         }
       },
       {
         label: '荔湖旁120亩地块',
-        id:'LiHu120',
+        id: 'redline120',
-        type: "3dTilesLayer",
+        type: "geojson",
-        layerConfig:{
+        layerConfig: {
+          url: '/datas/redline/120.geojson',
           show: false
         }
       },
+      {
+        label: '新城大道东侧53.464亩地块',
+        id: 'redline5346',
+        type: "geojson",
+        layerConfig: {
+          url: '/datas/redline/53_46.geojson',
+          show: false
+        }
+      },
+
+    ],
+  },
+  {
+    label: '规划设计模型',
+    id: 'slope',
+    disabled: true,
+    children: [
+      // {
+      //   label: '增城251亩项目总平面报建图（旧）',
+      //   id:'baoli0309',
+      //   type: "3dTilesLayer",
+      //   layerConfig:{
+      //     show: false
+      //   }
+      // },
+      {
+        label: '增城251亩项目总平面报建图',
+        id: 'baoli0610',
+        type: "3dTilesLayer",
+        layerConfig: {
+          show: false
+        }
+      },
+      {
+        label: '荔湖旁120亩地块',
+        id: 'LiHu120',
+        type: "3dTilesLayer",
+        layerConfig: {
+          show: false
+        }
+      },
+      {
+        label: '荔湖街新城大道东侧53.464亩地块',
+        id: 'xinchengdadao',
+        type: "3dTilesLayer",
+        layerConfig: {
+          show: false
+        }
+      },
+      // {
+      //   label: '0626',
+      //   id: 'baoli0626',
+      //   type: "3dTilesLayer",
+      //   layerConfig: {
+      //     show: false
+      //   }
+      // },
+      // {
+      //   label: '0627',
+      //   id: 'baoli0627',
+      //   type: "3dTilesLayer",
+      //   layerConfig: {
+      //     show: false
+      //   }
+      // },
+      {
+        label: '广汕公路南侧22.974亩',
+        id: 'b0701-1',
+        type: "3dTilesLayer",
+        layerConfig: {
+          show: false
+        }
+      },
+      // {
+      //   label: '周边参照',
+      //   id: 'b0701-2',
+      //   type: "3dTilesLayer",
+      //   layerConfig: {
+      //     show: false
+      //   }
+      // },
+      //  {
+      //   label: '方案一',
+      //   id: 'plan-a',
+      //   type: "3dTilesLayer",
+      //   layerConfig: {
+      //     show: false
+      //   }
+      // },
+      //  {
+      //   label: '方案二',
+      //   id: 'plan-b',
+      //   type: "3dTilesLayer",
+      //   layerConfig: {
+      //     show: false
+      //   }
+      // },
     ]
   },
   {
     label: '倾斜模型',
-    id:'3dtile',
+    id: '3dtile',
     disabled: true,
     children: [
       // {

src/utils/SkyboxOnGround/index.js

@@ -0,0 +1,333 @@
+import * as Cesium from 'cesium';
+ 
+const BoxGeometry = Cesium.BoxGeometry;
+const Cartesian3 = Cesium.Cartesian3;
+const defaultValue = Cesium.defaultValue;
+const defined = Cesium.defined;
+const destroyObject = Cesium.destroyObject;
+const DeveloperError = Cesium.DeveloperError;
+const GeometryPipeline = Cesium.GeometryPipeline;
+const Matrix3 = Cesium.Matrix3;
+const Matrix4 = Cesium.Matrix4;
+const Transforms = Cesium.Transforms;
+const VertexFormat = Cesium.VertexFormat;
+const BufferUsage = Cesium.BufferUsage;
+const CubeMap = Cesium.CubeMap;
+const DrawCommand = Cesium.DrawCommand;
+const loadCubeMap = Cesium.loadCubeMap;
+const RenderState = Cesium.RenderState;
+const VertexArray = Cesium.VertexArray;
+const BlendingState = Cesium.BlendingState;
+const SceneMode = Cesium.SceneMode;
+const ShaderProgram = Cesium.ShaderProgram;
+const ShaderSource = Cesium.ShaderSource;
+//片元着色器，直接从源码复制
+// const SkyBoxFS = "uniform samplerCube u_cubeMap;\n\
+// \n\
+// in vec3 v_texCoord;\n\
+// \n\
+// void main()\n\
+// {\n\
+//     vec4 color = czm_textureCube(u_cubeMap, normalize(v_texCoord));\n\
+//     out_FragColor = vec4(czm_gammaCorrect(color).rgb, czm_morphTime);\n\
+// }\n\
+// ";
+ //片元着色器
+let SkyBoxFS = `uniform samplerCube u_cubeMap;
+  in vec3 v_texCoord;
+  void main()
+  {
+    vec4 color = texture(u_cubeMap, normalize(v_texCoord));
+    out_FragColor = vec4(czm_gammaCorrect(color).rgb, czm_morphTime);
+  }
+`;
+
+// //顶点着色器
+// const SkyBoxVS =
+//     `in vec3 position;
+//       out vec3 v_texCoord;
+//       uniform mat3 u_rotateMatrix;
+//       void main()
+//       {
+//          vec3 p = czm_viewRotation * u_rotateMatrix * (czm_temeToPseudoFixed * (czm_entireFrustum.y * position));
+//          gl_Position = czm_projection * vec4(p, 1.0);
+//          v_texCoord = position.xyz;
+//       }`;
+ 
+// 顶点着色器，主要修改是乘了一个旋转矩阵（之前计算出来当前相机方位的旋转矩阵）
+let SkyBoxVS = `
+  uniform mat3 u_rotateMatrix;
+  in vec3 position;
+  out vec3 v_texCoord;
+  void main()
+  {
+    vec3 p = czm_viewRotation * u_rotateMatrix * (czm_temeToPseudoFixed * (czm_entireFrustum.y * position));
+    gl_Position = czm_projection * vec4(p, 1.0);
+    v_texCoord = position.xyz;
+  }
+ `; 
+ 
+/**
+ * A sky box around the scene to draw stars.  The sky box is defined using the True Equator Mean Equinox (TEME) axes.
+ * <p>
+ * This is only supported in 3D.  The sky box is faded out when morphing to 2D or Columbus view.  The size of
+ * the sky box must not exceed {@link Scene#maximumCubeMapSize}.
+ * </p>
+ *
+ * @alias SkyBox
+ * @constructor
+ *
+ * @param {Object} options Object with the following properties:
+ * @param {Object} [options.sources] The source URL or <code>Image</code> object for each of the six cube map faces.  See the example below.
+ * @param {Boolean} [options.show=true] Determines if this primitive will be shown.
+ *
+ *
+ * @example
+ * scene.skyBox = new Cesium.SkyBox({
+ *   sources : {
+ *     positiveX : 'skybox_px.png',
+ *     negativeX : 'skybox_nx.png',
+ *     positiveY : 'skybox_py.png',
+ *     negativeY : 'skybox_ny.png',
+ *     positiveZ : 'skybox_pz.png',
+ *     negativeZ : 'skybox_nz.png'
+ *   }
+ * });
+ *
+ * @see Scene#skyBox
+ * @see Transforms.computeTemeToPseudoFixedMatrix
+ */
+function SkyBox(options) {
+    /**
+     * The sources used to create the cube map faces: an object
+     * with <code>positiveX</code>, <code>negativeX</code>, <code>positiveY</code>,
+     * <code>negativeY</code>, <code>positiveZ</code>, and <code>negativeZ</code> properties.
+     * These can be either URLs or <code>Image</code> objects.
+     *
+     * @type Object
+     * @default undefined
+     */
+    this.sources = options.sources;
+    this._sources = undefined;
+    /**
+        * 是否开启近地模式
+        */
+    this.nearGround = options.nearGround;
+    /**
+     * Determines if the sky box will be shown.
+     *
+     * @type {Boolean}
+     * @default true
+     */
+    this.show = defaultValue(options.show, true);
+ 
+    this._command = new DrawCommand({
+        modelMatrix: Matrix4.clone(Matrix4.IDENTITY),
+        owner: this,
+    });
+    this._cubeMap = undefined;
+ 
+    this._attributeLocations = undefined;
+    this._useHdr = undefined;
+}
+ 
+/**
+ * Called when {@link Viewer} or {@link CesiumWidget} render the scene to
+ * get the draw commands needed to render this primitive.
+ * <p>
+ * Do not call this function directly.  This is documented just to
+ * list the exceptions that may be propagated when the scene is rendered:
+ * </p>
+ *
+ * @exception {DeveloperError} this.sources is required and must have positiveX, negativeX, positiveY, negativeY, positiveZ, and negativeZ properties.
+ * @exception {DeveloperError} this.sources properties must all be the same type.
+ */
+SkyBox.prototype.update = function (frameState, useHdr) {
+    const that = this;
+ 
+    if (!this.show) {
+        return undefined;
+    }
+ 
+    if (
+        frameState.mode !== SceneMode.SCENE3D &&
+        frameState.mode !== SceneMode.MORPHING
+    ) {
+        return undefined;
+    }
+ 
+    // The sky box is only rendered during the render pass; it is not pickable, it doesn't cast shadows, etc.
+    if (!frameState.passes.render) {
+        return undefined;
+    }
+ 
+    const context = frameState.context;
+ 
+    if (this._sources !== this.sources) {
+        this._sources = this.sources;
+        const sources = this.sources;
+ 
+        //>>includeStart('debug', pragmas.debug);
+        if (
+            !defined(sources.positiveX) ||
+            !defined(sources.negativeX) ||
+            !defined(sources.positiveY) ||
+            !defined(sources.negativeY) ||
+            !defined(sources.positiveZ) ||
+            !defined(sources.negativeZ)
+        ) {
+            throw new DeveloperError(
+                "this.sources is required and must have positiveX, negativeX, positiveY, negativeY, positiveZ, and negativeZ properties."
+            );
+        }
+ 
+        if (
+            typeof sources.positiveX !== typeof sources.negativeX ||
+            typeof sources.positiveX !== typeof sources.positiveY ||
+            typeof sources.positiveX !== typeof sources.negativeY ||
+            typeof sources.positiveX !== typeof sources.positiveZ ||
+            typeof sources.positiveX !== typeof sources.negativeZ
+        ) {
+            throw new DeveloperError(
+                "this.sources properties must all be the same type."
+            );
+        }
+        //>>includeEnd('debug');
+ 
+        if (typeof sources.positiveX === "string") {
+            // Given urls for cube-map images.  Load them.
+            loadCubeMap(context, this._sources).then(function (cubeMap) {
+                that._cubeMap = that._cubeMap && that._cubeMap.destroy();
+                that._cubeMap = cubeMap;
+            });
+        } else {
+            this._cubeMap = this._cubeMap && this._cubeMap.destroy();
+            this._cubeMap = new CubeMap({
+                context: context,
+                source: sources,
+            });
+        }
+    }
+ 
+    const command = this._command;
+ 
+    if (!defined(command.vertexArray)) {
+        //uniforms
+        command.modelMatrix = Transforms.eastNorthUpToFixedFrame(
+            frameState.camera._positionWC
+        );
+        command.uniformMap = {
+            u_cubeMap: function () {
+                return that._cubeMap;
+            },
+            u_rotateMatrix: function () {
+                // // return Matrix4.getRotation(command.modelMatrix, skyboxMatrix3);
+                return that.nearGround ? (command.modelMatrix = Transforms.eastNorthUpToFixedFrame(frameState.camera._positionWC),
+                    Matrix4.getMatrix3(command.modelMatrix, new Matrix3)) : Matrix3.IDENTITY;
+                // if (!Cesium.defined(Cesium.Matrix4.getRotation)) {
+                //     return Cesium.Matrix4.getMatrix3(command.modelMatrix, skyboxMatrix3);
+                // }
+                // return Cesium.Matrix4.getRotation(command.modelMatrix, skyboxMatrix3);
+
+            }
+        };
+ 
+        // command.uniformMap = {
+        //     u_cubeMap: function () {
+        //         return that._cubeMap;
+        //     },
+        //     u_rotateMatrix: function () {
+        //         return that.nearGround ? (command.modelMatrix = Transforms.eastNorthUpToFixedFrame(frameState.camera._positionWC),
+        //             Matrix4.getMatrix3(command.modelMatrix, new Matrix3)) : Matrix3.IDENTITY;
+        //     }
+        // };
+ 
+        const geometry = BoxGeometry.createGeometry(
+            BoxGeometry.fromDimensions({
+                dimensions: new Cartesian3(2.0, 2.0, 2.0),
+                vertexFormat: VertexFormat.POSITION_ONLY,
+            })
+        );
+        const attributeLocations = (this._attributeLocations = GeometryPipeline.createAttributeLocations(
+            geometry
+        ));
+ 
+        command.vertexArray = VertexArray.fromGeometry({
+            context: context,
+            geometry: geometry,
+            attributeLocations: attributeLocations,
+            bufferUsage: BufferUsage.STATIC_DRAW,
+        });
+ 
+        command.renderState = RenderState.fromCache({
+            blending: BlendingState.ALPHA_BLEND,
+        });
+    }
+ 
+    if (!defined(command.shaderProgram) || this._useHdr !== useHdr) {
+        const fs = new ShaderSource({
+            defines: [useHdr ? "HDR" : ""],
+            sources: [SkyBoxFS],
+        });
+        // command.shaderProgram = ShaderProgram.fromCache({
+        //     context: context,
+        //     vertexShaderSource: SkyBoxVS,
+        //     fragmentShaderSource: fs,
+        //     attributeLocations: this._attributeLocations,
+        // });
+        command.shaderProgram = Cesium.ShaderProgram.fromCache({
+            context: context,
+            vertexShaderSource: SkyBoxVS,
+            fragmentShaderSource: fs,
+            attributeLocations: this._attributeLocations,
+        });
+        this._useHdr = useHdr;
+    }
+ 
+    if (!defined(this._cubeMap)) {
+        return undefined;
+    }
+ 
+    return command;
+};
+ 
+/**
+ * Returns true if this object was destroyed; otherwise, false.
+ * <br /><br />
+ * If this object was destroyed, it should not be used; calling any function other than
+ * <code>isDestroyed</code> will result in a {@link DeveloperError} exception.
+ *
+ * @returns {Boolean} <code>true</code> if this object was destroyed; otherwise, <code>false</code>.
+ *
+ * @see SkyBox#destroy
+ */
+SkyBox.prototype.isDestroyed = function () {
+    return false;
+};
+ 
+/**
+ * Destroys the WebGL resources held by this object.  Destroying an object allows for deterministic
+ * release of WebGL resources, instead of relying on the garbage collector to destroy this object.
+ * <br /><br />
+ * Once an object is destroyed, it should not be used; calling any function other than
+ * <code>isDestroyed</code> will result in a {@link DeveloperError} exception.  Therefore,
+ * assign the return value (<code>undefined</code>) to the object as done in the example.
+ *
+ * @exception {DeveloperError} This object was destroyed, i.e., destroy() was called.
+ *
+ *
+ * @example
+ * skyBox = skyBox && skyBox.destroy();
+ *
+ * @see SkyBox#isDestroyed
+ */
+SkyBox.prototype.destroy = function () {
+    const command = this._command;
+    command.vertexArray = command.vertexArray && command.vertexArray.destroy();
+    command.shaderProgram =
+        command.shaderProgram && command.shaderProgram.destroy();
+    this._cubeMap = this._cubeMap && this._cubeMap.destroy();
+    return destroyObject(this);
+};
+export default SkyBox;
+ 

src/utils/common.js

@@ -73,8 +73,13 @@ function debounce(func, delay) {
         }, delay);
     };
 }
+
+function getAssetsFile(url) {
+    return new URL(`../assets/${url}`, import.meta.url).href;
+}
 export {
     getHeightByType,
     cartesianToLnglat,
-    debounce
+    debounce,
+    getAssetsFile
 }

src/utils/dataLoading.js

@@ -52,7 +52,7 @@ const dataLoading = {
     },
     addGridLayer: async function (viewer, url, gridServiceName, gridDataCallBack, show) {
         fetch(url).then(res => res.json()).then(async result => {
-            console.log("result", result)
+            // console.log("result", result)
             // 方式1.使用图元的方式加载
             const tmpPrimitives = new Cesium.PrimitiveCollection();
             const labelPrimitives = new Cesium.LabelCollection({ "name": gridServiceName + "_label" });
@@ -432,7 +432,7 @@ const dataLoading = {
             const instance = new Cesium.GeometryInstance({
                 geometry: new Cesium.GroundPolylineGeometry({
                     positions: polylinePositions,
-                    width: 1.0
+                    width: 3.0
                 }),
                 id: JSON.stringify(feature.properties)
             });
@@ -448,11 +448,38 @@ const dataLoading = {
         tmpPrimitives.show = show;
         viewer.scene.primitives.add(tmpPrimitives);
 
+        if(show){
+            // // 获取图元的包围盒
+            // if (tmpPrimitives.length) {
+            //     var polyPositions = tmpPrimitives.get(0).geometryInstances.geometry._positions;
+            //     var boundingSphere = Cesium.BoundingSphere.fromPoints(polyPositions); //获取面的中心点
+            //     if (boundingSphere) {
+            //         // polyCenter.z+=2000
+            //         // viewer.camera.flyTo({
+            //         //     destination : polyCenter,
+            //         //     orientation: {//使用欧拉角
+            //         //         heading: Cesium.Math.toRadians(0.0),//使用弧度的形式
+            //         //         pitch: Cesium.Math.toRadians(-90.0),
+            //         //         roll: 0.0
+            //         //     },
+            //         //     duration:3,//设置飞行时间，单位为秒
+            //         //     maximumHeight:1000,//最大的飞行高度
+            //         // });
+            //         viewer.camera.flyToBoundingSphere(boundingSphere);
+            //     }
+            // }
+            dataLoading.focusPrimitivesCollection(tmpPrimitives);
+        }
+    },
+    focusPrimitivesCollection(primitives){
         // 获取图元的包围盒
-        if (tmpPrimitives.length) {
+        if (primitives.length) {
-            var polyPositions = tmpPrimitives.get(0).geometryInstances.geometry._positions;
+            // Cesium 会自动释放该 Primitive 关联的所有 GeometryInstance 的资源（如 GPU 内存、纹理等）
-            var boundingSphere = Cesium.BoundingSphere.fromPoints(polyPositions); //获取面的中心点
+            // 只有图元第一次加载的时候才有效
-            if (boundingSphere) {
+            var polyPositions = primitives.get(0).geometryInstances?.geometry?._positions;
+            
+            if (polyPositions) {
+                var boundingSphere = Cesium.BoundingSphere.fromPoints(polyPositions); //获取面的中心点
                 // polyCenter.z+=2000
                 // viewer.camera.flyTo({
                 //     destination : polyCenter,
@@ -464,16 +491,14 @@ const dataLoading = {
                 //     duration:3,//设置飞行时间，单位为秒
                 //     maximumHeight:1000,//最大的飞行高度
                 // });
-                viewer.camera.flyToBoundingSphere(boundingSphere);
+                boundingSphere&&viewer.camera.flyToBoundingSphere(boundingSphere);
             }
-
         }
-
     },
     loadTileset: async (viewer, tilesetUrl, name, isZoom = true) => {
         try {
             const tileset = await Cesium.Cesium3DTileset.fromUrl(tilesetUrl, {
-                baseScreenSpaceError: 32,//默认16，定义了瓦片加载的基础屏幕空间误差。数值越大，加载的瓦片精度越低、越模糊，但加载速度会更快，可根据场景和需求适当增大该值，如设置为 1024 等
+                baseScreenSpaceError: 8,//32,//默认16，定义了瓦片加载的基础屏幕空间误差。数值越大，加载的瓦片精度越低、越模糊，但加载速度会更快，可根据场景和需求适当增大该值，如设置为 1024 等
                 skipScreenSpaceErrorFactor: 64,//控制跳过的屏幕空间误差级别，值越大，跳过的级别越多，加载速度越快，但可能会导致细节丢失，可根据实际情况调整，如设置为 16 等
                 maximumScreenSpaceError: 120,//设置瓦片加载的最大屏幕空间误差，超过该值的瓦片将不会被加载。增大此值可以减少加载的数据量，加快加载速度，但可能会降低远处瓦片的显示质量，可将其数值加大
                 // maximumMemoryUsage: 128, // 内存分配变小有利于倾斜摄影数据回收，提升性能体验