您现在的位置是:首页 > 伤感句子

cesium添加点、线、面、文字、图标、模型等标绘

作者:淼淼时间:2024-03-28 15:55:46分类:伤感句子

简介  文章浏览阅读7.3k次,点赞8次,收藏34次。Entity是可以与样式化图形表示配对并定位在空间和时间上的数据对象,或者说Cesium 提供 Entity API 来绘制控件数据。高级别的数据驱动的API,称为“Entity API”。该API使用一致性设计的

点击全文阅读

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      }    });

点击全文阅读

郑重声明:

本站所有活动均为互联网所得,如有侵权请联系本站删除处理

上一篇:软件架构常用设计

下一篇:返回列表

我来说两句