81 lines
2.7 KiB
JavaScript
81 lines
2.7 KiB
JavaScript
import Vue from 'vue'
|
|
import Label from './index.vue'
|
|
const WindowVm = Vue.extend(Label)
|
|
const Cesium = window.Cesium
|
|
export default class Bubble {
|
|
constructor(val) {
|
|
this.viewer = val.viewer
|
|
// this.height = val.height;
|
|
this.position = val.position._value
|
|
const title = val.monitoItems.data.name
|
|
const type = val.monitoItems.data.type
|
|
const descr = val.monitoItems.data.descr || ''
|
|
const height = val.monitoItems.data.position.height
|
|
const longitude = val.monitoItems.data.position.x
|
|
const latitude = val.monitoItems.data.position.y
|
|
const id = val._monitoItems.data.data_id
|
|
const CORP_INFO_ID = val._monitoItems.data.CORP_INFO_ID
|
|
this.vmInstance = new WindowVm({
|
|
propsData: {
|
|
title,
|
|
id,
|
|
CORP_INFO_ID,
|
|
type,
|
|
descr,
|
|
height,
|
|
longitude,
|
|
latitude,
|
|
clickBranch: val.clickBranch,
|
|
clickPort: val.clickPort
|
|
}
|
|
}).$mount() // 根据模板创建一个面板
|
|
|
|
this.vmInstance.closeEvent = e => {
|
|
this.windowClose()
|
|
}
|
|
|
|
val.viewer.cesiumWidget.container.appendChild(this.vmInstance.$el) // 将字符串模板生成的内容添加到DOM上
|
|
|
|
this.addPostRender()
|
|
}
|
|
|
|
// 添加场景事件
|
|
addPostRender() {
|
|
this.viewer.scene.postRender.addEventListener(this.postRender, this)
|
|
}
|
|
|
|
// 场景渲染事件 实时更新窗口的位置 使其与笛卡尔坐标一致
|
|
postRender() {
|
|
if (!this.vmInstance.$el || !this.vmInstance.$el.style) return
|
|
const canvasHeight = this.viewer.scene.canvas.height
|
|
const windowPosition = new Cesium.Cartesian2()
|
|
Cesium.SceneTransforms.wgs84ToWindowCoordinates(
|
|
this.viewer.scene,
|
|
this.position,
|
|
windowPosition
|
|
)
|
|
this.vmInstance.$el.style.bottom =
|
|
canvasHeight - windowPosition.y + 50 + 'px'
|
|
const elWidth = this.vmInstance.$el.offsetWidth
|
|
this.vmInstance.$el.style.left = windowPosition.x - elWidth / 2 + 130 + 'px'
|
|
|
|
const camerPosition = this.viewer.camera.position
|
|
let height = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(camerPosition).height
|
|
height += this.viewer.scene.globe.ellipsoid.maximumRadius
|
|
if ((!(Cesium.Cartesian3.distance(camerPosition, this.position) > height)) && this.viewer.camera.positionCartographic.height < 50000000) {
|
|
this.vmInstance.$el.style.display = 'block'
|
|
} else {
|
|
this.vmInstance.$el.style.display = 'none'
|
|
}
|
|
}
|
|
// 关闭
|
|
windowClose() {
|
|
if (this.vmInstance) {
|
|
this.vmInstance.$el.remove()
|
|
this.vmInstance.$destroy()
|
|
}
|
|
// this.vmInstance.$el.style.display = "none"; //删除dom
|
|
this.viewer.scene.postRender.removeEventListener(this.postRender, this) // 移除事件监听
|
|
}
|
|
}
|