cesium绘制图斑的三种方式

是L啊

于 2023-07-03 09:48:50 发布

阅读量731

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_41590119/article/details/131509428

文章介绍了在Cesium中通过ScreenSpaceEventHandler处理点击事件，结合camera.getPickRay和globe.pick方法获取地球表面坐标。同时讨论了当使用camera.pickEllipsoid和scene.pickPosition在加载地形的场景中可能存在的坐标误差问题，提出通过开启地形深度检测（depthTestAgainstTerrain）来优化pickPosition的准确性，但pickEllipsoid仍然存在问题。解决方案参考自Cesium的官方文档和社区分享。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、绑定点击事件;

2、保存点数据；

3、绘制添加到集合；

const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (event) {
  const ray = viewer.camera.getPickRay(event.position);
  const earthPosition = viewer.scene.globe.pick(ray, viewer.scene);
  if (Cesium.defined(earthPosition)) {
    
    activeShapePoints.push(earthPosition);
    createPoint(earthPosition);
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

上面代码坐标是第一步骤中关键代码，用于获取坐标，获取采用 camera.getPickRay() + globe.pick()方式；

除此之外还可以使用如下两种：

1、camera.pickEllipsoid(windowPosition, ellipsoid)

2、scene.pickPosition(windowPosition)

这两种方式直接使用时在加载地形的场景上获取的坐标都有误差，

这个时候可以开启地形深度检测

//解决viewer.scene.pickPosition(e.position)在没有3dTile模型下的笛卡尔座标不准问题。
viewer.scene.globe.depthTestAgainstTerrain = true;

开启之后pickPosition就可以愉快的玩耍了，但是pickEllipsoid还是不行;

参考文章：Cesium的pickEllipsoid和pickPosition - 简书