1. 创建多边形实体
使用polygon : PolygonGraphics 创建多边形实体,polygon主要包含以下属性:
1.1 创建一个多边形实体
//创建一个多边形实体
// const bluePolygon = viewer.entities.add({
// name: "bluePolygon",
// polygon: {
// // 多边形顶点属性设置
// hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
// 116.39, 39.9, 100, 116.38, 39.85, 300, 116.41, 39.86, 600, 116.41,
// 39.88, 900,
// ]),
// material: Cesium.Color.BLUE.withAlpha(0.5),
// // 是否使用预先设置的高度
// perPositionHeight: true,
// // 挤出高度
// extrudedHeight: 0,
// },
// });
1.2 设置多边形打洞多边形
//设置多边形打洞多边形
const bluePolygon = viewer.entities.add({
name: "bluePolygon",
polygon: {
// 多边形顶点属性设置
hierarchy: {
positions: Cesium.Cartesian3.fromDegreesArray([
116.39, 39.9, 116.38, 39.85, 116.41, 39.86, 116.41, 39.88,
]),
holes: [
{
positions: Cesium.Cartesian3.fromDegreesArray([
116.385, 39.88, 116.385, 39.865, 116.388, 39.865, 116.388, 39.88,
]),
},
],
},
material: Cesium.Color.BLUE.withAlpha(0.5),
},
});
2.创建折线实体
使用polyline : PolylineGraphics创建折线实体,polyline主要提供以下属性:
2.1 折线
const redLine = viewer.entities.add({
name: "redLine",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
116.39, 39.9, 116.38, 39.85, 116.41, 39.86, 116.41, 39.88,
]),
width: 10,
material: Cesium.Color.RED.withAlpha(0.5),
// 设置折线固定在地面上
// clampToGround: true,
},
});
2.2 带边框折线(红色折线,白色边框)
const redLine = viewer.entities.add({
name: "redLine",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
116.39, 39.9, 100, 116.38, 39.85, 100, 116.41, 39.86, 100, 116.41,
39.88, 100,
]),
width: 10,
// 飞线效果
material: new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.RED,
// 设置中间间隙的颜色
outlineWidth: 5,
outlineColor: Cesium.Color.WHITE,
}),
},
});
2.3 箭头折线
const redLine = viewer.entities.add({
name: "redLine",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
116.39, 39.9, 100, 116.38, 39.85, 100, 116.41, 39.86, 100, 116.41,
39.88, 100,
]),
width: 20,
// 飞线效果
material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.SKYBLUE),
// 设置折线固定在地面上
// clampToGround: true,
},
});
2.3 红白间隔折线
const redLine = viewer.entities.add({
name: "redLine",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
116.39, 39.9, 100, 116.38, 39.85, 100, 116.41, 39.86, 100, 116.41,
39.88, 100,
]),
width: 5,
// 飞线效果
material: new Cesium.PolylineDashMaterialProperty({
dashLength: 20,
color: Cesium.Color.RED,
// 设置中间间隙的颜色
gapColor: Cesium.Color.WHITE,
}),
// 设置折线固定在地面上
// clampToGround: true,
},
});
2.4 锥形飞线(由宽至窄)
const redLine = viewer.entities.add({
name: "redLine",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
116.39, 39.9, 100, 116.38, 39.85, 100, 116.41, 39.86, 100, 116.41,
39.88, 100,
]),
width: 10,
// 飞线效果
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.5,
// 设置锥型的比例
taperPower: 0.5,
color: Cesium.Color.RED,
}),
// 设置折线固定在地面上
// clampToGround: true,
},
});