在平常的工作中,难免会用到倾斜摄影,当加载倾斜摄影的时候,最头疼的就是倾斜摄影的偏移问题,在代码中进行修改加载倾斜摄影的偏移参数,虽然简单但过于麻烦,也耽误开发的效率,因此我就本着能不能在三维场景中对倾斜摄影进行手动操作,无需再改代码并可将倾斜摄影放在较为正确的位置。为了实现这个功能,我就从网上找一些相关的资料,参照一些网上的大佬的代码进行修改,并补充相关知识,并不是那么及时的完成了这篇文章。希望大家多多收藏和点赞。
下文就是本文的实现思路和代码,并对文中的代码做出一定的注释,对于文章有不对的地方也希望大家进行指正,有大家的参与我才会有动力继续写下去,虽然产量微乎其微😄,但我希望对大家有帮助啊,取之开源用之开源啊。
接下来就开始直入主题啊,首先是绘制旋转标识器和平移标识器,毕竟有方向才好进行辨别啊。
移动指示器的绘制比较简单,通过Cesium.PolylineCollection()
将指示器的三个方向方向添加到其中,并将绘制形成的指示器通过primitive
的方式进行添加。
代码主要思路如下:
/**
* @description 绘制箭头
* @param {object} originDegree 初始点坐标点
* @param {object} targetDegree 目标点坐标点
*/
initLineArrow(originDegree, targetDegree, length) {
const arrows = new Cesium.PolylineCollection()
//坐标系方向存放原始坐标和目的点坐标
const xPos = [
originDegree.lng,originDegree.lat,originDegree.alt,
targetDegree.lng,originDegree.lat,originDegree.alt
]
const xArrow = this.drawArrow(arrows,'model_edit_xArrow',xPos,Cesium.Color.GREEN)
const yPos = [
originDegree.lng,originDegree.lat,originDegree.alt,
originDegree.lng,targetDegree.lat,originDegree.alt
]
const yArrow = this.drawArrow(arrows,'model_edit_yArrow',yPos,Cesium.Color.BLUE)
const zPos = [
originDegree.lng,originDegree.lat,originDegree.alt,
originDegree.lng,originDegree.lat,targetDegree.alt
]
const zArrow = this.drawArrow(arrows,'model_edit_zArrow',zPos,Cesium.Color.RED)
this._coordArrows = this._viewer.scene.primitives.add(arrows)
this._coordArrows._name = 'CoordAxis'
}
/**
* @description 绘制空间坐标轴(移动指示器)
* @param {Cesium.Collection} arrows 坐标轴集合
* @param {string} name xyz轴名称
* @param {Array} positions 坐标系位置
* @param {Cesium.Color} color 坐标系颜色
*/
drawArrow(arrows, name, positions, color) {
const arrow = arrows.add({
positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions),
width: this._defaultWidth,
material: Cesium.Material.fromType(Cesium.Material.PolylineArrowType, {
color: color
})
})
arrow._name = name
}
移动指示器的绘制原理也类似于移动指示器的绘制,通过Cesium.PolylineCollection()
将指示器的三个旋转方向添加到其中,并将绘制形成的指示器通过primitive
的方式进行添加。
/**
* @description 绘制旋转转轴
* @param {string} name 转轴的名字
* @param {Array} position 转轴的位置
* @param {Cesium.Matrix4} matrix 东北坐标系矩阵
* @param {Cesium.Color} color 转轴颜色
* @returns
*/
createAxisSphere(name, position, matrix, color) {
let result = new Cesium.Primitive({