Polyline & Cesium.PolylineCollection
ArcType 线段的类型
以下逐步介绍:
-
空间直线(无弧度) Cesium.ArcType.NONE
空间直线很好理解,两点之间没有弧度,与球面是二维还是三维没有关系 -
球面线段
球面距离是球面上两点之间的最短连线的长度,就是经过这两点的大圆在这两点间的一段劣弧的长度。(大圆就是经过球心的平面截球面所得的圆)
-
恒向线
首先来看它的特性:
1.在墨卡托投影图上显示为直线
2.与每一子午线相交成同一角度
我们知道球体(例如地球)表面上两点之间的最短距离是一个大圆。导航的时候,要驶过一个真正的大圆圈,需要不断改变转向的路线。在大多数情况下,对于短距离航行而言,大圆弧路线和恒向线路线之间的长度差异很小。在高纬度或长途航行中,差异可能很大。在那种情况下,导航员通常将大圆航线分成一系列短的恒向线,以便舵手可以转向一次之后,几个小时不用转方向。
1.两点直接连线
const redLine = viewer.entities.add({
name: "Red line on terrain",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
width: 5,
material: Cesium.Color.RED,
clampToGround: true,
},
});
2.罗经线
const greenRhumbLine = viewer.entities.add({
name: "Green rhumb line",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
width: 5,
arcType: Cesium.ArcType.RHUMB,
material: Cesium.Color.GREEN,
},
});
3.发光的线 PolylineGlowMaterialProperty
const glowingLine = viewer.entities.add({
name: "Glowing blue line on the surface",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([-75, 37, -125, 37]),
width: 10,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.5,
taperPower: 0.5,
color: Cesium.Color.CORNFLOWERBLUE,
}),
},
});
4.带边框的线 PolylineOutlineMaterialProperty
const orangeOutlined = viewer.entities.add({
name:
"Orange line with black outline at height and following the surface",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,
39,
250000,
-125,
39,
250000,
]),
width: 5,
material: new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.ORANGE,
outlineWidth: 2,
outlineColor: Cesium.Color.BLACK,
}),
},
});
5.带箭头的线 PolylineArrowMaterialProperty
const purpleArrow = viewer.entities.add({
name: "Purple straight arrow at height",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,
43,
500000,
-125,
43,
500000,
]),
width: 10,
arcType: Cesium.ArcType.NONE,
material: new Cesium.PolylineArrowMaterialProperty(
Cesium.Color.PURPLE
),
},
});
6.虚线 PolylineDashMaterialProperty
const dashedLine = viewer.entities.add({
name: "Blue dashed line",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,
45,
500000,
-125,
45,
500000,
]),
width: 4,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.CYAN,
}),
},
});