cesium----添加3D Ttiles并且移动位置

怼烎@ 2022-03-15 01:28 2089阅读 0赞

# 添加3D模型的两种方式 #

#### entities方式添加 ####

*  该方法创建一个实体，实体要有关联的几何图形，并且实体必须要设置位置，否则场景中显示不出来
 *  通过指定 model 的 position 和 orientation 来控制模型的位置，对模型进行精确变换的难度较大
 *  对相机操作时提供了较为方便的 viewer.trackedEntity 函数
 *  对模型进行缩放、变换等操作，需要修改 [object.id][] (Entity 类型) 中 model(ModelGraphics 类型) 的 scale 和 nodeTransformations

var entity = viewer.entities.add({  
        position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706), 
        model : {  uri : '../static/Cesium/Assets/Tileset/tileset.json' }
    });
    viewer.trackedEntity = entity; // 镜头追踪，将镜头固定在对象上

#### primitives方式添加 ####

*  通过 modelMatrix 控制模型的位置和方向，可进行较为精确的模型变换
 *  追踪 model 较为复杂，需要手动操作相机变换
 *  对模型进行缩放、变换等操作，可以直接修改 object.primitive(model 类型) 中的 scale 和 modelMatrix

var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ 
        url: ../static/Cesium/Assets/Tileset/tileset.json,  //数据路径 
        maximumScreenSpaceError: 2,        //最大的屏幕空间误差
        maximumNumberOfLoadedTiles: 1000,  //最大加载瓦片个数
        modelMatrix: m //形状矩阵
    }));

#### 删除3D模型 ####

viewer.entities.remove(tileset)
          viewer.scene.primitives.remove(tileset)

### 移动3D模型位置 ###

*  1、自己获取偏移量

// 计算偏移量
          var translation = Cesium.Cartesian3.fromArray([95, 0, 0])
          // 创建Matrix4实例
          var m = Cesium.Matrix4.fromTranslation(translation)
          // 赋值
          this.tileset.modelMatrix = m

*  2、计算偏移量

// 经纬度等
          var longitude = 113.23333
          var latitude = 23.16667
          var height = 0
          // var heading = 0 // 方位角
          // 模型加载完毕后的回调
          tileset.readyPromise.then(function (argument) { 
            // 1、旋转
            let hpr = new Cesium.Matrix3()
            // new Cesium.HeadingPitchRoll(heading, pitch, roll)
            // heading围绕负z轴的旋转。pitch是围绕负y轴的旋转。Roll是围绕正x轴的旋转
            let hprObj = new Cesium.HeadingPitchRoll(Math.PI, Math.PI, Math.PI)
    
            // Cesium.Matrix3.fromHeadingPitchRoll （headingPitchRoll，result）
            hpr = Cesium.Matrix3.fromHeadingPitchRoll(hprObj, hpr)
    
            // 2、平移
            // 2.3储存平移的结果
            let modelMatrix = Cesium.Matrix4.multiplyByTranslation(
              // 2.1从以度为单位的经度和纬度值返回Cartesian3位置
              // 2.2计算4x4变换矩阵
              Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(longitude, 				latitude, height)), new Cesium.Cartesian3(), new Cesium.Matrix4()
           	  )
            /// 3、应用旋转
            // Cesium.Matrix4.multiplyByMatrix3 （矩阵，旋转，结果）
            Cesium.Matrix4.multiplyByMatrix3(modelMatrix, hpr, modelMatrix)
            tileset._root.transform = modelMatrix
          })
          viewer.zoomTo(tileset)

## 了解cesium中的坐标转化 ##

[cesium][]中常用的坐标有两种WGS84地理坐标系和笛卡尔空间坐标系（世界坐标）。

*  WGS84坐标一般以经纬度来指明一个地点，原点在椭球的质心 。
 *  笛卡尔空间坐标系常用来做一些空间位置变换如平移旋转缩放等等，坐标原点在椭球的中心 。

屏幕坐标----------------------------------------------->Pick

世界坐标----------------------------------------------->Cartesian

地理坐标（弧度） ---------------------------------->cartographic

经纬度坐标-------------------------------------------->Point

#### 1.坐标系 ####

new Cesium.Cartesian2(1,1) //表示一个二维笛卡尔坐标系，也就是直角坐标系（屏幕坐标系）
    new Cesium.Cartesian3(1,1,1) //表示一个三维笛卡尔坐标系，也是直角坐标系(真实世界的坐标系)

#### 2. 二维屏幕坐标系到三维坐标系的转换 ####

var pick1= scene.globe.pick(viewer.camera.getPickRay(pt1), scene) 
    //其中pt1为一个二维屏幕坐标。

#### 3. 三维坐标到地理坐标的转换 ####

var geoPt1= scene.globe.ellipsoid.cartesianToCartographic(pick1) 
    //其中pick1是一个Cesium.Cartesian3对象。

#### 4. 地理坐标到经纬度坐标的转换 ####

var point1=[geoPt1.longitude / Math.PI * 180,geoPt1.latitude / Math.PI * 180]; 
    //其中geoPt1是一个地理坐标。

#### 5. 经纬度坐标转地理坐标（弧度） ####

var cartographic = Cesium.Cartographic.fromDegree(point) //point是经纬度值
    var coord_wgs84 = Cesium.Cartographic.fromDegrees(lng, lat, alt);//单位：度，度，米

#### 6. 经纬度坐标转世界坐标 ####

var cartesian = Cesium.Cartesian3.fromDegree(point)

#### 7. 计算两个三维坐标系之间的距离 ####

var d = Cesium.Cartesian3.distance(
        new Cesium.Cartesian3(pick1.x, pick1.y, pick1.z), 
        new Cesium.Cartesian3(pick3.x, pick3.y, pick3.z)
    ); 
    //pick1、pick3都是三维坐标系

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70]

[object.id]: http://object.id
[cesium]: https://www.baidu.com/s?wd=cesium&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70]: /images/20220315/fa2d8456941448ceb5febf5aeabaf408.png