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

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

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/alisa_lisa/article/details/88028559