273 lines
9.3 KiB
JavaScript
273 lines
9.3 KiB
JavaScript
export default class BillordPointLine {
|
||
constructor(options, viewer) {
|
||
this.options = { ...options }
|
||
this.pointEntity = null
|
||
this.billboardEntity = null
|
||
this.lineEntity = null
|
||
this.updatedPosition = []
|
||
this.pointUpdatedPosition = []
|
||
this.viewer = viewer
|
||
this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
|
||
this.pinBuilder = new Cesium.PinBuilder()
|
||
this.index = null
|
||
//定义屏幕点击事件处理器
|
||
BillordPointLine.setDefaultValue(this)
|
||
BillordPointLine.init(this)
|
||
}
|
||
static setDefaultValue(that) {
|
||
that.options.positions = that.options.positions || {}
|
||
that.options.normalHeight = that.options.normalHeight || 100
|
||
that.options.airHeight = that.options.airHeight || 100
|
||
that.options.image = that.options.image || '/static/img/cluster2.png'
|
||
that.options.show = that.options.show || true
|
||
that.options.index = that.options.index || 1
|
||
that.options.saveFun = that.options.saveFun || null
|
||
that.options.selectFun = that.options.selectFun || null
|
||
that.options.keyboard = that.options.keyboard ?? true
|
||
that.options.updateFrustumFun = that.options.updateFrustumFun || null
|
||
that.options.frustum = that.options.frustum || null
|
||
}
|
||
static init(that) {
|
||
let positions = that.options.positions
|
||
// 添加一个Point，稍微偏离地面高度，使其完全可见
|
||
that.pointEntity = that.viewer.entities.add({
|
||
show: that.options.show,
|
||
position: Cesium.Cartesian3.fromDegrees(positions.lng, positions.lat, 0), // 地面上
|
||
point: {
|
||
pixelSize: 8,
|
||
color: Cesium.Color.WITHE,
|
||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 使用相对地面或贴地，
|
||
disableDepthTestDistance: 0
|
||
}
|
||
})
|
||
//
|
||
let pinIndex = that.pinBuilder
|
||
.fromText(
|
||
that.options.index,
|
||
Cesium.Color.fromCssColorString('#00d590'),
|
||
36
|
||
)
|
||
.toDataURL()
|
||
let altitude = 0
|
||
if (positions.altitude) {
|
||
altitude = positions.altitude
|
||
} else {
|
||
altitude = that.options.normalHeight
|
||
}
|
||
// 添加一个Billboard
|
||
that.billboardEntity = that.viewer.entities.add({
|
||
show: that.options.show,
|
||
position: Cesium.Cartesian3.fromDegrees(
|
||
positions.lng,
|
||
positions.lat,
|
||
positions.alt + that.options.normalHeight
|
||
),
|
||
// 判断altitude是否有值
|
||
|
||
label: {
|
||
text: `Lat: ${positions.lng.toFixed(8)}\nLon: ${positions.lat.toFixed(
|
||
8
|
||
)}\nAlt: ${altitude.toFixed(8)}m`,
|
||
font: '14px sans-serif',
|
||
fillColor: Cesium.Color.YELLOW,
|
||
outlineColor: Cesium.Color.BLACK,
|
||
outlineWidth: 2,
|
||
pixelOffset: new Cesium.Cartesian2(0, -60), // 标签偏移量，防止重叠
|
||
heightReference: Cesium.HeightReference.RELATIVE_TO_TERRAIN, // 确保标签与地面贴合
|
||
show: false
|
||
},
|
||
billboard: {
|
||
image: pinIndex, // 示例图像路径
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 图像底部对齐
|
||
width: 36,
|
||
height: 36
|
||
},
|
||
index: that.options.index
|
||
})
|
||
|
||
// 创建一个连接Point和Billboard的竖线
|
||
that.lineEntity = that.viewer.entities.add({
|
||
show: that.options.show,
|
||
polyline: {
|
||
positions: new Cesium.CallbackProperty(() => {
|
||
return [
|
||
that.pointEntity.position.getValue(),
|
||
that.billboardEntity.position.getValue()
|
||
]
|
||
}, false),
|
||
width: 1,
|
||
material: new Cesium.PolylineOutlineMaterialProperty({
|
||
outlineColor: Cesium.Color.GAINSBORO,
|
||
outlineWidth: 1,
|
||
color: Cesium.Color.WITHE
|
||
}),
|
||
zIndex: 99999999
|
||
}
|
||
})
|
||
if (that.options.keyboard) {
|
||
that.changeAltitude()
|
||
}
|
||
that.handler.setInputAction(function(movement) {
|
||
var pickedObject = that.viewer.scene.pick(movement.position)
|
||
if (
|
||
Cesium.defined(pickedObject) &&
|
||
Cesium.defined(pickedObject.id) &&
|
||
pickedObject.id === that.billboardEntity
|
||
) {
|
||
if (that.options.selectFun) {
|
||
that.options.selectFun(that.billboardEntity.index - 1)
|
||
}
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
||
}
|
||
// 改变高度
|
||
changeAltitude() {
|
||
var isMouseDown = false
|
||
var startPosition
|
||
var initialHeight
|
||
let that = this
|
||
let HHH = false
|
||
// 标识Alt键是否被按下
|
||
document.addEventListener('keydown', function(event) {
|
||
const key = event.key // 获取按下的键名
|
||
// 检查特定键是否被按下
|
||
if (key === 'h') {
|
||
HHH = true
|
||
}
|
||
})
|
||
document.addEventListener('keyup', function(event) {
|
||
HHH = false
|
||
})
|
||
// 按下鼠标左键
|
||
this.handler.setInputAction(function(movement) {
|
||
var pickedObject = that.viewer.scene.pick(movement.position)
|
||
if (
|
||
Cesium.defined(pickedObject) &&
|
||
Cesium.defined(pickedObject.id) &&
|
||
pickedObject.id === that.billboardEntity
|
||
) {
|
||
isMouseDown = true
|
||
startPosition = movement.position
|
||
|
||
// 获取Billboard当前的地理高度
|
||
var positionCartographic = Cesium.Cartographic.fromCartesian(
|
||
that.billboardEntity.position.getValue()
|
||
)
|
||
initialHeight = positionCartographic.height
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.LEFT_DOWN)
|
||
// 移动鼠标
|
||
this.handler.setInputAction(function(movement) {
|
||
if (isMouseDown && HHH == false) {
|
||
// 移动位置
|
||
var newCartesian = that.viewer.scene.pickPosition(movement.endPosition)
|
||
that.disableCameraDrag(that.viewer, false)
|
||
if (newCartesian) {
|
||
var newCartographic = Cesium.Cartographic.fromCartesian(newCartesian)
|
||
// 保持高度不变
|
||
var newLongitude = newCartographic.longitude
|
||
var newLatitude = newCartographic.latitude
|
||
var updatedPosition = Cesium.Cartesian3.fromRadians(
|
||
newLongitude,
|
||
newLatitude,
|
||
initialHeight
|
||
)
|
||
var pointUpdatedPosition = Cesium.Cartesian3.fromRadians(
|
||
newLongitude,
|
||
newLatitude,
|
||
0
|
||
)
|
||
that.billboardEntity.position = new Cesium.CallbackProperty(() => {
|
||
return updatedPosition
|
||
}, false)
|
||
that.billboardEntity.label.text = `Lat: ${Cesium.Math.toDegrees(
|
||
newLongitude
|
||
).toFixed(6)}\nLon: ${Cesium.Math.toDegrees(newLatitude).toFixed(
|
||
6
|
||
)}\nAlt: ${initialHeight.toFixed(2)}m`
|
||
that.pointEntity.position = new Cesium.CallbackProperty(() => {
|
||
return pointUpdatedPosition
|
||
}, false)
|
||
}
|
||
}
|
||
if (isMouseDown && HHH) {
|
||
console.log(HHH)
|
||
// 改变高度
|
||
var endPosition = movement.endPosition
|
||
var deltaY = startPosition.y - endPosition.y // 计算Y轴方向上的移动距离
|
||
// 根据鼠标移动的距离来调整高度
|
||
var newHeight = initialHeight + deltaY
|
||
// 更新billboard位置
|
||
var positionCartographic = Cesium.Cartographic.fromCartesian(
|
||
that.billboardEntity.position.getValue()
|
||
)
|
||
var newPosition = Cesium.Cartesian3.fromDegrees(
|
||
Cesium.Math.toDegrees(positionCartographic.longitude),
|
||
Cesium.Math.toDegrees(positionCartographic.latitude),
|
||
newHeight
|
||
)
|
||
// 禁用相机
|
||
that.disableCameraDrag(that.viewer, false)
|
||
that.billboardEntity.position = new Cesium.CallbackProperty(() => {
|
||
return newPosition
|
||
}, false)
|
||
that.billboardEntity.label.text = `Lat: ${Cesium.Math.toDegrees(
|
||
positionCartographic.longitude
|
||
).toFixed(6)}\nLon: ${Cesium.Math.toDegrees(
|
||
positionCartographic.latitude
|
||
).toFixed(6)}\nAlt: ${newHeight.toFixed(2)}m`
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
||
// 松开鼠标左键
|
||
this.handler.setInputAction(function(movement) {
|
||
var pickedObject = that.viewer.scene.pick(movement.position)
|
||
isMouseDown = false // 禁用相机
|
||
HHH = false //
|
||
that.disableCameraDrag(that.viewer, true)
|
||
// 更新frustum的位置
|
||
if (
|
||
Cesium.defined(pickedObject) &&
|
||
Cesium.defined(pickedObject.id) &&
|
||
pickedObject.id === that.billboardEntity
|
||
) {
|
||
if (that.options.saveFun) {
|
||
that.options.saveFun(null, false)
|
||
}
|
||
if (that.options.selectFun) {
|
||
that.options.selectFun(that.billboardEntity.index - 1)
|
||
}
|
||
that.options.frustum.updatePositionHeight(
|
||
that.billboardEntity.position.getValue()
|
||
)
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.LEFT_UP)
|
||
}
|
||
|
||
disableCameraDrag(viewer, bool) {
|
||
viewer.scene.screenSpaceCameraController.enableRotate = bool
|
||
viewer.scene.screenSpaceCameraController.enableTranslate = bool
|
||
viewer.scene.screenSpaceCameraController.enableZoom = bool
|
||
viewer.scene.screenSpaceCameraController.enableTilt = bool
|
||
viewer.scene.screenSpaceCameraController.enableLook = bool
|
||
}
|
||
get show() {
|
||
return this.options.show
|
||
}
|
||
/**
|
||
* @param {boolean} bool
|
||
*/
|
||
set show(bool) {
|
||
if (typeof bool === 'boolean') {
|
||
this.pointEntity.show = bool
|
||
this.billboardEntity.show = bool
|
||
this.lineEntity.show = bool
|
||
}
|
||
}
|
||
|
||
remove() {
|
||
this.viewer.entities.remove(this.pointEntity)
|
||
this.viewer.entities.remove(this.billboardEntity)
|
||
this.viewer.entities.remove(this.lineEntity)
|
||
}
|
||
}
|