多条轨迹选中单个显示,其他隐藏

多个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);
},

这里的数组是我提前设置好的,你们可以数据存到数组

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白学过的代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值