Cesium基础教程篇九

Cesium基础教程篇九

---

---

前言

Cesium官网：官网链接
Cesium 是一个开源的、高性能的 3D 地球和地图可视化平台，它允许开发者创建基于 Web 的、交互式的地理空间应用程序。Cesium 的核心是一个 WebGL 驱动的引擎，它能够渲染大规模的地理数据集，支持高精度的地球模型和动态数据可视化。

---

一、Cesium的用户交互

Cesium提供了交互功能，相机、事件、对象的拾取等都相应的封装了一些类去处理。
Cesium已经为我们封装了默认的相机交互功能（比如按住鼠标滚轮进行缩放），相关功能封装在ScreenSpaceCameraController类中。

1. 相机交互：ScreenSpaceCameraController
   
   如果您要修改默认的行为，可以通过viewer.scene.screenSpaceCameraController属性来进行设置，比如修改鼠标右键为旋转，其他的类似

viewer.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.PINCH, Cesium.CameraEventType.RIGHT_DRAG];

这里是系统内置的属性框，大多数情况下我们需要自定义属性框展示，比如火星上各种炫酷的自定义模板，如何实现？官网有个最简单的示例Overlays;其实原理很简单，dmo元素加指定的位置信息就可以了，内部已经将经纬度转换成屏幕坐标，下面是官网示例代码

const htmlOverlay = document.getElementById("htmlOverlay");
const scratch = new Cesium.Cartesian2();
const position = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
viewer.scene.preRender.addEventListener(function () { 
  const canvasPosition = viewer.scene.cartesianToCanvasCoordinates(
    position,
    scratch
  );
  if (Cesium.defined(canvasPosition)) {
    htmlOverlay.style.top = `${canvasPosition.y}px`;
    htmlOverlay.style.left = `${canvasPosition.x}px`;
  }
});

可以当其经纬度位于地球背面时，进行隐藏。

let occ=new Cesium.EllipsoidalOccluder(Cesium.Ellipsoid.WGS84,viewer.camera.position);
htmlOverlay.style.display=occ.isPointVisible(position)?"block":"none";

最后就是自己写一个炫酷的html代码就可以通过id绑定到具体位置了。

2. 对象的拾取（模型、点线面等）：是用户交互当中的一个重要功能，可以用来查看对象的属性信息或者高亮显示对象以突出表达某些信息。
   示例：初始化一个场景，然后添加一个实体对象

	let viewer = new Cesium.Viewer("map3d");  
    let p = [x, y, z];
    let position = Cesium.Cartesian3.fromDegrees(p[0], p[1], p[2]);
    let entity = new Cesium.Entity({
        position:position,
        box:{
            dimensions: new Cesium.Cartesian3(20.0, 20.0, 20.0),
        }
    })
    viewer.entities.add(entity);

点击该entity，就会出现该entity的基础信息，这就是对象的拾取

这里只显示id，默认第一显示name，如果想显示其他属性，就要在entity的description设置

let entity = new Cesium.Entity({
     position:position,
     name:"测试标题", 
     description:`
     <div>实体对象的属性id</div>
     <div>实体对象的属性name</div>
     <div>实体对象的属性user</div>
     `,
     box:{
         dimensions: new Cesium.Cartesian3(20.0, 20.0, 20.0),
     }
 })

3. 事件：通过鼠标事件来定义自己的用户交互功能。
   官方也是定义了ScreenSpaceEventHandler 类让我们自定义鼠标事件实现自定义功能，最常用的就是左击、右击、双击
   
   应用：可以根据单击事件获取屏幕坐标的位置再通过cesium的坐标转换转成相应的笛卡尔坐标或者对应坐标系下的经纬度等。

let screenSpaceEventHandler=new Cesium.ScreenSpaceEventHandler(viewer.canvas);
screenSpaceEventHandler.setInputAction(e=>{
    console.log(e);//e.point就是屏幕坐标了
    //如果是对象，就可以获取e.id啥的获取具体信息，具体对象视情况而定
},Cesium.ScreenSpaceEventType.LEFT_CLICK)

总结

这是第九章交互的基础知识学习，更多进一步的cesium相关知识请关注我，带你更深层次了解cesium

后续更多和cesium有关的更深度的内容可以在创奇社区找我 点击进入创奇社区