- Cesium 提供繪制Entity的API接口如下,詳情參看[1][2]
//api使用如下：添加一個(gè)點(diǎn)
let option= {
position: Cesium.Cartesian3.fromDegrees(
this.defaultPoint[0],
this.defaultPoint[1]
),
point: {
pixelSize: 10,
color: Cesium.Color.YELLOW
}
}
this.viewer.entities.add(option)
更多entity使用
// BillboardGraphics
billboard : {
image : '../images/Cesium_Logo_overlay.png', // default: undefined
show : true, // default
pixelOffset : new Cesium.Cartesian2(0, -50), // default: (0, 0)
eyeOffset : new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
horizontalOrigin : Cesium.HorizontalOrigin.CENTER, // default
verticalOrigin : Cesium.VerticalOrigin.BOTTOM, // default: CENTER
scale : 2.0, // default: 1.0
color : Cesium.Color.LIME, // default: WHITE
rotation : Cesium.Math.PI_OVER_FOUR, // default: 0.0
alignedAxis : Cesium.Cartesian3.ZERO, // default
width : 100, // default: undefined
height : 25 // default: undefined
}
// BoxGraphics
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material: Cesium.Color.BLUE
}
// CorridorGraphics
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
100.0,
40.0,
105.0,
40.0,
105.0,
35.0
]),
width: 200000.0,
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.RED
}
// CylinderGraphics
cylinder: {
length: 400000.0,
topRadius: 200000.0,
bottomRadius: 200000.0,
material: Cesium.Color.GREEN.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.DARK_GREEN
}
// EllipseGraphics
// circle
ellipse: {
semiMinorAxis: 300000.0,
semiMajorAxis: 300000.0,
height: 200000.0,
material: Cesium.Color.GREEN
}
// ellipse
ellipse: {
semiMinorAxis: 250000.0,
semiMajorAxis: 400000.0,
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.RED
}
// EllipsoidGraphics
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
material: Cesium.Color.BLUE
}
// LabelGraphics
label: {
id: "my label",
text: "?? ???? ?????? \n ?????? ?????? ????"
}
// ModelGraphics
model: {
uri: "/data/gltf/Spider.gltf",
minimumPixelSize: 28,
maximumScale: 200
}
// PathGraphics
// PolygonGraphics
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
115.0,
37.0,
115.0,
32.0,
107.0,
33.0,
102.0,
31.0,
102.0,
35.0
]),
material: Cesium.Color.RED
}
// PolylineGraphics
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([75, 35, 125, 35]),
width: 5,
material: Cesium.Color.RED
}
// PolylineVolumeGraphics
polylineVolume: {
positions: Cesium.Cartesian3.fromDegreesArray([
85.0,
32.0,
85.0,
36.0,
89.0,
36.0
]),
shape: this.computeCircle(60000.0),
material: Cesium.Color.RED
}
// RectangleGraphics
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(80.0, 20.0, 110.0, 25.0),
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.RED
}
// WallGraphics
wall: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
107.0,
43.0,
100000.0,
97.0,
43.0,
100000.0,
97.0,
40.0,
100000.0,
107.0,
40.0,
100000.0,
107.0,
43.0,
100000.0
]),
material: Cesium.Color.GREEN
}
- Entity中Property使用,參看[3][4]
SampledProperty
//
//修改boxEntity 高度
var property = new Cesium.SampledProperty(Cesium.Cartesian3);
property.addSample(
this.starttime,
new Cesium.Cartesian3(100000.0, 100000.0, 200000.0)
);
property.addSample(
this.stoptime,
new Cesium.Cartesian3(400000.0, 300000.0, 700000.0)
);
blueBox.box.dimensions = property;
//修改顏色
var colorProperty = new Cesium.SampledProperty(Cesium.Color);
colorProperty.addSample(this.starttime, new Cesium.Color(0, 1, 0));
colorProperty.addSample(this.stoptime, new Cesium.Color(0, 0, 1));
blueBox.box.material = new Cesium.ColorMaterialProperty(
colorProperty
);
SampledPositionProperty 修改位置
var property = new Cesium.SampledPositionProperty();
property.addSample(
this.starttime,
Cesium.Cartesian3.fromDegrees(
this.defaultPoint[0],
this.defaultPoint[1],
300000.0
)
);
property.addSample(
this.stoptime,
Cesium.Cartesian3.fromDegrees(
this.defaultPoint[0] + 5,
this.defaultPoint[1] + 5,
300000.0
)
);
blueBox.position = property;
CompositeProperty 多屬性組合
var sampledProperty = new Cesium.SampledProperty(Cesium.Cartesian3);
sampledProperty.addSample(
Cesium.JulianDate.fromIso8601("2019-03-01T00:00:00.00Z"),
new Cesium.Cartesian3(400000.0, 300000.0, 200000.0)
);
sampledProperty.addSample(
Cesium.JulianDate.fromIso8601("2019-03-02T00:00:00.00Z"),
new Cesium.Cartesian3(400000.0, 300000.0, 400000.0)
);
var ticProperty = new Cesium.TimeIntervalCollectionProperty();
ticProperty.intervals.addInterval(
Cesium.TimeInterval.fromIso8601({
iso8601: "2019-03-02T00:00:00.00Z/2019-03-02T06:00:00.00Z",
isStartIncluded: true,
isStopIncluded: false,
data: new Cesium.Cartesian3(400000.0, 300000.0, 400000.0)
})
);
ticProperty.intervals.addInterval(
Cesium.TimeInterval.fromIso8601({
iso8601: "2019-03-02T06:00:00.00Z/2019-03-04T12:00:00.00Z",
isStartIncluded: true,
isStopIncluded: false,
data: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0)
})
);
ticProperty.intervals.addInterval(
Cesium.TimeInterval.fromIso8601({
iso8601: "2019-03-04T12:00:00.00Z/2019-03-04T18:00:00.00Z",
isStartIncluded: true,
isStopIncluded: false,
data: new Cesium.Cartesian3(400000.0, 300000.0, 600000.0)
})
);
ticProperty.intervals.addInterval(
Cesium.TimeInterval.fromIso8601({
iso8601: "2019-03-04T18:00:00.00Z/2019-03-05T23:00:00.00Z",
isStartIncluded: true,
isStopIncluded: true,
data: new Cesium.Cartesian3(400000.0, 300000.0, 700000.0)
})
);
var compositeProperty = new Cesium.CompositeProperty();
compositeProperty.intervals.addInterval(
Cesium.TimeInterval.fromIso8601({
iso8601: "2019-03-01T00:00:00.00Z/2019-03-02T00:00:00.00Z",
data: sampledProperty
})
);
compositeProperty.intervals.addInterval(
Cesium.TimeInterval.fromIso8601({
iso8601: "2019-03-02T00:00:00.00Z/2019-03-05T00:00:00.00Z",
isStartIncluded: false,
isStopIncluded: false,
data: ticProperty
})
);
blueBox.box.dimensions = compositeProperty;
參考資料
[1]https://cesiumjs.org/Cesium/Build/Documentation/Entity.html?classFilter=entity
[2]http://blog.sina.com.cn/s/blog_15e866bbe0102xqsx.html
[3]https://zhuanlan.zhihu.com/p/50534090
[4]http://cesium.xin/wordpress/archives/108.html
更多內(nèi)容谈息，歡迎關(guān)注公眾號
seeling_GIS
