cesium根据id选中实体

最新推荐文章于 2025-09-16 20:11:58 发布

原创最新推荐文章于 2025-09-16 20:11:58 发布 · 3.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #cesium

cesium 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Cesium三维地球中，利用JavaScript实现根据实体ID选取并高亮显示的功能，包括查找实体、设置高亮样式以及取消高亮的方法。

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var instance = new Cesium.GeometryInstance({
  geometry : new Cesium.RectangleGeometry({
    rectangle : Cesium.Rectangle.fromDegrees(-100.0, 30.0, -90.0, 40.0),
    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
  }),
  id : 'my rectangle',
  attributes : {
    color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
  }
});

scene.primitives.add(new Cesium.Primitive({
  geometryInstances : instance,
  appearance : new Cesium.PerInstanceColorAppearance()
}));

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
    var pick = scene.pick(movement.position);
    if (Cesium.defined(pick) && (pick.id === 'my rectangle')) {
      console.log('Mouse clicked rectangle.');
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);