cesium----添加3D Ttiles并且移动位置添加3D模型的两种方式

63 阅读 0 评论 42 点赞

我是靠谱客的博主忧心烧鹅，最近开发中收集的这篇文章主要介绍cesium----添加3D Ttiles并且移动位置添加3D模型的两种方式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

添加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都是三维坐标系