多个entity创建 polyline线段,在界面查看起来不那么方便快捷,所以我设计的通过鼠标单击某一个线段,他单独显示,其他线段隐藏起来
效果展示
point() {
var viewer = this.viewer;
var entites = [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10"
];
var redLine = viewer.entities.add({
name: "Red line on terrain",
id: "1",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
width: 5,
material: Cesium.Color.RED,
clampToGround: true,
},
});
var greenRhumbLine = viewer.entities.add({
name: "Green rhumb line",
id: "2",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
width: 5,
arcType: Cesium.ArcType.RHUMB,
material: Cesium.Color.GREEN,
},
});
var glowingLine = viewer.entities.add({
id: "3",
name: "Glowing blue line on the surface",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([-75, 37, -125, 37]),
width: 10,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.2,
taperPower: 0.5,
color: Cesium.Color.CORNFLOWERBLUE,
}),
},
});
var orangeOutlined = viewer.entities.add({
id: "4",
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,
}),
},
});
var purpleArrow = viewer.entities.add({
id: "5",
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
),
},
});
var dashedLine = viewer.entities.add({
name: "Blue dashed line",
id: "6",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75, 45, 500000, -125, 45, 500000,
]),
width: 4,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.CYAN,
}),
},
});
var dashedLine = viewer.entities.add({
name: "Blue dashed line",
id: "7",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75, 49, 500000, -125, 45, 500000,
]),
width: 4,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.CYAN,
}),
},
});
var dashedLine = viewer.entities.add({
name: "Blue dashed line",
id: "8",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75, 50, 500000, -125, 45, 500000,
]),
width: 4,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.CYAN,
}),
},
});
var dashedLine = viewer.entities.add({
name: "Blue dashed line",
id: "9",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75, 55, 500000, -125, 45, 500000,
]),
width: 4,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.CYAN,
}),
},
});
var dashedLine = viewer.entities.add({
name: "Blue dashed line",
id: "10",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75, 75, 500000, -125, 45, 500000,
]),
width: 4,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.CYAN,
}),
},
});
// var entity = viewer.entities.getById("1");
// console.log(entity);
/*
*1.通鼠标单击获取entity的ID
*2.将ID跟数组里面的ID进行筛选,如果有就过滤,输出数组所有数据
*3.通过entity.show方法进行true/false显示和隐藏
*
*/
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((movement) => {
var pick = viewer.scene.pick(movement.position);
if (Cesium.defined(pick)) {
if (pick.id.id) {
var id = pick.id.id;
var newArr = entites.filter((item) => item.indexOf(id) < 0);
//var entity = viewer.entities.getById("1");
newArr.forEach(function (item) {
if (item) {
viewer.entities.getById(item).show = false;
}
});
}
}
handler.setInputAction((movement) => {
var pick = viewer.scene.pick(movement.position);
//var entity = viewer.entities.getById("1");
entites.forEach(function (item) {
if (item) {
viewer.entities.getById(item).show = true;
}
});
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
},
这里的数组是我提前设置好的,你们可以数据存到数组