Cesium 应用各类型地理数据

# 加载GEOJSON数据

# KML数据

# CZML数据

const czml = [
	{
		id: "document",
		name: "CZML Point - Time Dynamic",
		version: "1.0"
	},
	{
		id: "point",
		availability: "2012-08-04****/****", // 物体在什么时间范围可用
		position: {
			eoch: "2012-08-04****", // 设置物体起始时间
			cartographicDegrees: [***], // 设置四个维度, 1维是时间, 2维是精度, 3纬度, 4高度
		},		
		point: {
			color: {**},
			outlineColor: {rgb***},
			outlineWidth: 3,
			pixelSize: 15
		}
	}
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

加载czml数据

...
const viewer = new Cesium.Viewer('cesiumContainer', {
  // 是否显示信息窗口
  infoBox: false,
  shouldAnimate: true
})
...
let promiseData = Cesium.CzmlDataSource.load(czml);
promiseData.then((dataSource) => {
  viewer.dataSources.add(dataSource);
})
...

1
2
3
4
5
6
7
8
9
10
11
12

# 案例: 追踪航班飞行

# 3DTiles与性能监控

3D Tiles: 使用 3D Tiles 将建筑 CAD 模型与摄影测量数据融合，数据由 Bentley Systems 提供。

https://github.com/CesiumGS/3d-tiles

...
// 添加3D 建筑
let tiles3d = new Cesium.createOsmBuildings()
const osmBuildings = viewer.scene.primitives.add(tiles3d)

1
2
3
4

数据解析: tileset.json

{
  root: { // 主物体
    "refine": "ADD", // 对物体的处理  是添加或者替换
    "content": {
      "uri": "parent.b3dm", // 物体贴图文件
      "boundingVolume": {
        "regon": [****] // 物体范围
      }
    }
  },
  "children": [ // 子物体 如多个瓦片
    
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const tileset = new Cesium.Cesium3DTileset({
  url: './tileset.json',
})
viewer.scene.primitives.add(tileset);
tileset.readyPromise.then(tileset => {
  viewer.zoomTo(tileset)
})

1
2
3
4
5
6
7

上次更新: 2023/06/10, 12:06:41

← Cesium 学习在浏览器中直接使用npm包→