Cesium开发:模型的CZML文件

简介: Cesium开发:模型的CZML文件

CZML是一种用来描述动态场景的JSON架构的语言,主要用于Cesium在浏览器中的展示。通过制作CZML文件,在Cesium进行数据的批量加载,省去单独循环一个一个加载对象的方式。
下边是一个简单的模型CZML文件的配置:
CZML是数组形式的JSON文件,首先有一个根节点,里边是id、name和version,修改的时候,只需要设置名称就行。

下边每个对象是一个模型的参数配置:

id必须是唯一的,name可以有相同的,properties里边可以加一些自定义的属性数据,position是模型的位置信息,orientation是模型的转角信息(heading、pitch、roll),model是模型的路径,比例等参数配置。
其中orientation需要根据模型坐标和转角进行计算,算出来一个4个元素的数组,代码如下:

let position = Cesium.Cartesian3.fromDegrees(evdata.x, evdata.y, evdata.height);

let heading = Cesium.Math.toRadians(evdata.heading);

let pitch = evdata.pitch;

let roll = 0;

let hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);

let orentation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);


//模型的czml样式文件
[

{
   

"id": "document",

"name": "name",

"version": "1.0"

},

{
   

"id": "uid1",

"name": "uid",

"properties": {
   

"status": "use"

},

"position": {
   

"cartographicDegrees": [

116.119,

39.1112,

1.01

]

},

"orientation": {
   

"unitQuaternion": [0000]

}"model": {
   

"gltf": "模型路径",

"scale": 1.0,

"minimumPixelSize": 16

}

}]
相关文章
Cesium系列:加载单个模型
Cesium如何加载单个三维模型数据
543 0
|
2月前
ThreeJs设置模型的边线
这篇文章介绍了如何在Three.js中为3D模型添加边线效果,并提供了实现这一功能的代码示例。
47 2
|
4月前
|
Web App开发 JSON JavaScript
WebGL简易教程(十五):加载gltf模型
WebGL简易教程(十五):加载gltf模型
131 1
|
4月前
|
缓存 前端开发 定位技术
Cesium加载Mapbox自定义地图
Cesium加载Mapbox自定义地图
121 0
|
7月前
|
JavaScript 前端开发 数据可视化
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
Three.js 是一个用于在 Web 上创建和显示 3D 图形的 JavaScript 库。它提供了丰富的功能和灵活的 API,使开发者可以轻松地在网页中创建各种 3D 场景、模型和动画效果。可以用来展示产品模型、建立交互式场景、游戏开发、数据可视化、教育和培训等等。这里记录一下如何在Vue项目中使用Three.js
950 4
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
|
7月前
|
数据可视化 JavaScript 定位技术
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
Cesium是一种基于WebGL开源的虚拟地球技术,可以用于构建高性能、跨平台的三维地球应用程序,它支持多种数据格式和地图服务,可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件,方便开发者进行二次开发和定制化,且可免费商用,在航空航天、国防、城市规划、教育等领域得到了广泛应用。
376 0
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
|
7月前
|
JavaScript 开发工具 git
Three.js第1篇,Three.js新手教学,如何在项目中使用Three.js(three.js使用流程详细,three.js的使用方式,three.js创建3d物体)
Three.js封装了WebGL的底层细节,是一款运行在浏览器中的 3D 引擎,可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象,目前在Git上已经拥有90k+的star。
170 0
Three.js第1篇,Three.js新手教学,如何在项目中使用Three.js(three.js使用流程详细,three.js的使用方式,three.js创建3d物体)
|
7月前
|
存储
THREEJS实战6_加载fbx模型
THREEJS实战6_加载fbx模型
839 1
|
JSON 算法 数据可视化
⚡Three.js-在场景中导入3D动画模型
⚡Three.js-在场景中导入3D动画模型
47173 4
⚡Three.js-在场景中导入3D动画模型
|
Web App开发 算法 前端开发
Cesium开发: Draco模型压缩
Cesium开发: Draco模型压缩
568 1