本文介绍Cesium如何加载空间数据,空间数据即明确定义在三维空间中的数据,空间数据包括以下几类:1、几何形体(点、线、面、体)2、标签(文字图标等)3、几何文件(geojson、kml、czml)4、三维模型(gltf、gltf)。3D Tiles 作为Cesium提出的处理大型三维数据的格式暂不在本文介绍。
在前一篇文章中讲到,Entity 是由 Primitive 封装而来API,空间几何数据的实现几乎是由他们提供,几何要素从类型上区分可划分为点、线、面、体等,如下表所示。
功能 | Entity API | Primitive API |
---|---|---|
创建点要素,可控制点颜色、轮廓等 | PointGraphics | - |
创可设定宽度的折线 | PolylineGraphics | PolylineGeometry |
各种几何要素轮廓线、不可设置宽度,轮廓线种类包括:立方体、圆/椭圆、廊、圆柱/锥、球/椭球、矩形、多边形、面、墙、管状线等 | - | SimplePolylineGeometry |
圆形面要素 | - | CircleGeometry |
廊状面要素 | CorridorGraphics | CorridorGeometry |
椭圆状面要素 | EllipseGraphics | EllipseGeometry |
矩形面要素 | RectangleGraphics | RectangleGeometry |
多边形面要素 | PolygonGraphics | PolygonGeometry |
平面要素 | PlaneGraphics | PlaneGeometry |
立方体要素 | BoxGraphics | BoxGeometry |
圆柱、圆锥体要素 | CylinderGraphics | CylinderGeometry |
椭圆体要素 | EllipsoidGraphics | EllipseGeometry |
管状体要素 | PolylineGraphics | PolylineGeometry |
球体要素 | - | SphereGeometry |
墙体要素 | WallGraphics | WallGeometry |
Entity支持的属性如下,Entity添加几何体后返回Viewer对象
const point = viewer.entities.add({
// 定位点
position: Cesium.Cartesian3.fromDegrees(117, 40, 100),
// 点
point: {
pixelSize: 10,// 大小
color: Cesium.Color.RED, //点的颜色
outlineWidth: 4, // 外框大小
outlineColor: Cesium.Color.WHITE, //外框颜色
},
});
const line = viewer.entities.add({
name: "red_line",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([117, 40, 118, 40]), //线位置
width: 5, // 宽度
material: Cesium.Color.RED, // 材质
clampToGround: true, // 贴地
}
});
const outlineOnly = viewer.entities.add({
name: "red_box_outline",
position: Cesium.Cartesian3.fromDegrees(117.2, 40.0, 300.0),
box: {
// 维度
dimensions: new Cesium.Cartesian3(300.0, 300.0, 300.0),
fill: false, // 填充面
outline: true, // 开启边框
outlineColor: Cesium.Color.RED ,// 边框颜色
},
});
const box = Cesium.BoxOutlineGeometry.fromDimensions({
dimensions: new Cesium.Cartesian3(500000.0, 500000.0, 500000.0),
});
const geometry = Cesium.BoxOutlineGeometry.createGeometry(box);
// 创建boxOutline的几何实例
let boxOutlineInstance = new Cesium.GeometryInstance({
geometry: geometry,
modelMatrix: Cesium.Matrix4.multiplyByTranslation(
Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(170, 40)
),
new Cesium.Cartesian3(0.0, 0.0, 1000.0),
new Cesium.Matrix4()
),
id: "boxOutline",
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED),
},
});
// 创建图元
let primitive = new Cesium.Primitive({
geometryInstances: boxOutlineInstance,
appearance: new Cesium.PerInstanceColorAppearance({
flat: true,
faceForward: true,
translucent: false,
closed: false,
}),
asynchronous: false,
show: true,
modelMatrix: Cesium.Matrix4.IDENTITY,
vertexCacheOptimize: false,
interleave: false,
compressVertices: true,
releaseGeometryInstances: true,
allowPicking: true,
cull: true,
debugShowBoundingVolume: false,
shadows: Cesium.ShadowMode.DISABLED,
});
viewer.scene.primitives.add(primitive);
const redPlane = viewer.entities.add({
name: "red_plane",
position: Cesium.Cartesian3.fromDegrees(117.1, 40.0, 300.0),
plane: {
plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Y, 0.0),
dimensions: new Cesium.Cartesian2(500.0, 300.0),
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
const redBox = viewer.entities.add({
name: "red_box",
position: Cesium.Cartesian3.fromDegrees(117.3, 40.0, 400.0),
box: {
dimensions: new Cesium.Cartesian3(400.0, 200.0, 300.0),
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
const label = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(117.4, 40, 1500),
label: {
text: "这是一团火",
font: "24px sans-serif", // 大小 字型
fillColor: Cesium.Color.WHITE, //字体颜色
outlineColor: Cesium.Color.BLACK, //字体外框颜色
outlineWidth: 4, // 字边宽
style: Cesium.LabelStyle.FILL_AND_OUTLINE, // FILL填充文字,OUTLINE勾勒标签,FILL_AND_OUTLINE填充文字和勾勒标签
pixelOffset: new Cesium.Cartesian2(0, -24),// 设置文字的偏移量
horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 设置文字的显示位置,LEFT /RIGHT /CENTER
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 设置文字的显示位置
},
});
const label = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(117.4, 40, 1500),
billboard: {
image: "../texture/Fire.png",
width: 50,
height: 50,
verticalOrigin: Cesium.VerticalOrigin.TOP, //垂直显示位置
horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平显示位置
},
});
常见的几何文件包括GeoJson、KML,除此外,Cesium还在JSON数据的基础上扩充了CZML类型来自持更大的数据流。DataSoureCollection 是 Cesium中加载矢量数据的主要方式之一,最大特点是支持加载矢量数据集与外部文件的调用,主要分为CzmlDataSource、KmlDataSource、GeoJsonDataSource三种,分别对应加载CZML
、KML
和 GeoJSON
格式数据。
更多代码示例见官网:https://sandcastle.cesium.com/?src=KML.html&label=DataSources
// geojson
const chinaGeoJson = Cesium.GeoJsonDataSource.load(
"https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
{
stroke: Cesium.Color.RED, // 边线默认色
fill: Cesium.Color.SKYBLUE.withAlpha(0.5), // 默认填充色
strokeWidth: 4, // 多边形线条和多边形轮廓的默认宽
}
);
chinaGeoJson.then((dataSources) => { // geojson加载完成的回调
viewer.dataSources.add(dataSources);
const entities = dataSources.entities.values;
entities.forEach((entity, i) => {
entity.polygon.material = new Cesium.ColorMaterialProperty(
Cesium.Color.fromRandom({ // 每个json随机赋色
alpha: 1,
})
);
entity.polygon.outline = false;
entity.polygon.extrudedHeight = 1000 // 拉伸高
});
});
const kmlDataPromise = Cesium.KmlDataSource.load(kmlUrl, {
camera: viewer.scene.camera,
canvas: viewer.scene.canvas,
screenOverlayContainer: viewer.container,
});
kmlDataPromise.then(function (dataSource) {
viewer.dataSources.add(dataSource);
});
CZML的使用可见 Cesium_CZML
// 创建模型
function createModel(url, height) {
const position = Cesium.Cartesian3.fromDegrees(117, 40.01, height);
const heading = Cesium.Math.toRadians(135);
const pitch = 0;
const roll = 0;
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
const orientation = Cesium.Transforms.headingPitchRollQuaternion(
position,
hpr
);
const entity = viewer.entities.add({
name: url,
position: position,
orientation: orientation,
model: {
uri: url,
minimumPixelSize: 128,
maximumScale: 20000,
},
});
viewer.trackedEntity = entity;
}
createModel("../model/Air.glb", 1000)
createModel("../Assets/CesiumMilkTruck.glb",150)
几何形体:点、线、面、体
标签:文字、图标
几何文件:GeoJson、KML、CZML
三维模型:glb/gltf