Cesium三维地球上添加点、线、面、文字、图标（图片）、模型等标绘 |
您所在的位置：网站首页 › 三维如何标注高度 › Cesium三维地球上添加点、线、面、文字、图标（图片）、模型等标绘 |
|
添加标绘之前要明白一点：Cesium Entity是可以与样式化图形表示配对并定位在空间和时间上的数据对象，或者说Cesium 提供 Entity API 来绘制控件数据。所以我们添加的所有标绘都是entity Entity API简介Cesium提供两类API： 面向图形开发人员的底层API，通常称为“Primitive API”。该API暴露最小限度的抽象，使用图形学术语，具有很大的灵活性，需要具有图形学编程的知识。高级别的数据驱动的API，称为“Entity API”。该API使用一致性设计的、高级别的对象，来管理一组相关性的可视化对象，其底层使用Primitive API。官网说明文档：https://cesium.com/docs/cesiumjs-ref-doc/Entity.html 形状与立体（Shapes and Volumes）支持的形状与立体列表 可以查看官方文档（每个图形后面都有要传递的参数，点击可以直接查看） https://cesium.com/docs/cesiumjs-ref-doc/Entity.html 用到的API Cesium.Cartesian3： https://cesium.com/docs/cesiumjs-ref-doc/Cartesian3.html?classFilter=Cartesian3 Cesium.Color： https://cesium.com/docs/cesiumjs-ref-doc/Color.html 点： API：https://cesium.com/docs/cesiumjs-ref-doc/PointGraphics.html //entities.add(entity) viewer.entities.add({ // fromDegrees（经度，纬度，高度，椭球，结果）从以度为单位的经度和纬度值返回Cartesian3位置 position: Cesium.Cartesian3.fromDegrees(108, 34, 10), point: { // 点的大小（像素） pixelSize: 5, // 点位颜色，fromCssColorString 可以直接使用CSS颜色 color: Cesium.Color.fromCssColorString('#ee0000'), // 边框颜色 outlineColor: Cesium.Color.fromCssColorString('#fff'), // 边框宽度(像素) outlineWidth: 2, // 显示在距相机的距离处的属性，多少区间内是可以显示的 distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500), // 是否显示 show: true } });线： API：https://cesium.com/docs/cesiumjs-ref-doc/PolylineGraphics.html viewer.entities.add({ polyline: { // fromDegrees返回给定的经度和纬度值数组（以度为单位），该数组由Cartesian3位置组成。 // Cesium.Cartesian3.fromDegreesArray([经度1, 纬度1, 经度2, 纬度2,]) // Cesium.Cartesian3.fromDegreesArrayHeights([经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2]) positions: Cesium.Cartesian3.fromDegreesArray([ 120.9677706, 30.7985748, 110.20, 34.55 ]), // 宽度 width: 2, // 线的颜色 material: Cesium.Color.WHITE, // 线的顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。 zIndex: 10, // 显示在距相机的距离处的属性，多少区间内是可以显示的 distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500), // 是否显示 show: true } });面： API：https://cesium.com/docs/cesiumjs-ref-doc/PolygonGraphics.html viewer.entities.add({ polygon: { // 获取指定属性（positions，holes（图形内需要挖空的区域）） hierarchy: { positions: Cesium.Cartesian3.fromDegreesArray([ 120.9677706, 30.7985748, 110.20, 34.55, 120.20, 50.55 ]), holes: [{ positions: Cesium.Cartesian3.fromDegreesArray([ 119, 32, 115, 34, 119, 40 ]) }] }, // 边框 outline: true, // 边框颜色 outlineColor: Cesium.Color.WHITE, // 边框尺寸 outlineWidth: 2, // 填充的颜色，withAlpha透明度 material: Cesium.Color.GREEN.withAlpha(0.5), // 是否被提供的材质填充 fill: true, // 恒定高度 height: 5000, // 显示在距相机的距离处的属性，多少区间内是可以显示的 distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 10000000), // 是否显示 show: true, // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。 zIndex: 10 } });文字： API：https://cesium.com/docs/cesiumjs-ref-doc/LabelGraphics.html viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(120, 30, 5), // 点 point: { color: Cesium.Color.RED, // 点位颜色 pixelSize: 10 // 像素点大小 }, // 文字 label: { // 文本。支持显式换行符“ \ n” text: '测试名称', // 字体样式，以CSS语法指定字体 font: '14pt Source Han Sans CN', // 字体颜色 fillColor: Cesium.Color.BLACK, // 背景颜色 backgroundColor: Cesium.Color.AQUA, // 是否显示背景颜色 showBackground: true, // 字体边框 outline: true, // 字体边框颜色 outlineColor: Cesium.Color.WHITE, // 字体边框尺寸 outlineWidth: 10, // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。 scale: 1.0, // 设置样式：FILL：填写标签的文本，但不要勾勒轮廓；OUTLINE：概述标签的文本，但不要填写；FILL_AND_OUTLINE：填写并概述标签文本。 style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 相对于坐标的水平位置 verticalOrigin: Cesium.VerticalOrigin.CENTER, // 相对于坐标的水平位置 horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量 pixelOffset: new Cesium.Cartesian2(10, 0), // 显示在距相机的距离处的属性，多少区间内是可以显示的 distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500), // 是否显示 show: true } });图标（图片）： API：https://cesium.com/docs/cesiumjs-ref-doc/BillboardGraphics.html viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(110.20, 34.55, 2.61), billboard: { // 图像地址，URI或Canvas的属性 image: '/location.png', // 设置颜色和透明度 color: Cesium.Color.WHITE.withAlpha(0.8), // 高度（以像素为单位） height: 50, // 宽度（以像素为单位） width: 50, // 逆时针旋转 rotation: 20, // 大小是否以米为单位 sizeInMeters: false, // 相对于坐标的垂直位置 verticalOrigin: Cesium.VerticalOrigin.CENTER, // 相对于坐标的水平位置 horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量 pixelOffset: new Cesium.Cartesian2(10, 0), // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。 scale: 1.0, // 显示在距相机的距离处的属性，多少区间内是可以显示的 distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500), // 是否显示 show: true } });模型： API：https://cesium.com/docs/cesiumjs-ref-doc/ModelGraphics.html viewer.entities.add({ // 设置方向 orientation: orientation, position: Cesium.Cartesian3.fromDegrees(120, 30, 10000), model: { // 引入模型 uri: '/SampleData/models/CesiumAir/Cesium_Air.glb', // 模型的近似最小像素大小，而不考虑缩放。这可以用来确保即使观看者缩小也可以看到模型。如果为0.0，则不强制使用最小大小 minimumPixelSize: 1280, // 模型的颜色（与模型的渲染颜色混合的属性） color: Cesium.Color.WHITE.withAlpha(1), // 模型的最大比例大小 maximumScale: 20000, // 设置模型轮廓（边框）颜色 silhouetteColor: Cesium.Color.BLACK, // 设置模型轮廓（边框）大小 silhouetteSize: 2, // 是否执行模型动画 runAnimations: true, // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。 scale: 1.0, // 显示在距相机的距离处的属性，多少区间内是可以显示的 distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500), // 是否显示 show: true } }); |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |