select - 铯 : Trigger event when a point is selected

Question

我确信这很简单，但我已经搜索并查看了 Cesium 的文档。 我在 Canvas 上绘制了几个点。 它们根据它们所代表的内容进行颜色编码。 我现在想“点击”一个点并在 JS 中发起一个 Action 。 我已经成功捕获了点击事件...(鼠标左键)..但我想知道我点击了哪个点。这可能吗？如果是这样，它看起来如何？

viewer.screenSpaceEventHandler.setInputAction(function() {
alert("left click");}, Cesium.ScreenSpaceEventType.LEFT_DOWN);`

Answer 1

有多种方法可以做到这一点。如果这些点已被创建为铯“实体”，那么您可以使用 viewer.selectedEntityChanged跟踪更改的事件。

这是一个 live demo .首先单击底部的“控制台”选项卡，然后单击黄色和蓝色点。

var viewer = new Cesium.Viewer("cesiumContainer");

viewer.entities.add({
  name: "Yellow Point",
  position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
  point: {
    pixelSize: 10,
    color: Cesium.Color.YELLOW,
  },
});

viewer.entities.add({
  name: "Blue Point",
  position: Cesium.Cartesian3.fromDegrees(-79.59777, 40.03883),
  point: {
    pixelSize: 10,
    color: Cesium.Color.BLUE,
  },
});

viewer.selectedEntityChanged.addEventListener(function(selectedEntity) {
  if (Cesium.defined(selectedEntity)) {
      if (Cesium.defined(selectedEntity.name)) {
        console.log('Selected ' + selectedEntity.name);
      } else {
        console.log('Unknown entity selected.');
      }
  } else {
    console.log('Deselected.');
  }
});

如果这些点不是实体(例如，图形基元)，或者如果您需要对选择过程进行更多的手动控制，那么您需要的是一个称为“拾取”的系统。这是一个 Sandcastle Demo showing Picking ，如果您在本地构建 SandcaSTLe，则可以在开发人员部分找到其他拾取演示。 Picking 是一个低级系统，Cesium 在内部重新渲染场景的一小部分，以便找出给定屏幕空间位置(例如鼠标指针或触摸位置)上的内容。它是 Cesium 中几乎所有选择的动力，但它会影响性能，尤其是在使用不当的情况下。查看器的 selectedEntity 机制 uses picking under the hood .

但是，如果您只有几个实体并且想要跟踪选择，则可以使用 selectedEntityChanged 事件，它会简单得多。