Cesium 绘制不同的形状（Entity）

Cesium里面绘图最常用的就是 entity，而Cesium也提供了不同类型的entity,这里就介绍一下在Cesium中如何绘制这些entity。
1 billboard，广告牌

/**
* 添加entity-billboard
* 广告牌，也就是一张图片、图标数据。
* **/
addEntityBillboard() {let entityBillBoard = new Cesium.Entity({id: 'EntityBillboard0',name: 'EntityBillboard',show: true,description: '广告牌招租13390133157',position: new Cesium.Cartesian3.fromDegrees(116.0, 39.9, 100),billboard: {image: 'static/image/ziranzaihai.png',show: true,sacle: 1000.01,color: Cesium.Color.YELLOWGREEN,width: 100,height: 100}})let billboadrGeom = window.viewer.entities.add(entityBillBoard)window.viewer.zoomTo(entityBillBoard)
}

2 Box，立方体

/*** 添加entity-box* 立方体实体。* 可以根据不同的材质进行设置box的外观。
* **/
addEntityBox() {var heading = Cesium.Math.toRadians(90.0)var pitch = 0.0var roll = 0.0var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)var orientation = Cesium.Transforms.headingPitchRollQuaternion(position,hpr)let entityBox = new Cesium.Entity({id: 'entityBox0',name: 'entityBox',position: Cesium.Cartesian3.fromDegrees(111.0, 41.0),orientation: orientation,box: {heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,dimensions: new Cesium.Cartesian3(100000, 100000, 100000),material: new Cesium.ImageMaterialProperty({image: 'static/image/entityBillboard.ico',color: Cesium.Color.YELLOWGREEN,repeat: new Cesium.Cartesian2(16, 16),transparent: true}),outline: true,fill: true,outlineColor: Cesium.Color.RED,outlineWidth: 100}})let boxGeom = window.viewer.entities.add(entityBox)window.viewer.flyTo(entityBox, {duration: 3,maximumHeight: 1000,offset: Cesium.HeadingPitchRange(1, 1, 1)})
}

3 corridor，走廊通道

/*** 添加entity-corridor* 走廊通道实体，可以拉伸高度* **/
addEntityCorridor() {let entityCorridor = new Cesium.Entity({id: 'entityCorridor0',name: 'entityCorridor0',position: Cesium.Cartesian3.fromDegrees(123.0, 43.0),corridor: {positions: Cesium.Cartesian3.fromDegreesArray([123.0, 40.0, 122.0, 40.0, 123.0, 42.0, 121.0, 42.0]),width: 10000,material: new Cesium.ImageMaterialProperty({//可以设置贴图// image: 'static/image/corridor.png',color: Cesium.Color.YELLOWGREEN,repeat: new Cesium.Cartesian2(32, 32)// transparent: true}),extrudedHeight: 10000,outline: false}})let corridorGeom = window.viewer.entities.add(entityCorridor)window.viewer.zoomTo(entityCorridor)
},

4 Cylinder 圆柱体

/**
* 添加entity-cylinder
* 圆柱实体
* **/
addEntityCylinder() {let entityCylinder = new Cesium.Entity({id: 'entityCylinder0',name: 'entityCylinder',position: Cesium.Cartesian3.fromDegrees(116.0, 40.0, 50000),cylinder: {heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,topRadius: 10000,bottomRadius: 10000,length: 20000,material: new Cesium.ImageMaterialProperty({// image: 'static/image/corridor.png',color: Cesium.Color.fromCssColorString('#FFD700'),transparent: false})}})let cylinderGeom = window.viewer.entities.add(entityCylinder)window.viewer.zoomTo(entityCylinder)
}

5 Ellipse 椭圆

/**
* 添加entity-ellipse
* 椭圆实体,面状，可以拉伸成体
* **/
addEntityEllipse() {let entityEllipse = new Cesium.Entity({id: 'entityEllipse0',name: 'entityEllipse',position: Cesium.Cartesian3.fromDegrees(123.0, 45.0),ellipse: {semiMajorAxis: 100000,semiMinorAxis: 60000,material: Cesium.Color.fromRandom().withAlpha(1),//拉伸extrudedHeight: 100000,heightReference: Cesium.HeightReference.CLAMP_TO_EDGE,rotation: 0.9,shadows: Cesium.ShadowMode.ENABLED}})let ellipseCeom = window.viewer.entities.add(entityEllipse)window.viewer.zoomTo(entityEllipse)
}

6 ellipsoid 椭球体

/*** 添加entity-ellipsoid* 椭球实体* **/
addEntityEllipsoid() {this.trackedEntity = new Cesium.Entity({id: 'EntityEllipsoid0',name: 'EntityEllipsoid',position: Cesium.Cartesian3.fromDegrees(111, 35, 100),ellipsoid: {heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,radii: new Cesium.Cartesian3(30000, 50000, 30000),material: Cesium.Color.fromRandom().withAlpha(1),outline: true,outlineColor: Cesium.Color.BLACK}})let ellipsoidGeom = window.viewer.entities.add(this.trackedEntity)window.viewer.zoomTo(this.trackedEntity)
},

7 Label 标签文本

/**
* 添加entity-label
* 标签， 可以根据缩放的程度控制标签大小或者显示与隐藏
* **/
addEntityLabel() {let entityLabel = new Cesium.Entity({id: 'entityLabel0',name: 'entityLabel',position: Cesium.Cartesian3.fromDegrees(123.5, 45.5, 1000),label: {text: '臣本布衣，躬耕于陇亩',fillColor: Cesium.Color.YELLOWGREEN,style: Cesium.LabelStyle.FILL_AND_OUTLINE,showBackground: true,backgroundColor: Cesium.Color(255, 255, 0),scaleByDistance: new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e7, 0.5),translucencyByDistance: new Cesium.NearFarScalar(1.5e2,1.0,1.5e8,0.0),verticalOrigin: Cesium.VerticalOrigin.LEFT}})let labelsGeom = window.viewer.entities.add(entityLabel)window.viewer.zoomTo(entityLabel)
},

8 Plane 平面实体

/**
* 添加entity-plane
* 平面实体, 没有厚度
* **/
addEntityPlane() {let entityPlane = new Cesium.Entity({id: 'entityPlane0',name: 'entityPlane',position: Cesium.Cartesian3.fromDegrees(123.6, 45.8),plane: {plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Y, 0.0),dimensions: new Cesium.Cartesian2(400000.0, 300000.0),material: Cesium.Color.BLUE}})let planeGeom = window.viewer.entities.add(entityPlane)window.viewer.zoomTo(planeGeom)
},

9 Point 点实体

/**
* 添加entity-point
* 点实体
* **/
addEntityPoint() {let entityPoint = new Cesium.Entity({id: 'entityPoint0',name: 'entityPoint',position: Cesium.Cartesian3.fromDegrees(125.2, 40.5),point: {color: Cesium.Color.YELLOWGREEN,pixelSize: 40,scaleByDistance: new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e7, 0.1),translucencyByDistance: new Cesium.NearFarScalar(1.5e2,1.0,1.5e8,0.0)}})let pointGeom = window.viewer.entities.add(entityPoint)window.viewer.zoomTo(pointGeom)
}

10 polygon 多边形面实体

/**
* 添加 entity-polygon
* 面实体, 可以在面中挖空
* **/
addEntityPolygon() {let entityPolygon = new Cesium.Entity({id: 'entityPolygon0',name: 'entityPolygon',polygon: {hierarchy: {positions: Cesium.Cartesian3.fromDegreesArray([125.0, 47.0, 126.3, 47.3, 127.5, 43.6, 124.8, 40.3, 123.0, 45.0]),holes: [{positions: Cesium.Cartesian3.fromDegreesArray([125.0, 46.0, 125.5, 46.5, 126.0, 44.0, 124.0, 45.0])}]},material: Cesium.Color.YELLOWGREEN,extrudedHeight: 100000// closeTop: false,// closeBottom: false,}})let polygonGeom = window.viewer.entities.add(entityPolygon)window.viewer.zoomTo(entityPolygon)
},

11 Polyline 线实体

/**
* 添加 entity-polyline
* 线实体， 可以绘制箭头线
* **/
addEntityPolyline() {let lontitude = 0let latitude = 0let nNum = 1let isConstant = falselet entityPolyline = new Cesium.Entity({id: 'entityPolyline0',name: 'entityPolyline',polyline: {positions: new Cesium.CallbackProperty(function (time, result) {nNum += 0.4lontitude = 86 + (nNum - 1) * 0.0333333333latitude = 42 + (nNum - 1) * -0.0021212121if (lontitude < 119) {return Cesium.Cartesian3.fromDegreesArray([86.0,42.0,lontitude,latitude])} else {return Cesium.Cartesian3.fromDegreesArray([86.0, 42.0, 119.0, 39.9])}}, isConstant),material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.YELLOWGREEN),followSurface: true,width: 20}})let polygonGeom = window.viewer.entities.add(entityPolyline)window.viewer.zoomTo(entityPolyline)
},

12 polylineVolm 管线实体

/**
* 添加 entity-polylineVolm
* 类似管装线实体
* **/
addEntityPloylineVolum() {let entityPolylineVolum = new Cesium.Entity({id: 'EntityPloylineVolum',name: 'addEntityPloylineVolum',polylineVolume: {positions: Cesium.Cartesian3.fromDegreesArray([120.0, 40.0, 120.0, 45.0, 125.0, 45.0]),shape: [new Cesium.Cartesian2(-10000, 0),new Cesium.Cartesian2(10000, 0),new Cesium.Cartesian2(20000, 17340),new Cesium.Cartesian2(0, 37340),new Cesium.Cartesian2(-20000, 17340)],material: Cesium.Color.YELLOWGREEN,fill: true,outline: true,outlineColor: Cesium.Color.YELLOW,outlineWidth: 10}})let polylineVolume = window.viewer.entities.add(entityPolylineVolum)window.viewer.zoomTo(polylineVolume)
}

13 rectangle 矩形实体

/**
* 添加entity-rectangle
* 添加矩形实体
* **/
addEntityRectangle() {let entityRectangle = new Cesium.Entity({id: 'entityRectangle0',name: 'entityRectangle',rectangle: {coordinates: Cesium.Rectangle.fromDegrees(120.0, 40, 125, 45), // west, south, east, north// material: Cesium.Color.PURPLE.withAlpha(0.6),material: 'static/image/hzw.png'// outline: true, // height must be set for outline to display// outlineColor: Cesium.Color.RED,// extrudedHeight: 10000,}})let rectangleGeom = window.viewer.entities.add(entityRectangle)window.viewer.zoomTo(rectangleGeom)
},

14 wall 墙实体

/**
* 添加 entity-wall
* 添加墙实体
* **/
addEntityWall() {let entityWall = new Cesium.Entity({id: 'enttiyWall0',name: 'entityWall',wall: {positions: Cesium.Cartesian3.fromDegreesArrayHeights([123.0, 40.0, 100000, 123.5, 40.5, 12012, 124.0, 41.0, 210000, 124.5,41.5, 220000, 125.0, 42.0, 52136]),material: new Cesium.ImageMaterialProperty({image: 'static/image/corridor.png',repeat: new Cesium.Cartesian2(32, 32)})}})let wallGeom = window.viewer.entities.add(entityWall)window.viewer.zoomTo(entityWall)
}

Cesium 绘制不同的形状（Entity）相关推荐

cesium绘制动态线，多段线
动态线实现传递顶点时,附加每个顶点距线段起点的距离,用此距离来实现线段分段 shader中对传入的距离取模,即可实现分段绘制不通的颜色 PolylineColorAppearance + Fabri ...
cesium绘制中国边界，设置边界样式
cesium绘制中国边界,设置边界样式,步骤如下: 步骤一: 从http://datav.aliyun.com/portal/school/atlas/area_selector网站下载geojson ...
QT实现绘制3D基本形状
QT实现绘制3D基本形状一项目简介二项目技术三项目展示主要源码片段解析获取完整项目源码传送门一项目简介显示Qt 3D提供的四个基本形状,并为每个形状设置一个网格. 基本形状显示了Qt 3 ...
cesium画飞线_基于Cesium绘制抛物弧线
Cesium绘制抛物弧线,供大家参考,具体内容如下在网上搜了很多都没有搜到,于是自己花了点时间琢磨了一下,做个记录思路两点连线作为坐标轴,模拟抛物线,在线上取点画直线,主要用于高度/p> ...
python立体爱心_css绘制各种各样的形状图形
我们在编写前端代码时,经常会遇到各种各样的形状图形(如:边框对话框,三角形,平行四边形.圆角边框.圆形.四叶草.花瓣等),除了用背景图片(css雪碧图或css精灵图+定位引用)和插入img图片的方法, ...
Cesium绘制抛物线弧线
Cesium绘制抛物线弧线想做一个行人轨迹的动态显示,在网上搜了很多都没有搜到,于是自己花了点时间琢磨了一下,做个记录思路两点连线作为坐标轴,取线段中点画垂线作为y轴,在线上取一点作为开口向下的 ...
MATLAB 快速绘制曲线图的形状，粗细，颜色
目录 MATLAB 快速绘制曲线图的形状,粗细,颜色 1.通过改变R-G-B 的值改变线条的颜色: 2.通过改变c∈[1,+∞)的值改变线条的粗细: 3.线条形状,粗细,颜色选择: 4.Matlab中 ...
基于 React hooks + Typescript + Cesium 绘制四棱锥（视椎体）
文章目录效果截图功能介绍实现思路实现步骤安装 react-dat-gui 库创建四棱锥根据参数面板更新视椎体参数整体代码效果截图先上截图: 功能介绍本例子基于 React hoo ...
CSS绘制各种各样的形状图形
目录实心圆圆环(空心圆) 半圆四分之一圆(扇形) 鸡蛋椭圆胶囊三角形月亮编辑做折纸效果目录实心圆圆环(空心圆) 半圆四分之一圆(扇形) 鸡蛋椭圆胶囊三角形把不需要的 ...
cesium绘制点、线、面
cesium绘制点.线.面地图地形上点 let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); handler ...

Cesium 绘制不同的形状（Entity）

Cesium 绘制不同的形状（Entity）相关推荐

最新文章

热门文章