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;
}
优化后的效果: