Cesium开发过程问题记录

2024年5月5日 互联网

Cesium开发过程问题记录

  • 一、camera使用lookAt方法
  • 二、Cesium常见的几个类型的坐标转换
    • 1. 经纬度转换为世界坐标
    • 2. 世界坐标转换为经纬度
    • 3.弧度和经纬度
    • 4.屏幕坐标和世界坐标相互转换
  • 三、海量Model数据加载优化
    • 1.ModelInstanceCollection相关属性文档
    • 2.ModelInstanceCollection使用

一、camera使用lookAt方法

在监听或者制作动效是，camera是我们常用的一个接口对象，这里的lookAt方法可以快速定位到我们要查看的元素位置，但在使用时发现几个问题：

  1. cesium初始化时进行定义的鼠标控制相机功能发生改变，有的操作甚至失效
  2. 后续使用到flyTo出现场景使用的一些异常

所以我们最好再使用lookAt方法时进行下面lookAtTransform方法的调用

	viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

二、Cesium常见的几个类型的坐标转换

1. 经纬度转换为世界坐标

第一种方式：直接转换:

	Cesium.Cartesian3.fromDegrees(longitude, latitude, height, ellipsoid, result)

longitude:经度，latitude:纬度，height:高度，ellipsoid:椭球体:

第二种方式：先转换成弧度再转换

	var ellipsoid=viewer.scene.globe.ellipsoid;var cartographic=Cesium.Cartographic.fromDegrees(lng,lat,alt);var cartesian3=ellipsoid.cartographicToCartesian(cartographic);

2. 世界坐标转换为经纬度

	var ellipsoid=viewer.scene.globe.ellipsoid;var cartesian3=new Cesium.cartesian3(x,y,z);var cartographic=ellipsoid.cartesianToCartographic(cartesian3);var lat=Cesium.Math.toDegrees(cartograhphic.latitude);var lng=Cesium.Math.toDegrees(cartograhpinc.longitude);var alt=cartographic.height;

同理，得到弧度还可以用

Cartographic.fromCartesian

3.弧度和经纬度

经纬度转弧度：

	Cesium.Math.toRadians(degrees)

弧度转经纬度：

	Cesium.Math.toDegrees(radians)

有几个在使用相机设置参数中特别需要注意，下面举个很简单的例子：

	const { heading, pitch, roll } = viewer.camera;console.log({ heading, pitch, roll });// 弧度const radians = Cesium.Math.toRadians(heading)console.log(radians)// 角度const degrees = radians * (180 / Math.PI);console.log(degrees)

4.屏幕坐标和世界坐标相互转换

屏幕转世界坐标：

	var pick1 = new Cesium.Cartesian2(0,0);var cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(pick1),viewer.scene);

注意这里屏幕坐标一定要在球上，否则生成出的cartesian对象是undefined

世界坐标转屏幕坐标

	Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, Cartesian3);

三、海量Model数据加载优化

模型数据大多数将包括原始COLLADA文件.dae、glTF文件.gltf和/或 二进制glTF文件.glb。在Cesium应用程序中不需要使用原始的COLLADA文件。
在进行Model数据内容加载的情况下，在数据量达到一定量级，影响整体前端浏览的帧率以及效果，对比一般情况下entiy与primitive的加载方式，这里我们选择使用ModelInstanceCollection方法。

1.ModelInstanceCollection相关属性文档

文档截图

该内容在查阅官方文档时会发现不存在，这时需要下载源码，对相关方法文件的声明进行修改，修改jsdoc标识的@private为@public，运行npm run generateDocumentation重新编译后可以进行查看。Instances同理。

2.ModelInstanceCollection使用

经过简单测试，同时创建浏览 10000 model，通过ModelInstanceCollection，fps约为普通创建的2倍左右，下面时简单的使用代码示例，仅作参考：

let modelUrl = "../model/Cesium_Air.glb";let geometry = [{lontitude: 117, latitude: 25, altitude: 0},{lontitude: 118, latitude: 24, altitude: 500},...
];let instances = [];
for (let i = 0; i < geometry.length; i++) {let position = geometry[i];let cartesian = Cesium.Cartesian3.fromDegrees(position.lontitude, position.latitude, position.altitude);// 数据内容定义let modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(cartesian, new Cesium.HeadingPitchRoll(0, 0, 0)); // 旋转 - 针对模型进行设置Cesium.Matrix4.multiplyByUniformScale(modelMatrix, 0.01, modelMatrix); // 大小比例 - 针对模型进行设置instances.push({ modelMatrix: modelMatrix });
}let primitive = new Cesium.ModelInstanceCollection({url: modelUrl,instances: instances
});
viewer.scene.primitives.add(primitive);

后续还会陆陆续续整理相关的开发过程中遇到的问题跟大家分享

最新文章