360 lines
11 KiB
JavaScript
360 lines
11 KiB
JavaScript
import FRUSTUN from './frustum.js'
|
||
import BillordPointLine from './billord_point_line'
|
||
|
||
export default class PointRoute {
|
||
constructor(options = {}, viewer, viewer1) {
|
||
this.options = { ...options }
|
||
this.viewer = viewer
|
||
this.viewer1 = viewer1
|
||
this.entity = null
|
||
this.frustum = null
|
||
this.billordPointLineMaps = []
|
||
this.index = 0
|
||
this.positions = []
|
||
PointRoute.setDefaultValue(this)
|
||
this.create()
|
||
}
|
||
static setDefaultValue(that) {
|
||
that.options.positions = that.options.positions || []
|
||
that.options.show = that.options.show || true
|
||
that.options.color = that.options.color || '#00d590'
|
||
that.options.height = that.options.height || 500
|
||
that.options.speed = that.options.speed || 1
|
||
that.options.frustumShow = that.options.frustumShow ?? true
|
||
that.options.saveFun = that.options.saveFun || null
|
||
that.options.selectFun = that.options.selectFun || null
|
||
that.options.keyboard = that.options.keyboard ?? true
|
||
that.options.normalHeight = that.options.normalHeight || 100
|
||
that.options.airHeight = that.options.airHeight || 100
|
||
}
|
||
create() {
|
||
if (this.options.positions.length < 2) {
|
||
return
|
||
}
|
||
let that = this
|
||
let { frustumShow } = that.options
|
||
this.entity = this.viewer.entities.add({
|
||
show: this.options.show,
|
||
polyline: {
|
||
positions: new Cesium.CallbackProperty(() => {
|
||
let positions = []
|
||
for (let i = 0; i < this.billordPointLineMaps.length; i++) {
|
||
const element = this.billordPointLineMaps[i]
|
||
positions.push(element.billboardEntity.position.getValue())
|
||
}
|
||
return positions
|
||
}, false),
|
||
width: 3,
|
||
material: Cesium.Color.fromCssColorString(this.options.color)
|
||
}
|
||
})
|
||
// 创建点、线、billbord
|
||
for (let i = 0; i < this.options.positions.length; i++) {
|
||
const element = this.options.positions[i]
|
||
// console.log("elementelementelement", element);
|
||
if (frustumShow && i == this.index) {
|
||
this.frustum = new FRUSTUN(
|
||
{
|
||
position: element,
|
||
show: false,
|
||
arr: this.options.positions,
|
||
index: i,
|
||
normalHeight: this.options.normalHeight
|
||
},
|
||
this.viewer,
|
||
this.viewer1
|
||
)
|
||
}
|
||
let op = new BillordPointLine(
|
||
{
|
||
positions: element,
|
||
index: i + 1,
|
||
saveFun: that.options.saveFun,
|
||
selectFun: that.options.selectFun,
|
||
keyboard: that.options.keyboard,
|
||
updateFrustumFun: that.updateFrustumPosition,
|
||
normalHeight: that.options.normalHeight,
|
||
frustum: that.frustum,
|
||
airHeight: that.options.airHeight
|
||
},
|
||
this.viewer
|
||
)
|
||
this.billordPointLineMaps.push(op)
|
||
}
|
||
this.onKey()
|
||
}
|
||
get show() {
|
||
return this.options.show
|
||
}
|
||
set show(bool) {
|
||
if (typeof bool === 'boolean') {
|
||
this.frustum.currentFrustumOutline.show = bool
|
||
this.billordPointLineMaps.forEach(item => {
|
||
item.show = bool
|
||
})
|
||
this.entity.show = bool
|
||
}
|
||
}
|
||
// 监听键盘事件
|
||
onKey() {
|
||
let that = this
|
||
document.addEventListener('keydown', function(event) {
|
||
switch (event.key) {
|
||
case 'ArrowUp':
|
||
that.index += 1
|
||
that.updateFrustum(true)
|
||
break
|
||
case 'ArrowDown':
|
||
that.index -= 1
|
||
that.updateFrustum(false)
|
||
break
|
||
}
|
||
})
|
||
}
|
||
// 更新frustum
|
||
updateFrustum(flag) {
|
||
console.log(this.index)
|
||
let obj
|
||
if (this.index > this.options.positions.length - 1 || this.index < 0) {
|
||
let str = this.index > 0 ? '已选中最后一个航点' : '已选中第一个航点'
|
||
alert(str)
|
||
return
|
||
}
|
||
for (let i = 0; i < this.billordPointLineMaps.length; i++) {
|
||
const element = this.billordPointLineMaps[i]
|
||
const hpr = null
|
||
if (i == this.index) {
|
||
let position = element.billboardEntity.position.getValue()
|
||
if (this.index !== 0) {
|
||
obj = this.direction(
|
||
this.billordPointLineMaps[
|
||
i - 1
|
||
].billboardEntity.position.getValue(),
|
||
element.billboardEntity.position.getValue()
|
||
)
|
||
hpr = obj.hpr
|
||
}
|
||
if (this.index == 0) {
|
||
obj = this.direction(
|
||
this.billordPointLineMaps[0].billboardEntity.position.getValue(),
|
||
this.billordPointLineMaps[1].billboardEntity.position.getValue()
|
||
)
|
||
hpr = obj.hpr
|
||
}
|
||
if (hpr) {
|
||
this.frustum.updateFrustumHPR(
|
||
hpr.heading,
|
||
this.frustum.pitch,
|
||
hpr.roll
|
||
)
|
||
}
|
||
if (position) {
|
||
this.frustum.updateFrustumPosition('update', position)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
cartesian3Towgs84(cartesian) {
|
||
var ellipsoid = this.viewer.scene.globe.ellipsoid
|
||
var cartesian3 = new Cesium.Cartesian3(
|
||
cartesian.x,
|
||
cartesian.y,
|
||
cartesian.z
|
||
)
|
||
var cartographic = ellipsoid.cartesianToCartographic(cartesian3)
|
||
var lat = Cesium.Math.toDegrees(cartographic.latitude)
|
||
var lng = Cesium.Math.toDegrees(cartographic.longitude)
|
||
var alt = cartographic.height < 0 ? 0 : cartographic.height
|
||
return {
|
||
lng: lng,
|
||
lat: lat,
|
||
alt: alt
|
||
}
|
||
}
|
||
// 计算一个到另一个点的方向
|
||
direction(pointA, pointB) {
|
||
//向量AB
|
||
const vector2 = Cesium.Cartesian3.subtract(
|
||
pointA,
|
||
pointB,
|
||
new Cesium.Cartesian3()
|
||
)
|
||
//归一化
|
||
const normal = Cesium.Cartesian3.normalize(vector2, new Cesium.Cartesian3())
|
||
//旋转矩阵 rotationMatrixFromPositionVelocity源码中有，并未出现在cesiumAPI中
|
||
const rotationMatrix3 = Cesium.Transforms.rotationMatrixFromPositionVelocity(
|
||
pointA,
|
||
normal,
|
||
Cesium.Ellipsoid.WGS84
|
||
)
|
||
const modelMatrix4 = Cesium.Matrix4.fromRotationTranslation(
|
||
rotationMatrix3,
|
||
pointA
|
||
)
|
||
// 获取getHeadingPitchRoll
|
||
let m1 = Cesium.Transforms.eastNorthUpToFixedFrame(
|
||
Cesium.Matrix4.getTranslation(modelMatrix4, new Cesium.Cartesian3()),
|
||
Cesium.Ellipsoid.WGS84,
|
||
new Cesium.Matrix4()
|
||
)
|
||
// 矩阵相除
|
||
let m3 = Cesium.Matrix4.multiply(
|
||
Cesium.Matrix4.inverse(m1, new Cesium.Matrix4()),
|
||
modelMatrix4,
|
||
new Cesium.Matrix4()
|
||
)
|
||
// 得到旋转矩阵
|
||
let mat3 = Cesium.Matrix4.getMatrix3(m3, new Cesium.Matrix3())
|
||
// 计算四元数
|
||
let q = Cesium.Quaternion.fromRotationMatrix(mat3)
|
||
// 计算旋转角(弧度)
|
||
let hpr = Cesium.HeadingPitchRoll.fromQuaternion(q)
|
||
// hpr.pitch = hpr.pitch + 3.14 / 2 + 3.14;
|
||
hpr.pitch = 90
|
||
let orientation = Cesium.Transforms.headingPitchRollQuaternion(pointA, hpr)
|
||
return { hpr, orientation }
|
||
}
|
||
/**
|
||
*
|
||
* @param {index} 索引
|
||
*/
|
||
// 删除航点
|
||
delPosition(index) {
|
||
this.options.positions.splice(index, 1)
|
||
// this.options.positions = this.options.positions.filter((item, index) => index !== i);
|
||
this.remove()
|
||
this.create()
|
||
}
|
||
// 获取最新的positions
|
||
getNewPositions() {
|
||
let positions = []
|
||
for (let i = 0; i < this.billordPointLineMaps.length; i++) {
|
||
const element = this.billordPointLineMaps[i]
|
||
let position = this.cartesian3Towgs84(
|
||
element.billboardEntity.position.getValue()
|
||
)
|
||
positions.push(position)
|
||
}
|
||
return positions
|
||
}
|
||
// 删除
|
||
remove() {
|
||
this.billordPointLineMaps.forEach((item, i) => {
|
||
item.remove()
|
||
})
|
||
if (this.frustum) {
|
||
this.frustum.remove()
|
||
}
|
||
this.viewer.entities.remove(this.entity)
|
||
this.billordPointLineMaps = []
|
||
}
|
||
/**
|
||
*
|
||
* @param {String} type
|
||
* @param {Number} index
|
||
* @param {Array} position
|
||
*/
|
||
// 新增航点 （before，after，end）
|
||
addPoint(positions) {
|
||
this.options.positions = positions
|
||
this.remove()
|
||
this.create()
|
||
}
|
||
// 根据选中的点更新视锥的位置
|
||
updateFrustumPosition(index) {
|
||
if (!this.billordPointLineMaps || this.billordPointLineMaps.length === 0)
|
||
return
|
||
if (this.frustum) {
|
||
this.frustum.show = true
|
||
}
|
||
let current = this.billordPointLineMaps[
|
||
index
|
||
].billboardEntity.position.getValue()
|
||
if (index !== 0) {
|
||
let obj
|
||
let after =
|
||
index === this.billordPointLineMaps.length - 1
|
||
? this.billordPointLineMaps[
|
||
index - 1
|
||
].billboardEntity.position.getValue() // 获取前一个位置
|
||
: this.billordPointLineMaps[
|
||
index + 1
|
||
].billboardEntity.position.getValue() // 获取下一个位置
|
||
obj = this.direction(
|
||
index === this.billordPointLineMaps.length - 1 ? after : current,
|
||
index === this.billordPointLineMaps.length - 1 ? current : after
|
||
)
|
||
let { hpr } = obj
|
||
this.frustum.updateFrustumHPR(
|
||
hpr.heading,
|
||
Cesium.Math.toRadians(this.frustum.pitch),
|
||
hpr.roll
|
||
)
|
||
} else {
|
||
let obj
|
||
let after = this.billordPointLineMaps[1].billboardEntity.position.getValue()
|
||
obj = this.direction(current, after)
|
||
let { hpr } = obj
|
||
this.frustum.updateFrustumHPR(
|
||
hpr.heading,
|
||
Cesium.Math.toRadians(this.frustum.pitch),
|
||
hpr.roll
|
||
)
|
||
}
|
||
if (current) {
|
||
this.frustum.updateFrustumPosition('update', current)
|
||
}
|
||
let position = this.cartesian3Towgs84(current)
|
||
this.billordPointLineMaps.forEach(item => {
|
||
item.billboardEntity.label.show = false // 先将所有元素的 label.show 设置为 false
|
||
})
|
||
const targetItem = this.billordPointLineMaps.find(
|
||
item => item.billboardEntity.index == index + 1
|
||
)
|
||
if (targetItem) {
|
||
targetItem.billboardEntity.label.show = true // 然后找到匹配的 index 设置为 true
|
||
}
|
||
return position
|
||
}
|
||
flyTo() {
|
||
let positionArray = []
|
||
for (let i = 0; i < this.options.positions.length; i++) {
|
||
let a = Cesium.Cartesian3.fromDegrees(
|
||
this.options.positions[i].lng,
|
||
this.options.positions[i].lat,
|
||
this.options.positions[i].alt + this.options.height
|
||
)
|
||
positionArray.push(a.x, a.y, a.z)
|
||
}
|
||
let BoundingSphere = Cesium.BoundingSphere.fromVertices(positionArray)
|
||
this.viewer.camera.flyToBoundingSphere(BoundingSphere, {
|
||
offset: {
|
||
heading: Cesium.Math.toRadians(0.0),
|
||
pitch: Cesium.Math.toRadians(-80.0),
|
||
roll: Cesium.Math.toRadians(0.0)
|
||
}
|
||
})
|
||
}
|
||
//计算航线的长度
|
||
countLength() {
|
||
if (this.options.positions.length < 2) {
|
||
return 0
|
||
} else {
|
||
let lineString = []
|
||
this.options.positions.forEach(item => {
|
||
lineString.push([item.lng, item.lat])
|
||
})
|
||
var line = turf.lineString(lineString)
|
||
return (turf.length(line) * 1000).toFixed(2)
|
||
}
|
||
}
|
||
//计算航线时间
|
||
countTime() {
|
||
let time = Math.floor(Number(this.countLength())) / this.options.speed
|
||
let s = Math.floor(time % 60)
|
||
let m = Math.floor(time / 60)
|
||
let str = m + '分' + s + '秒'
|
||
return str
|
||
}
|
||
}
|