添加3DTiles偏移调试台和配置

README.md

@@ -37,7 +37,7 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 
     - 刘梦祥
 
-  - 默认加载西虹桥三维模型和盘龙天地三维模型
+  - 默认加载西虹桥三维模型和蟠龙天地三维模型
 
     - 张乃文给刘梦祥数据
 

public/static/config/config.js

@@ -17,6 +17,17 @@ var userLoginConfig = {
 // var oauthUrl = "http://10.235.245.174:8888/"
 var oauthUrl = "http://121.43.55.7:10086"
 
+// 蟠龙天地偏移常量（通过调试工具得到）
+const PLTD_3DTILE_OPTIONS = {
+    rx: 0.07,
+    ry: -0.19,
+    rz: 0,
+    lon: 0,
+    height: -0.8,
+    lat: 0,
+    scale: 1
+};
+
 // 系统配置（LiuMengxiang）
 const systemConfig = {
     // 系统名称
@@ -28,14 +39,59 @@ const systemConfig = {
     // tdt_tk: "e90d56e5a09d1767899ad45846b0cefd"
     tdt_tk: "51a3c33c0ec351619c33a24461c0ba95",
     data3DTiles: {
-        "盘龙天地": {
-            "地面": "/static/data/3dTiles/pltd_3dt/dm",
-            "建筑": "/static/data/3dTiles/pltd_3dt/jz",
-            "水系": "/static/data/3dTiles/pltd_3dt/sx",
-            "小品": "/static/data/3dTiles/pltd_3dt/xp",
+        "蟠龙天地": {
+            "地面": {
+                url: "/static/data/3dTiles/pltd_3dt/dm",
+                scale: PLTD_3DTILE_OPTIONS.scale,
+                rx: PLTD_3DTILE_OPTIONS.rx,
+                ry: PLTD_3DTILE_OPTIONS.ry,
+                rz: PLTD_3DTILE_OPTIONS.rz,
+                lon: PLTD_3DTILE_OPTIONS.lon,
+                height: PLTD_3DTILE_OPTIONS.height,
+                lat: PLTD_3DTILE_OPTIONS.lat,
+            },
+            "建筑": {
+                url: "/static/data/3dTiles/pltd_3dt/jz",
+                scale: PLTD_3DTILE_OPTIONS.scale,
+                rx: PLTD_3DTILE_OPTIONS.rx,
+                ry: PLTD_3DTILE_OPTIONS.ry,
+                rz: PLTD_3DTILE_OPTIONS.rz,
+                lon: PLTD_3DTILE_OPTIONS.lon,
+                height: PLTD_3DTILE_OPTIONS.height,
+                lat: PLTD_3DTILE_OPTIONS.lat,
+            },
+            "水系": {
+                url: "/static/data/3dTiles/pltd_3dt/sx",
+                scale: PLTD_3DTILE_OPTIONS.scale,
+                rx: PLTD_3DTILE_OPTIONS.rx,
+                ry: PLTD_3DTILE_OPTIONS.ry,
+                rz: PLTD_3DTILE_OPTIONS.rz,
+                lon: PLTD_3DTILE_OPTIONS.lon,
+                height: PLTD_3DTILE_OPTIONS.height,
+                lat: PLTD_3DTILE_OPTIONS.lat,
+            },
+            "小品": {
+                url: "/static/data/3dTiles/pltd_3dt/xp",
+                scale: PLTD_3DTILE_OPTIONS.scale,
+                rx: PLTD_3DTILE_OPTIONS.rx,
+                ry: PLTD_3DTILE_OPTIONS.ry,
+                rz: PLTD_3DTILE_OPTIONS.rz,
+                lon: PLTD_3DTILE_OPTIONS.lon,
+                height: PLTD_3DTILE_OPTIONS.height,
+                lat: PLTD_3DTILE_OPTIONS.lat,
+            },
         },
         "西虹桥": {
-            "全部": "/static/data/3dTiles/xhq_3dt",
+            "全部": {
+                url: "/static/data/3dTiles/xhq_3dt",
+                scale: 1,
+                rx: 0.05,
+                ry: -0.15,
+                rz: 0,
+                lon: -0.0003,
+                height: -24.8,
+                lat: -0.0003,
+            },
         }
     }
 }

src/components/Map.vue

@@ -9,16 +9,16 @@ export default {
     return {
       // viewer3DTiles实例《systemConfig.data3DTiles keys,tile》
       viewer3DTiles: {},
-      // 3DTiles url集合《systemConfig.data3DTiles keys,url》
-      keysByUrl: {},
+      // 3DTiles options集合《systemConfig.data3DTiles keys,options》
+      keysByOptions: {},
     };
   },
   mounted() {
     window.SkySceneryConfig = {};
     for (let tileName in systemConfig.data3DTiles) {
       for (let key in systemConfig.data3DTiles[tileName]) {
-        let url = systemConfig.data3DTiles[tileName][key];
-        this.keysByUrl[tileName + key] = url;
+        let options = systemConfig.data3DTiles[tileName][key];
+        this.keysByOptions[tileName + key] = options;
       }
     }
     this.getToken();
@@ -125,6 +125,10 @@ export default {
           systemConfig.imageryProviders.forEach((url) => {
             that.loadTheWorldMapImage(url);
           });
+
+          // 设置地表透明度为 0.5（值在 0 到 1 之间，0 为完全透明，1 为不透明）
+          // viewer.scene.globe.translucency.enabled = true;
+          // viewer.scene.globe.baseColor = new SkyScenery.Color(1.0, 1.0, 1.0, 0.1);
           viewer.camera.setView({
             destination: SkyScenery.Cartesian3.fromDegrees(
               121.29818074250946,
@@ -134,8 +138,8 @@ export default {
             orientation: {
               heading: SkyScenery.Math.toRadians(356.03124515798294), // 方向
               pitch: SkyScenery.Math.toRadians(-45.31422437550821), // 倾斜角度
-              roll: SkyScenery.Math.toRadians(0.0047792745453184024)
-            }
+              roll: SkyScenery.Math.toRadians(0.0047792745453184024),
+            },
           });
 
           this.$store.commit("createdMap", true);
@@ -366,6 +370,7 @@ export default {
      * @param {*} flyto 是否自动飞行到3Dtiles
      */
     add3DTiles(keys, flyto) {
+      let that = this;
       if (this.viewer3DTiles[keys]) {
         this.viewer3DTiles[keys].show = true;
         if (flyto) {
@@ -373,7 +378,7 @@ export default {
         }
       } else {
         let option = {
-          url: this.keysByUrl[keys] + "/tileset.json",
+          url: this.keysByOptions[keys].url + "/tileset.json",
           skipLevelOfDetail: true, //开启跳级加载
           maximumMemoryUsage: 1024, //最大内存占用  推荐显存的一般
           preferLeaves: true,
@@ -383,16 +388,144 @@ export default {
         var tile = new SkyScenery.Cesium3DTileset(option);
         viewer.scene.primitives.add(tile);
 
-        if (flyto) {
-          tile.readyPromise.then(function () {
+        tile.readyPromise.then(function () {
+          // 设置相机视角
+          if (flyto) {
             viewer.zoomTo(tile);
-          });
-        }
+          }
+        });
         this.viewer3DTiles[keys] = tile;
+        setTimeout(() => {
+          this.update3DTilesStyleByKeys(
+            this.viewer3DTiles[keys],
+            Object.assign({}, this.keysByOptions[keys])
+          );
+        });
+      }
+    },
+    /**
+     * 修改3DTiles样式
+     */
+    update3DTilesStyleByKeys(tileset, options) {
+      try {
+        console.log("update3DTilesStyleByKeys options", tileset, options);
+        tileset.readyPromise.then(function () {
+          // 设置样式
+          var cartographic = SkyScenery.Cartographic.fromCartesian(
+            tileset.boundingSphere.center
+          );
+          var lon = SkyScenery.Math.toDegrees(cartographic.longitude);
+          var lat = SkyScenery.Math.toDegrees(cartographic.latitude);
+          var height = cartographic.height;
+          var surface = SkyScenery.Cartesian3.fromDegrees(lon, lat, height);
+          var offset = SkyScenery.Cartesian3.fromDegrees(
+            lon + options.lon,
+            lat + options.lat,
+            height + options.height
+          );
+
+          var translation = SkyScenery.Cartesian3.subtract(
+            offset,
+            surface,
+            new SkyScenery.Cartesian3()
+          );
+          tileset.modelMatrix = SkyScenery.Matrix4.fromTranslation(translation);
+
+          var m = tileset._root.transform;
+
+          if (options.rx != 0) {
+            const mx = SkyScenery.Matrix3.fromRotationX(
+              SkyScenery.Math.toRadians(options.rx)
+            );
+            const rotate = SkyScenery.Matrix4.fromRotationTranslation(mx);
+            SkyScenery.Matrix4.multiply(m, rotate, m);
+          }
+
+          if (options.ry != 0) {
+            const my = SkyScenery.Matrix3.fromRotationY(
+              SkyScenery.Math.toRadians(options.ry)
+            );
+            const rotate = SkyScenery.Matrix4.fromRotationTranslation(my);
+            SkyScenery.Matrix4.multiply(m, rotate, m);
+          }
+
+          if (options.rz != 0) {
+            const mz = SkyScenery.Matrix3.fromRotationZ(
+              SkyScenery.Math.toRadians(options.rz)
+            );
+            const rotate = SkyScenery.Matrix4.fromRotationTranslation(mz);
+            SkyScenery.Matrix4.multiply(m, rotate, m);
+          }
+
+          if (options.scale != 1) {
+            const _scale = SkyScenery.Matrix4.fromUniformScale(options.scale);
+            SkyScenery.Matrix4.multiply(m, _scale, m);
+          }
+          tileset._root.transform = m;
+        });
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    /**
+     * 修改3DTiles样式(测试)
+     */
+    update3DTilesStyle(keys, options) {
+      if (this.viewer3DTiles[keys]) {
+        let tileset = this.viewer3DTiles[keys];
+        this.update3DTilesStyleByKeys(tileset, options);
+      } else {
+        console.log("update3DTilesStyle未找到3DTiles模型实例!keys:", keys);
+      }
+    },
+    adjust3DTilesPosition(tileset, options) {
+      var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
+      var lon = Cesium.Math.toDegrees(cartographic.longitude);
+      var lat = Cesium.Math.toDegrees(cartographic.latitude);
+      var height = cartographic.height;
+      var surface = Cesium.Cartesian3.fromDegrees(lon, lat, height);
+      var offset = Cesium.Cartesian3.fromDegrees(
+        lon + options.lon,
+        lat + options.lat,
+        height + options.height
+      );
+
+      var translation = Cesium.Cartesian3.subtract(
+        offset,
+        surface,
+        new Cesium.Cartesian3()
+      );
+      tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
+
+      // var m = Cesium.Transforms.eastNorthUpToFixedFrame(surface);
+      var m = tileset._root.transform;
+
+      if (options.rx != 0) {
+        const mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(options.rx));
+        const rotate = Cesium.Matrix4.fromRotationTranslation(mx);
+        Cesium.Matrix4.multiply(m, rotate, m);
+      }
+
+      if (options.ry != 0) {
+        const my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(options.ry));
+        const rotate = Cesium.Matrix4.fromRotationTranslation(my);
+        Cesium.Matrix4.multiply(m, rotate, m);
+      }
+
+      if (options.rz != 0) {
+        const mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(options.rz));
+        const rotate = Cesium.Matrix4.fromRotationTranslation(mz);
+        Cesium.Matrix4.multiply(m, rotate, m);
+      }
+
+      if (options.scale != 1) {
+        const _scale = Cesium.Matrix4.fromUniformScale(options.scale);
+        Cesium.Matrix4.multiply(m, _scale, m);
       }
+      tileset._root.transform = m;
     },
     /**
-     * 删除3DTiles(测试)
+     * 删除3DTiles
      * @author LiuMengxiang
      * @param tiles 3DTiles实例
      */
@@ -424,7 +557,7 @@ export default {
           homeVs.push(item[0] + item[1]);
         });
         // 遍历所有的3Dtiles
-        for (let keys in this.keysByUrl) {
+        for (let keys in this.keysByOptions) {
           // 如果选中的话
           if (homeVs.length > 0 && homeVs.indexOf(keys) != -1) {
             this.add3DTiles(keys, true);

src/views/HomeView.vue

@@ -5,12 +5,12 @@
     <Map ref="map" />
     <!-- 左侧图片区 -->
     <div class="home_LeftMainBox">
-      <img style="width: 500px; height: 50px" src="../assets/images/LT1.png" />
-      <img style="width: 500px; height: 246px" src="../assets/images/LM1.png" />
-      <img style="width: 500px; height: 50px" src="../assets/images/LT2.png" />
-      <img style="width: 500px; height: 246px" src="../assets/images/LM2.png" />
-      <img style="width: 500px; height: 50px" src="../assets/images/LT3.png" />
-      <img style="width: 500px; height: 246px" src="../assets/images/LM3.png" />
+      <img style="width: 450px; height: 50px" src="../assets/images/LT1.png" />
+      <img style="width: 450px; height: 246px" src="../assets/images/LM1.png" />
+      <img style="width: 450px; height: 50px" src="../assets/images/LT2.png" />
+      <img style="width: 450px; height: 246px" src="../assets/images/LM2.png" />
+      <img style="width: 450px; height: 50px" src="../assets/images/LT3.png" />
+      <img style="width: 450px; height: 246px" src="../assets/images/LM3.png" />
     </div>
     <!-- 中上部分3DTiles控件 -->
     <div class="home_CentralMainBox">
@@ -20,17 +20,68 @@
         @change="handleChangeCascader"
         :options="options"
         :props="props"
-        clearable
       ></el-cascader>
     </div>
+    <!-- 中下部分3DTiles偏移调试工具 LiuMengxiang  2024/09/11-->
+    <div class="home_CentralRBMainBox" v-if="false">
+      <h3>3DTiles样式调整</h3>
+      X轴旋转<el-input-number
+        v-model="tileStyle.rx"
+        :precision="2"
+        :step="0.01"
+        :min="-100"
+        :max="100"
+        label="X轴旋转"
+      ></el-input-number>
+      Y轴旋转<el-input-number
+        v-model="tileStyle.ry"
+        :precision="2"
+        :step="0.01"
+        :min="-100"
+        :max="100"
+        label="Y轴旋转"
+      ></el-input-number>
+      Z轴旋转<el-input-number
+        v-model="tileStyle.rz"
+        :precision="2"
+        :step="0.01"
+        :min="-100"
+        :max="100"
+        label="Z轴旋转"
+      ></el-input-number>
+      X轴偏移（单位：度）<el-input-number
+        v-model="tileStyle.lon"
+        :precision="4"
+        :step="0.0001"
+        :min="-100"
+        :max="100"
+        label="X轴偏移"
+      ></el-input-number>
+      Y轴偏移（单位：度）<el-input-number
+        v-model="tileStyle.lat"
+        :precision="4"
+        :step="0.0001"
+        :min="-100"
+        :max="100"
+        label="Y轴偏移"
+      ></el-input-number>
+      Z轴偏移（单位：度）<el-input-number
+        v-model="tileStyle.height"
+        :precision="1"
+        :step="0.1"
+        :min="-100"
+        :max="100"
+        label="Z轴偏移"
+      ></el-input-number>
+    </div>
     <!-- 右侧图片区 -->
     <div class="home_RightMainBox">
-      <img style="width: 500px; height: 50px" src="../assets/images/RT1.png" />
-      <img style="width: 500px; height: 246px" src="../assets/images/RM1.png" />
-      <img style="width: 500px; height: 50px" src="../assets/images/RT2.png" />
-      <img style="width: 500px; height: 246px" src="../assets/images/RM2.png" />
-      <img style="width: 500px; height: 50px" src="../assets/images/RT3.png" />
-      <img style="width: 500px; height: 246px" src="../assets/images/RM3.png" />
+      <img style="width: 450px; height: 50px" src="../assets/images/RT1.png" />
+      <img style="width: 450px; height: 246px" src="../assets/images/RM1.png" />
+      <img style="width: 450px; height: 50px" src="../assets/images/RT2.png" />
+      <img style="width: 450px; height: 246px" src="../assets/images/RM2.png" />
+      <img style="width: 450px; height: 50px" src="../assets/images/RT3.png" />
+      <img style="width: 450px; height: 246px" src="../assets/images/RM3.png" />
     </div>
   </div>
 </template>
@@ -48,6 +99,26 @@ export default {
       props: { multiple: true },
       options: [],
       cascaderValue: [],
+      // 3DTile调试工具中转变量
+      oldTileStyle: {
+        scale: 1,
+        rx: 0,
+        ry: 0,
+        rz: 0,
+        lon: 0,
+        height: 0,
+        lat: 0,
+      },
+      // 3DTile调试工具变量
+      tileStyle: {
+        scale: 1,
+        rx: 0,
+        ry: 0,
+        rz: 0,
+        lon: 0,
+        height: 0,
+        lat: 0,
+      },
     };
   },
   components: {
@@ -77,6 +148,20 @@ export default {
     //   });
     // });
   },
+  watch: {
+    tileStyle: {
+      handler(val, oldVal) {
+        let tileStyle_ = Object.assign({}, val);
+        tileStyle_.rx -= this.oldTileStyle.rx;
+        tileStyle_.ry -= this.oldTileStyle.ry;
+        tileStyle_.rz -= this.oldTileStyle.rz;
+        this.oldTileStyle = Object.assign({}, val);
+        // this.$refs.map.update3DTilesStyle("蟠龙天地地面", tileStyle_);
+        this.$refs.map.update3DTilesStyle("西虹桥全部", tileStyle_);
+      },
+      deep: true,
+    },
+  },
   methods: {
     handleChangeCascader(cascaderValue) {
       this.$refs.map.HomeHandleChangeCascader(Object.assign([], cascaderValue));
@@ -92,10 +177,10 @@ export default {
   overflow: hidden;
   &_LeftMainBox {
     position: fixed;
-    z-index: 9999;
+    z-index: 1;
     top: 65px;
     left: 0;
-    width: 500px;
+    width: 450px;
     height: calc(100vh - 65px);
     overflow: hidden;
     display: flex;
@@ -107,7 +192,7 @@ export default {
   }
   &_CentralMainBox {
     position: fixed;
-    z-index: 9999;
+    z-index: 1;
     left: 520px;
     top: 100px;
     width: 350px;
@@ -117,12 +202,25 @@ export default {
     flex-wrap: nowrap;
     justify-content: space-between;
   }
+  &_CentralRBMainBox {
+    position: fixed;
+    z-index: 1;
+    right: 470px;
+    bottom: 10px;
+    padding: 10px;
+    background: #fff;
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+  }
   &_RightMainBox {
     position: fixed;
-    z-index: 9999;
+    z-index: 1;
     top: 65px;
     right: 0;
-    width: 500px;
+    width: 450px;
     height: calc(100vh - 65px);
     overflow: hidden;
     display: flex;