Bootstrap

Cesium:入门教程(六)之 交互性(Interactivity)

Interactivity

    添加一些鼠标交互。为了提高我们的标记的可见性,当用户在标记上hovers时,我们可以改变它们的样式来突出显示。为了做出这个效果,我们使用拾取技术(picking),它能够根据一个屏幕上的像素位置返回三维场景中的对象信息。

    这里有以下几种不同的picking:

  • Scene.pick : 返回包含给定窗口位置的基元的对象。
  • Scene.drillPick : 返回包含给定窗口位置的所有原语的对象列表。
  • Globe.pick : 返回给定光线与地形的交点。
https://sandcastle.cesium.com/index.html?src=3D%20Tiles%20Feature%20Picking.html

 

    因为我们希望在hover触发高亮效果,首先需要创建一个鼠标动作处理器。为此,我们将使用ScreenSpaceEventHandler在输入操作中触发指定函数的处理程序。ScreenSpaceEventHandler.setInputAction()监听用户行为类型ScreenSpaceEventType,并运行一个特定的函数,将用户操作传递为参数。这里,我们将传递一个以movement为输入的函数。

    处理程序将在鼠标movement中传递,从中我们可以提取一个窗口位置与pick()一起使用。如果拾取返回billboard对象,我们知道我们在一个标记上hovering。然后,使用我们了解的Entity样式,我们可以应用突出显示样式。

    这里我们用一个简单的例子来展示效果,需要加载之前用过的GeoJson 点数据(./APPs/SampleData/simplestyles.geojson)

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

handler.setInputAction(function(movement) {
    var pickedPrimitive = viewer.scene.pick(movement.endPosition);
    var pickedEntity = (Cesium.defined(pickedPrimitive)) ? pickedPrimitive.id : undefined;
    // Highlight the currently picked entity
    if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.point)) {
        pickedEntity.point.pixelSize= 2.0;
        pickedEntity.point.color = Cesium.Color.ORANGERED;
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    当我们移动光标时,点保持突出。我们可以通过跟踪最后一个点来修复,并恢复原来的样式,对上面的代码进行修改

var previousPickedEntity = undefined;
handler.setInputAction(function(movement) {
    var pickedPrimitive = viewer.scene.pick(movement.endPosition);
    var pickedEntity = (Cesium.defined(pickedPrimitive)) ? pickedPrimitive.id : undefined;
    // Unhighlight the previously picked entity
    if (Cesium.defined(previousPickedEntity)) {
        previousPickedEntity.point.pixelSize = 10;
        previousPickedEntity.point.color = Cesium.Color.WHITE;
    }
    // Highlight the currently picked entity
    if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.point)) {
        pickedEntity.point.pixelSize = 20;
        pickedEntity.point.color = Cesium.Color.ORANGERED;
        previousPickedEntity = pickedEntity;
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

 

系列

    Cesium:入门教程(一)之 Hello World

    Cesium:入门教程(二)之数据源加载

    Cesium:入门教程(三)之视窗配置

    Cesium:入门教程(四)之 Entities

    Cesium:入门教程(五)之 3D Tiles

    Cesium:入门教程(六)之 交互性(Interactivity)

;