Cesium实践(4)——空间数据加载
文章目录
- 前言
- 几何形体
-
- 点
- 线
- 面
- 体
- 标签
-
- 文字
- 图标
- 几何文件
-
- GeoJson
- KML
- CZML
- 三维模型
- 总结
前言
本文介绍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, // 贴地}});
- 轮廓线——通过Entity
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 ,// 边框颜色},});
- 轮廓线——通过Primitive
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 /CENTERverticalOrigin: 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
// geojsonconst 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 // 拉伸高});});
KML
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
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