Cesium 繪製不同的形狀（Entity）
本文已參與「新人創作禮」活動，一起開啟掘金創作之路。
Cesium裡面繪圖最常用的就是 entity，而Cesium也提供了不同型別的entity,這裡就介紹一下在Cesium中如何繪製這些entity。
1 billboard，廣告牌
javascript
/**
* 新增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，立方體
```javascript / * 新增entity-box * 立方體實體。 * 可以根據不同的材質進行設定box的外觀。 * / addEntityBox() { var heading = Cesium.Math.toRadians(90.0) var pitch = 0.0 var roll = 0.0 var 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，走廊通道
javascript
/**
* 新增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 橢圓
javascript
/**
* 新增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 橢球體
javascript
/**
* 新增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 標籤文字
javascript
/**
* 新增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 平面實體
javascript
/**
* 新增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 點實體
javascript
/**
* 新增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 多邊形面實體
javascript
/**
* 新增 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 線實體
javascript
/**
* 新增 entity-polyline
* 線實體， 可以繪製箭頭線
* **/
addEntityPolyline() {
let lontitude = 0
let latitude = 0
let nNum = 1
let isConstant = false
let entityPolyline = new Cesium.Entity({
id: 'entityPolyline0',
name: 'entityPolyline',
polyline: {
positions: new Cesium.CallbackProperty(function (time, result) {
nNum += 0.4
lontitude = 86 + (nNum - 1) * 0.0333333333
latitude = 42 + (nNum - 1) * -0.0021212121
if (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 管線實體
javascript
/**
* 新增 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 矩形實體
javascript
/**
* 新增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 牆實體
javascript
/**
* 新增 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)
}