【cesium】加载并定位 3D Tileset

一. 介绍

首页加载 3D Tileset 模型，然后通过转换坐标并定位到指定位置。

二. 效果

三. 实现

// index.vue

<template>
  <div class="viewer">
    <vc-viewer @ready="ready">
      <vc-layer-imagery>
        <vc-provider-imagery-tianditu
          protocol="http"
          map-style="img_w"
          token="436ce7e50d27eede2f2929307e6b33c0"
          :projectionTransforms="projectionTransforms"
        ></vc-provider-imagery-tianditu>
      </vc-layer-imagery>
    </vc-viewer>
  </div>
</template>

<script>
import {
     update3dtilesMaxtrix } from "../utils";
export default {
    
  data() {
    
    return {
    
      mapStyle: "6",
      ltype: "0",
      projectionTransforms: {
     from: "WGS84", to: "GCJ02" }
    };
  },
  methods: {
    
    // 地图初始化
    ready(cesiumInstance) {
    
      const {
     Cesium, viewer } = cesiumInstance;
      window.$cesiumInstance = cesiumInstance;
      window.Cesium = Cesium;
      window.viewer = viewer;
      
      this.loadTile();
    },
    // 加载 3dtiles 模型
    loadTile() {
    
      const {
     Cesium, viewer } = window.$cesiumInstance;
      const scene = viewer.scene; // 创建场景

      // 向集合添加一个原语。
      const tileset = scene.primitives.add(
        new Cesium.Cesium3DTileset({
    
          url: "http://192.168.0.1/sppmodel/1/tileset.json", // 还可以是json、http链接等，使用自己的地址
          dynamicScreenSpaceError: true,
          cullWithChildrenBounds: false,
          skipLevels: 0,
          maximumScreenSpaceError: 0
        })
      );

      tileset.readyPromise
        .then(function (tileset) {
    
          // 坐标转换和定位
           let params = {
    
            tx: 117.227267, //模型中心X轴坐标（经度，单位：十进制度）
            ty: 31.820567, //模型中心Y轴坐标（纬度，单位：十进制度）
            tz: 0, //模型中心Z轴坐标（高程，单位：米）
            rx: 0, //X轴（经度）方向旋转角度（单位：度）
            ry: 0, //Y轴（纬度）方向旋转角度（单位：度）
            rz: 0, //Z轴（高程）方向旋转角度（单位：度）
          };
          update3dtilesMaxtrix(tileset, params);
          
          const default_headingPitchRange = new Cesium.HeadingPitchRange(0.3, -0.2, tileset.boundingSphere.radius * 2.0);
          viewer.flyTo(tileset, {
      offset: default_headingPitchRange, });
        })
        .catch(function (error) {
    
          console.log(error);
        });
    },
  },
};
</script>

<style>
.viewer {
    
  width: 100%;
  height: 100%;
}
</style>

// update3dtilesMaxtrix.js

// let params = {
    
// tx: 120.257, //模型中心X轴坐标（经度，单位：十进制度）
// ty: 31.226, //模型中心Y轴坐标（纬度，单位：十进制度）
// tz: 2800, //模型中心Z轴坐标（高程，单位：米）
// rx: 0, //X轴（经度）方向旋转角度（单位：度）
// ry: 0, //Y轴（纬度）方向旋转角度（单位：度）
// rz: -1 //Z轴（高程）方向旋转角度（单位：度）
// };

export const update3dtilesMaxtrix = function (tileset, params) {
    
    //旋转
    let Cesium = window.Cesium
    let mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
    let my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
    let mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
    let rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
    let rotationY = Cesium.Matrix4.fromRotationTranslation(my);
    let rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
    //平移
    let position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, params.tz);
    let m = Cesium.Transforms.eastNorthUpToFixedFrame(position);

    let scale = Cesium.Matrix4.fromUniformScale(0.85);
    // //缩放
    Cesium.Matrix4.multiply(m, scale, m);
    //旋转、平移矩阵相乘
    Cesium.Matrix4.multiply(m, rotationX, m);
    Cesium.Matrix4.multiply(m, rotationY, m);
    Cesium.Matrix4.multiply(m, rotationZ, m);
    //赋值给tileset
    tileset._root.transform = m;
    // return m;
}