1.CZML（Cesium Language）
Cesium ZML (CZML) 是一种用于描述Cesium中场景的格式。它允许以一种简洁的方式定义时间动态的实体、属性和事件。
CZML数据由一个或多个CZML包组成，每个CZML包包含一个或多个CZML对象。每个CZML对象都有一个唯一的ID和一系列的属性。这些属性可以是位置、方向、比例尺、颜色等等，可以根据需要自定义。
下面是一个简单的CZML示例：
[
{
"id": "document",
"name": "CZML Example",
"version": "1.0"
},
{
"id": "ellipse",
"name": "Red Ellipse",
"ellipse": {
"semiMajorAxis": {
"number": 500000.0
},
"semiMinorAxis": {
"number": 300000.0
},
"material": {
"solidColor": {
"color": {
"rgba": [255, 0, 0, 128]
}
}
}
},
"position": {
"cartographicDegrees": [-75.0, 40.0, 0.0]
},
"availability": "2012-08-04T16:00:00Z/2012-08-04T17:00:00Z"
}
]
在上面的示例中，CZML数据包含两个对象：一个是文档对象（document），另一个是椭圆对象（ellipse）。
文档对象具有以下属性：
- "id"：唯一标识符，用于引用该对象。
- "name"：对象的名称。
- "version"：CZML版本号。
椭圆对象具有以下属性：
- "id"：唯一标识符。
- "name"：对象的名称。
- "ellipse"：椭圆的属性，包括半长轴和半短轴的长度以及材质。
- "position"：对象的位置，使用地理坐标表示。
- "availability"：对象的可用时间范围。
这个示例描述了一个红色的椭圆，在地理坐标（经度-75.0，纬度40.0）处，半长轴长度为500,000米，半短轴长度为300,000米。椭圆的材质是红色半透明。它的可用时间范围是从2012年8月4日16:00到17:00。
CZML数据格式非常灵活，可以描述各种类型的对象和动画效果。开发者可以根据自己的需求定义不同的属性和对象，并根据时间进行动态的更新和演示。
- 加载一个简单的点标记：
var viewer = new Cesium.Viewer("cesiumContainer", {
timeline: false,
animation: false,
vrButton: false,
sceneModePicker: false,
infoBox: true,
scene3DOnly: false,
});
var czml = [
{
id: "document",
name: "CZML Model",
version: "1.0",
},
{
id: "aircraft model",
name: "Cesium Air",
position: {
cartographicDegrees: [114.39278, 30.52357, 10.0], //数据加载位置
},
point: {
color: {
rgba: [255, 0, 0, 255]
},
pixelSize: 100
}
},
];
var dataSourcePromise = viewer.dataSources.add(
Cesium.CzmlDataSource.load(czml)
);
dataSourcePromise.then(function (dataSource) {
entity = dataSource.entities.getById("aircraft model");
})
//定位过去
viewer.zoomTo(entity);
这个示例中的CZML描述了一个具有名称、位置和样式的点标记。
cartographicDegrees数组指定了点的经度、纬度和高度。point属性定义了点的样式，其中color设置为红色，pixelSize设置为10表示点的大小。
2.加载一个模型
var viewer = new Cesium.Viewer("cesiumContainer", {
timeline: false,
animation: false,
vrButton: false,
sceneModePicker: false,
infoBox: true,
scene3DOnly: false,
});
var czml = [
{
id: "document",
name: "CZML Model",
version: "1.0",
},
{
id: "aircraft model",
name: "Cesium Air",
position: {
cartographicDegrees: [114.39278, 30.52357, 10.0], //数据加载位置
},
model: {
gltf: "./3D格式数据/glb/Cesium_Air.glb", //模型路径URL
scale: 2.0, //缩放比例
},
},
];
var dataSourcePromise = viewer.dataSources.add(
Cesium.CzmlDataSource.load(czml)
);
dataSourcePromise.then(function (dataSource) {
entity = dataSource.entities.getById("aircraft model");
})
//定位过去
viewer.zoomTo(entity);
2.glTF（GL Transmission Format）
是一种开放的文件格式，用于在不同的3D应用程序和引擎之间传输和加载3D模型和场景。它是一个轻量级的、基于JSON的格式，旨在提供一种标准化的格式，方便3D内容的共享和交互。
glTF格式支持包含以下几类信息的3D模型：
- 几何信息：包括模型的顶点坐标、法线、纹理坐标、颜色等几何属性。
- 材质信息：包括定义模型表面外观的材质属性，如颜色、纹理、透明度等。
- 动画信息：支持定义和播放关节动画和骨骼动画，可以实现模型的动态效果。
- 相机信息：定义模型渲染时的相机和视野参数。
- 灯光信息：包括环境光和方向光的设置，用于改变模型的光照效果。
- 场景信息：定义模型在场景中的位置和层次结构，包括模型的父子关系等。
glTF作为一种开放的格式，具有以下优势：
- 轻量级和高性能：glTF使用二进制格式表示数据，文件大小小，加载速度快，对于Web和移动平台非常适用。
- 标准化和互操作性：glTF是一种标准化的格式，被广泛支持和应用于不同的3D工具和引擎，方便不同平台之间的数据传输和共享。
- 支持动画和插件：glTF格式支持动画和插件，可以实现生动的3D动画效果，并扩展格式的功能。
- 可扩展性：glTF的设计允许添加自定义的扩展，使其适用于特定的应用场景和需求。
由于glTF具有轻量级、标准化和互操作性的特点，它常用于虚拟现实（VR）、增强现实（AR）、游戏开发、建模和可视化等领域，以及Web和移动应用中的3D内容展示和交互。
加载gltf有两种方式：
1使用entity方式加载gltf
var entity = viewer.entities.add({
position: position,
model: {
uri: "model.gltf",
minimumPixelSize : 128,
maximumScale : 500
}
});
还可以修改模型朝向
- var heading = Cesium.Math.toRadians(30);
- var pitch = Cesium.Math.toRadians(40);
- var roll = Cesium.Math.toRadians(50);
- var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
- var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);
- var entity = viewer.entities.add({
- position: position,
- orientation: orientation,
- model: {
- scale: 1,
- uri: "model.gltf",
minimumPixelSize : 128,
maximumScale : 500
- }
- });
使用实体（Entity）加载gltf模型时，并不需要显式地设置modelMatrix或使用eastNorthUpToFixedFrame函数。这是因为Cesium会根据实体的位置、方向和缩放等属性自动计算并应用正确的模型变换矩阵。
当你创建一个实体并设置其位置属性时，Cesium会自动将实体的模型放置在该位置，并自动将其转换为地球坐标系。实体的方向和缩放属性也会被考虑在内。
上述代码中，设置了实体的position属性为经纬度坐标，orientation属性为一个四元数，表示模型的旋转。然后指定gltf模型的路径，并将其作为实体的model属性值。Cesium会根据这些属性自动计算正确的模型变换矩阵，将模型放置在地球上的对应位置和方向。
2.使用primitive
注意：
在Cesium中，使用Cesium.Transforms.eastNorthUpToFixedFrame函数可以得到一个将地理坐标系（东北天）转换为固定坐标系的矩阵。如果要在地球上正确放置模型，通常需要使用这个函数来生成modelMatrix。
但并不是每个模型都需要使用eastNorthUpToFixedFrame函数生成矩阵。这取决于你的模型文件的坐标系。如果你的模型文件已经是在固定坐标系下定义位置的，且模型文件中的坐标系与地球上的坐标系匹配（通常是平移原点在地球中心的坐标系），那么可以直接将这个矩阵赋值给modelMatrix，而不需要通过eastNorthUpToFixedFrame函数进行转换。
var viewer = new Cesium.Viewer("cesiumContainer", {
animation: false, //是否显示动画工具
timeline: false, //是否显示时间轴工具
fullscreenButton: false, //是否显示全屏按钮工具
});
var origin = Cesium.Cartesian3.fromDegrees(114.39278, 30.52357, 0.0);
var modelMatrix1 = Cesium.Matrix4.fromTranslation(origin, new Cesium.Matrix4())
var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
url: './3D格式数据/glTF/CesiumMilkTruck.gltf',
modelMatrix : modelMatrix1, //Gltf数据加载位置
scale : 5 //放大倍数
}));
//移动相机
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(114.39278, 30.52357, 60.0) //相机飞入点
});
看起位置有点偏
纠正一下
var viewer = new Cesium.Viewer("cesiumContainer", {
animation: false, //是否显示动画工具
timeline: false, //是否显示时间轴工具
fullscreenButton: false, //是否显示全屏按钮工具
});
var origin = Cesium.Cartesian3.fromDegrees(114.39278, 30.52357, 0.0);
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
url: './3D格式数据/glTF/CesiumMilkTruck.gltf',
modelMatrix : modelMatrix, //Gltf数据加载位置
scale : 5 //放大倍数
}));
//移动相机
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(114.39278, 30.52357, 60.0) //相机飞入点
});
3.GeoJSON（地理JSON）和SHP（Shapefile）
这是两种常见的地理空间数据格式。
-
GeoJSON是一种基于JSON格式的地理空间数据表示方法，它可以描述点、线、面等地理要素的几何形状和属性信息。GeoJSON使用简单的文本格式，易于阅读和编写。在Cesium中，可以使用Cesium的GeoJSON加载器（
Cesium.GeoJsonDataSource）加载和显示GeoJSON数据。 -
SHP是一种常见的地理空间数据格式，它由多个文件组成，包含了几何形状、属性数据和索引等信息。SHP文件通常由.shp、.shx和.dbf等文件组成。在Cesium中，可以使用第三方库（例如
shpjs）来读取和解析SHP文件，并将其转换为Cesium支持的格式（例如GeoJSON或Cesium的实体对象），然后使用Cesium的加载器加载和显示转换后的数据。
无论选择使用GeoJSON还是SHP文件，以下是在Cesium中使用它们的一般步骤：
1. 对于GeoJSON：
以下-定义了一个FeatureCollection，其中包含两个Feature对象。每个Feature对象都有一个geometry属性来描述几何形状，这里是一个点（Point），并使用经纬度坐标表示。properties属性用于存储其他属性信息，这里只包含一个name属性来表示点的名称。
Cesium.Ion.defaultAccessToken ='your token'
var viewer = new Cesium.Viewer("cesiumContainer", {
//terrainProvider: Cesium.createWorldTerrain(),
animation: false, //是否显示动画工具
timeline: false, //是否显示时间轴工具
fullscreenButton: false, //是否显示全屏按钮工具
});
viewer.scene.globe.depthTestAgainstTerrain = false;
// 创建GeoJSON数据源
var dataSource = new Cesium.GeoJsonDataSource();
// 定义GeoJSON数据
var geoJsonData = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [0, 0]
},
"properties": {
"name": "Point 1"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [10, 10]
},
"properties": {
"name": "Point 2"
}
}
]
};
// 加载GeoJSON数据
dataSource.load(geoJsonData, {
stroke: Cesium.Color.RED,
fill: Cesium.Color.BLUE,
markerSymbol: "?"
});
// 添加加载的数据源到地球浏览器
viewer.dataSources.add(dataSource);
// 缩放到加载的数据范围
viewer.zoomTo(dataSource);
如果直接加载文件
Cesium.Ion.defaultAccessToken ='your token'
var viewer = new Cesium.Viewer("cesiumContainer", {
//terrainProvider: Cesium.createWorldTerrain(),
animation: false, //是否显示动画工具
timeline: false, //是否显示时间轴工具
fullscreenButton: false, //是否显示全屏按钮工具
});
viewer.scene.globe.depthTestAgainstTerrain = false;
var GeoJsonData = viewer.dataSources.add(
Cesium.GeoJsonDataSource.load("./your.json", {
fill: Cesium.Color.PINK, //填充色
stroke: Cesium.Color.HOTPINK, //轮廓颜色
strokeWidth: 5, //轮廓宽度
})
);
GeoJsonData.then(viewer.zoomTo(GeoJsonData))
2. 对于SHP文件：
- 使用第三方库（例如
shpjs）读取和解析SHP文件，并将其转换为Cesium支持的格式，例如GeoJSON。
4.3D Tiles
3D Tiles是一种用于高效存储、传输和渲染大规模3D地理空间数据的开放标准。它可以用于表示城市模型、地形、点云、室内空间等各种类型的3D数据。3D Tiles使用了基于空间划分的数据结构，将3D场景分解为一系列可独立加载和渲染的瓦片（tiles），从而实现了对大规模3D数据的高效管理和可视化。
相比于其他数据格式，3D Tiles具有以下优势：
- 高效性能：3D Tiles使用了空间划分的数据结构，可以将3D场景分解为多个瓦片，每个瓦片都可以独立加载和渲染。这种分层的数据组织方式可以提高数据传输和渲染的效率，使得在浏览器或移动设备上加载和浏览大规模的3D数据变得更加高效。
- 灵活性：3D Tiles支持多种类型的3D数据，包括点云、三角网格、线和面等。它提供了灵活的数据模型和属性定义，可以适应不同类型的3D数据需求。此外，3D Tiles还支持多层级的瓦片，可以根据需要选择加载不同层级的数据，从而实现对细节级别的控制。
- 可扩展性：3D Tiles的设计考虑了数据的可扩展性。它支持数据的分块和分级存储，可以根据需要动态加载和卸载数据，以适应不同场景下的数据规模和性能要求。这使得3D Tiles非常适合处理大规模的地理空间数据，如全球地形、城市模型等。
在cesium中加载3dtiles模型如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cesium 3D Tiles Demo</title>
<style>
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<script src="./Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="./Build/Cesium/Widgets/widgets.css"></script>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
Cesium.Ion.defaultAccessToken ='your token'
// 创建Cesium地球浏览器
var viewer = new Cesium.Viewer("cesiumContainer");
// 加载3D Tiles数据
var tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: 'your/tileset.json'
})
);
// 调整相机视角
viewer.zoomTo(tileset);
</script>
</body>
</html>
5.KML（Keyhole Markup Language）
是一种用于描述地理数据的标记语言，最初由Keyhole Inc.开发，后来被Google收购并成为Google Earth的标准数据格式。KML文件通常用于存储和传输地理信息，包括地点、路径、多边形、图标等。
var viewer = new Cesium.Viewer("cesiumContainer", {
animation: false, //是否显示动画工具
timeline: false, //是否显示时间轴工具
fullscreenButton: false, //是否显示全屏按钮工具
});
var kmlData = viewer.dataSources.add(Cesium.KmlDataSource.load(
'./your.kml',
{
camera: viewer.scene.camera,
canvas: viewer.scene.canvas,
})
);
kmlData.then(viewer.zoomTo(kmlData))
