Cesium基础-判断鼠标当前位置是地形还是模型

Cesiumjs作为前端三维渲染的库，肯定少不了模型的加载。在gis领域的应用中，通常是地形+底图+模型的组合方式。

gis应用中，少不了在地形或模型上绘制点、线、面等对象。一般在地形上绘制点，我们需要设置高度模式为：贴地。这样，无论我们设置Z值是多高，点都会贴地形表面显示。而在模型上，由于不是地表，我们需要设置高度模式为：绝对高度。这样，点的位置就是我们设置的绝对Z值位置。

模型上，设置点为贴地效果，绝对向下俯视的视角看，是没问题的。但当视角发生偏移时，点的位置会出现偏移，效果很不好。如下图：我见过很多前端应用，都有类似的问题。

但是，怎么才能判断我绘制的位置是模型还是地形呢？

Cesium提供两种鼠标拾取笛卡尔坐标系的方式：

1、针对地形

  //场景相机向指定的鼠标位置（屏幕坐标）发射射线
  const ray = viewer.camera.getPickRay(windowPosition);
  //获取射线与三维球相交的点（即该鼠标位置对应的三维球坐标点，因为模型不属于球面的物体，所以无法捕捉模型表面）
  const cartesianTerrain = viewer.scene.globe.pick(ray,viewer.scene);

2、针对模型

    //根据窗口坐标，从场景的深度缓冲区中拾取相应的位置，返回笛卡尔坐标。
    const cartesianModel = viewer.scene.pickPosition(windowPosition); 

通过2中的方法原理，可以看出，该方法同样也可以捕获到地形的坐标。因此每次拾取时，只要判断两个方法返回的坐标值是否一样，即可知道是地形表面还是模型表面啦。

export function pickCartesian(viewer:Cesium.Viewer,windowPosition:Cesium.Cartesian2):PickResult{
    //根据窗口坐标，从场景的深度缓冲区中拾取相应的位置，返回笛卡尔坐标。
    const cartesianModel = viewer.scene.pickPosition(windowPosition); 
    
    //场景相机向指定的鼠标位置（屏幕坐标）发射射线
    const ray = viewer.camera.getPickRay(windowPosition);
    //获取射线与三维球相交的点（即该鼠标位置对应的三维球坐标点，因为模型不属于球面的物体，所以无法捕捉模型表面）
    const cartesianTerrain = viewer.scene.globe.pick(ray,viewer.scene);

    const result = new PickResult();
    if(typeof(cartesianModel) !== 'undefined' && typeof(cartesianTerrain) !== 'undefined'){
      result.cartesian = cartesianModel || cartesianTerrain;
      result.CartesianModel = cartesianModel;
      result.cartesianTerrain = cartesianTerrain as Cesium.Cartesian3;
      result.windowCoordinates = windowPosition.clone();
      //坐标不一致，证明是模型，采用绝对高度。否则是地形，用贴地模式。
      result.altitudeMode = cartesianModel.z.toFixed(0) !== cartesianTerrain!.z.toFixed(0) ? Cesium.HeightReference.NONE:Cesium.HeightReference.CLAMP_TO_GROUND;
    }
    return result;
  }

优化后的效果：