cesium贴地效果的点,线,面绘制

983 阅读1分钟

主线任务

处理绘制点,线,面时候不仅仅是在地球表面而是在地球的地形上面去进行相关绘制

代码部分

    //左键点击操作
    handler.setInputAction(function (click) {
      // 将当前的屏幕坐标转为ray(射线)
      var ray = viewer.camera.getPickRay(click.position);
      // 找出ray和地形的交点,即可求出三维世界坐标
      var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
      tempPoints.push(cartesian);

      tempPoints.push(cartesian);
      let tempLength = tempPoints.length;
      //调用绘制点的接口
      let point = drawPoint(cartesian);
      tempEntities.push(point);
      if (tempLength > 1) {
        let pointline = drawPolyline([
          tempPoints[tempPoints.length - 2],
          tempPoints[tempPoints.length - 1],
        ]);
        tempEntities.push(pointline);
      } else {
        console.log("请绘制下一个点,右键结束");
      }
      return;
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

其实核心就是在于在获取坐标点的位置的时候发现利用viewer.scene.camera.pickEllipsoid方法永远拿到的坐标都是在地球表面的世界坐标,所以需要换成globe.pick的方式去获取相关坐标,这样就可以拿到地形上面的坐标。将前文的这部分逻辑替换即可。

常见4种坐标获取的方法

a. 获取屏幕坐标

var viewer = new Cesium.Viewer('cesiumContainer'); 
var handler= new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) { 
console.log(movement.position); 
}, Cesium.ScreenSpaceEventType.LEFT_CLICK); 

b. 世界坐标 注意拿到永远是地表非地形坐标

var position = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid) 

c. 场景坐标 包括获取倾斜摄影或模型点击处的笛卡尔坐标 根据窗口坐标,从场景的深度缓冲区中拾取相应的位置,返回笛卡尔坐标

viewer.scene.pickPosition(movement.position) 

d. 地标坐标 获取点击处地球表面的世界坐标,不包括模型、倾斜摄影表面

ray=viewer.camera.getPickRay(movement.position) 
viewer.scene.globe.pick(ray, scene)

e.补充

当利用pickPosition获取地形上坐标时发现坐标不准处理方案 viewer.scene.globe.depthTestAgainstTerrain = true; //开启地形深度检测

scene.pickPosition只有在开启地形深度检测,且不使用默认地形时是准确的 解决viewer.scene.pickPosition(e.position)在没有3dTile模型下的笛卡尔坐标不准问题

效果图

1648022288(1).jpg

参考链接

sandcastle.cesium.com/?src=Clamp%…

blog.csdn.net/weixin_3971…