Cesium通视分析及测试源码

Cesium版本V1.89

废话不多说，上码，我们走~

/*** visibility_analysis* 通视分析* 作者：八两金鱼*/class VisibilityAnalysisClass{/*** 初始化* @param {Cesium.viewer} viewer* @param {非作者不建议使用} tileset_EXPERIMENTAL */constructor(viewer,tileset_EXPERIMENTAL){this.viewer=viewerthis.positions=[]this.resultPolylines=[]this.tileset=tileset_EXPERIMENTAL}/*** 设置通视分析的视点和目标点* @param {Cesium.Cartesian3} viewPosition * @param {Cesium.Cartesian3} targetPosition */setPositions(viewPosition,targetPosition){this.positions=[viewPosition,targetPosition]}/*** 设置position的向上偏移高度，避免嵌入模型中* @param {number} offsetHei */useOffsetHeight(offsetHei){this.positions = this.positions.map((pos=>{let cartographic = Cesium.Cartographic.fromCartesian(pos);let lon = Cesium.Math.toDegrees(cartographic.longitude);let lat = Cesium.Math.toDegrees(cartographic.latitude);let hei = cartographic.heightreturn Cesium.Cartesian3.fromDegrees(lon, lat, hei+offsetHei)}))}/*** 通视分析*/startAnalysis(){// 计算射线的方向，目标点left 视域点rightvar direction = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(this.positions[1], this.positions[0], new Cesium.Cartesian3()), new Cesium.Cartesian3());// 建立射线var ray = new Cesium.Ray(this.positions[0], direction);//获取射线确定的矩形内所有的features//如果初始化传入了tileset 就采用实验性的方法var objectsToExclude = Cesium.defined(this.tileset) ? this.getObjectsToExclude_EXPERIMENTAL(this.tileset) : this.getObjectsToExclude(this.positions)var result = this.viewer.scene.pickFromRay(ray, objectsToExclude); //计算射线与objectsToExclude交互点，返回第一个交点this.resultPolylines = this.showIntersection(result, this.positions[1], this.positions[0]);}/*** 获取两点构成的矩形内所有的要素* @param {Cesium.Cartesian3[]} positions* @returns {}  两点构成的矩形内所有的要素数组*/getObjectsToExclude(positions){return []}/*** 实验性，暂无官方接口，使用的是tileset._selectedTiles .....* @param {Cesium.Cartesian3[]} positions* @returns {}  [tileset._selectedTiles[i].content.getFeature(x)]*/getObjectsToExclude_EXPERIMENTAL(tileset){var features = []tileset._selectedTiles.forEach((tile)=>{const {content,content:{featuresLength}} = tilefor(let i=0;i<featuresLength;i++){features.push(content.get(i))}})return features}/*** 处理交互点* @param {*} result * @param {Cesium.Cartesian3} targetPosition * @param {Cesium.Cartesian3} viewPosition * @returns */showIntersection(result, targetPosition, viewPosition) {let resultPolylines = [];let resultLine;//Cesium.defined ....... souce/core/defined.jsif (Cesium.defined(result) && Cesium.defined(result.object)) {resultLine = this.drawResultLine(viewPosition, result.position, Cesium.Color.CHARTREUSE); // 可视区域resultPolylines.push(resultLine);resultLine = this.drawResultLine(result.position, targetPosition, Cesium.Color.RED); // 不可视区域resultPolylines.push(resultLine);} else {resultLine = this.drawResultLine(viewPosition, targetPosition, Cesium.Color.CHARTREUSE);resultPolylines.push(resultLine);}return resultPolylines;}/*** 绘制不同颜色的直线* @param {Cesium.Cartesian3} startPosition * @param {Cesium.Cartesian3} destPosition * @param {Cesium.Color} color * @returns {viewer.entities.add(...)}*/drawResultLine(startPosition, destPosition, color){return this.viewer.entities.add({polyline:{positions: [startPosition,destPosition],width: 5,material: color}})}/** Cesium Scene.js 源码* @param {Ray} ray The ray.* @param {Object[]} [objectsToExclude] A list of primitives, entities, or 3D Tiles features to exclude from the ray intersection.* @param {Number} [width=0.1] Width of the intersection volume in meters.* @returns {Object} An object containing the object and position of the first intersection.** @exception {DeveloperError} Ray intersections are only supported in 3D mode.*///    Scene.prototype.pickFromRay = function (ray, objectsToExclude, width) {//      return this._picking.pickFromRay(this, ray, objectsToExclude, width);//    };/*** Cesium Picking.js 源码（Scene中的pickFromRay返回值是挂在this._picking上的同名方法，该方法的源码如下* function pickFromRay(picking,scene,ray,objectsToExclude,width,requirePosition,mostDetailed) {var results = getRayIntersections(picking,scene,ray,1,objectsToExclude,width,requirePosition,mostDetailed);if (results.length > 0) {return results[0];}}*//** Cesium.defined */// function defined(value) {//     return value !== undefined && value !== null;// }
}

客官，再看个效果图吧？

好了，接下来说一下思路：
  从视点（viewPosition）向目标点（targetPosition）发出射线，如果射线与加载的模型（本文是3d tileset中的features）有交点，则可视性仅为视点到该交点（绿色线），而该交点到目标点之间是不可视的（红色线）。

  有一个要注意的点是，在可视分析的时候，常常需要考虑观察者或者仪器的高度，所以本文代码提供了useOffsetHeight接口，用来拔高视点与目标点的高度。

  如果本文写到这里就结束了，肯定有萌新小伙伴会难过：怎么又找到一篇不告诉我怎么用你这个代码的文章！

  行吧，来

/*** v_a_test.js* 测试通视分析*/
var VA = null
var VA_handler = null
var VA_positions = []
function run_v_a_test(){if(VA && VA.resultPolylines){VA.resultPolylines.forEach((e)=>{viewer.entities.remove(e)})VA_positions=[]}vaTestBtn.value='选取视点'VA_handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);VA_handler.setInputAction(function (e) {var position = viewer.scene.pickPosition(e.position);VA_positions.push(position);console.log(position)alert('取点成功')if(VA_positions.length==1){vaTestBtn.value='选取目标点'}else if(VA_positions.length==2){vaTestBtn.value='开始分析'vaTestBtn.onclick=function(){va_analysis()}}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}function va_analysis(){VA_handler.destroy()VA = new VisibilityAnalysisClass(viewer,tileset)VA.setPositions(...VA_positions)VA.useOffsetHeight(0.5)VA.startAnalysis()vaTestBtn.value='通视分析'vaTestBtn.onclick = run_v_a_test
}var vaTestBtn = document.createElement('input')
viewer.container.appendChild(vaTestBtn)
vaTestBtn.type='button'
vaTestBtn.value='通视分析'
vaTestBtn.style.position='absolute'
vaTestBtn.style.bottom = '100px'
vaTestBtn.style.right = '100px'
vaTestBtn.onclick = run_v_a_test

  呐，测试用的代码也一并奉上啦~
  如果有小伙伴还疑惑，直接复制粘贴怎么不能运行，稍微加1点点代码哦！
  最后，有关3d tileset的加载和测试用的数据，那是另一个故事了，网上搜一搜就能解决的事，我就不在这bb啦~