485 lines
16 KiB
JavaScript
485 lines
16 KiB
JavaScript
import Dialog from '../../../BaseDialog';
|
|
import { html } from "./_element";
|
|
import DrawPolygon from "../../../Draw/drawPolygon"
|
|
import Tools from "../../../Tools";
|
|
import { closeRotateAround, closeViewFollow} from '../../../Global/global'
|
|
class Submerge extends Tools {
|
|
/**
|
|
* @constructor
|
|
* @param sdk
|
|
* @description 淹没效果
|
|
* */
|
|
constructor(sdk, options = {}, _Dialog = {}) {
|
|
super(sdk, options);
|
|
this.sdk = sdk
|
|
this.options = {}
|
|
this.options.name = options.name
|
|
this.options.risingSpeed = 1
|
|
this.options.minWaterLevel = 0
|
|
this.options.maxWaterLevel = 0
|
|
this.options.waterVolume = 0
|
|
this.currentWaterLaver
|
|
this.color = '#00d9ff66'
|
|
this.Dialog = _Dialog
|
|
this.Draw = new DrawPolygon(this.sdk)
|
|
this.positions
|
|
this.status = true
|
|
this.area = 0
|
|
this._elms = {};
|
|
YJ.Analysis.AnalysesResults.push(this)
|
|
Submerge.EditBox(this)
|
|
// Submerge.create(this)
|
|
}
|
|
|
|
static create(that) {
|
|
that.Draw.start((a, positions) => {
|
|
if (!positions || positions.length < 3) {
|
|
let _error = '至少需要三个坐标！'
|
|
console.warn(_error)
|
|
window.ELEMENT &&
|
|
window.ELEMENT.Message({
|
|
message: _error,
|
|
type: 'warning',
|
|
duration: 1500
|
|
})
|
|
return
|
|
}
|
|
that.destroy()
|
|
if (!positions || positions.length == 0) {
|
|
that.positions = []
|
|
that._positions = []
|
|
that.options.minWaterLevel = 0
|
|
that.options.maxWaterLevel = 0
|
|
that.options.waterVolume = 0
|
|
that.area = 0
|
|
return
|
|
}
|
|
let fromDegreesArray = []
|
|
that.positions = positions
|
|
that._positions = positions
|
|
that.options.minWaterLevel = positions[0].alt
|
|
for (let i = 0; i < positions.length; i++) {
|
|
if (that.options.minWaterLevel > positions[i].alt) {
|
|
that.options.minWaterLevel = positions[i].alt
|
|
}
|
|
fromDegreesArray.push(positions[i].lng, positions[i].lat)
|
|
}
|
|
// for (let i = 0; i < positions.length; i++) {
|
|
// fromDegreesArray.push(positions[i].lng, positions[i].lat, that.options.minWaterLevel)
|
|
// }
|
|
let pos = Cesium.Cartesian3.fromDegreesArray(fromDegreesArray)
|
|
that.currentWaterLaver = that.options.minWaterLevel
|
|
that.entity = that.sdk.viewer.entities.add({
|
|
polygon: {
|
|
hierarchy: new Cesium.PolygonHierarchy(pos),
|
|
height: new Cesium.CallbackProperty(function () {
|
|
return that.options.minWaterLevel
|
|
}, false),
|
|
extrudedHeight: new Cesium.CallbackProperty(function () {
|
|
return that.currentWaterLaver
|
|
}, false),
|
|
material: Cesium.Color.fromCssColorString(that.color),
|
|
},
|
|
})
|
|
that.area = that.computeArea(positions)
|
|
if (that.TweenAnimate) {
|
|
TWEEN.remove(that.TweenAnimate)
|
|
that.TweenAnimate = null
|
|
}
|
|
let contentElm = that._DialogObject._element.body
|
|
let pauseBtn = contentElm.getElementsByClassName('pause')[0];
|
|
let startBtn = contentElm.getElementsByClassName('start')[0];
|
|
startBtn.style.display = 'flex'
|
|
pauseBtn.style.display = 'none'
|
|
// that.move()
|
|
// Submerge.EditBox(that)
|
|
})
|
|
}
|
|
|
|
static async EditBox(that) {
|
|
if (that._DialogObject && that._DialogObject.close) {
|
|
that._DialogObject.close()
|
|
that._DialogObject = null
|
|
}
|
|
that._DialogObject = await new Dialog(that.sdk.viewer._container, {
|
|
title: '淹没分析', left: '180px', top: '100px',
|
|
closeCallBack: () => {
|
|
that.destroy()
|
|
that.Dialog.closeCallBack && that.Dialog.closeCallBack()
|
|
},
|
|
})
|
|
await that._DialogObject.init()
|
|
that._DialogObject._element.body.className = that._DialogObject._element.body.className + ' submerge'
|
|
let contentElm = document.createElement('div');
|
|
contentElm.innerHTML = html()
|
|
that._DialogObject.contentAppChild(contentElm)
|
|
let stopBtn = document.createElement('button');
|
|
stopBtn.className = 'el-button'
|
|
stopBtn.innerHTML = '暂停'
|
|
stopBtn.style.width = '80px'
|
|
|
|
let drawBtn = contentElm.getElementsByClassName('draw')[0]
|
|
drawBtn.addEventListener('click', () => {
|
|
Submerge.create(that)
|
|
})
|
|
let analogBtn = contentElm.getElementsByClassName('analog')[0];
|
|
analogBtn.addEventListener('click', () => {
|
|
that.move()
|
|
})
|
|
let flytoBtn = contentElm.getElementsByClassName('flyto')[0];
|
|
flytoBtn.addEventListener('click', () => {
|
|
that.flyTo()
|
|
})
|
|
let resetBtn = contentElm.getElementsByClassName('reset')[0];
|
|
resetBtn.addEventListener('click', () => {
|
|
that.restart()
|
|
})
|
|
let pauseBtn = contentElm.getElementsByClassName('pause')[0];
|
|
let startBtn = contentElm.getElementsByClassName('start')[0];
|
|
pauseBtn.addEventListener('click', () => {
|
|
that.pause()
|
|
pauseBtn.style.display = 'none'
|
|
startBtn.style.display = 'flex'
|
|
})
|
|
startBtn.addEventListener('click', () => {
|
|
that.start()
|
|
startBtn.style.display = 'none'
|
|
pauseBtn.style.display = 'flex'
|
|
})
|
|
|
|
// that._DialogObject.footAppChild(stopBtn)
|
|
// that._DialogObject.footAppChild(resetBtn)
|
|
// that._DialogObject.footAppChild(flytoBtn)
|
|
// that._DialogObject.footAppChild(analogBtn)
|
|
// that._DialogObject.footAppChild(drawBtn)
|
|
|
|
// 速度
|
|
let e_risingSpeed = contentElm.querySelectorAll("input[name='risingSpeed']")
|
|
e_risingSpeed[0].value = that.options.risingSpeed
|
|
e_risingSpeed[1].value = that.options.risingSpeed
|
|
e_risingSpeed[0].addEventListener('input', e => {
|
|
that.options.risingSpeed = Number(e.target.value);
|
|
});
|
|
e_risingSpeed[1].addEventListener('input', e => {
|
|
if (e.data != '.') {
|
|
let value = Number(e.target.value)
|
|
let max = Number(e_risingSpeed[0].max)
|
|
let min = Number(e_risingSpeed[0].min)
|
|
if (value > max) {
|
|
that.options.risingSpeed = max;
|
|
}
|
|
else if (value < min) {
|
|
that.options.risingSpeed = min;
|
|
}
|
|
else {
|
|
that.options.risingSpeed = Math.floor(value * 100) / 100;
|
|
}
|
|
}
|
|
});
|
|
Object.defineProperty(that.options, 'risingSpeed', {
|
|
get() {
|
|
return e_risingSpeed[0].value
|
|
},
|
|
set(value) {
|
|
e_risingSpeed[0].value = value
|
|
e_risingSpeed[1].value = value
|
|
}
|
|
})
|
|
that.waterLevel = that.options.maxWaterLevel - that.options.minWaterLevel
|
|
// 最低水位
|
|
let e_minWaterLevel = contentElm.querySelector("input[name='minWaterLevel']")
|
|
e_minWaterLevel.value = that.options.minWaterLevel
|
|
e_minWaterLevel.addEventListener('input', e => {
|
|
if (e.data != '.') {
|
|
let value = Number(e.target.value)
|
|
if (value > 999999999) {
|
|
value = 999999999
|
|
}
|
|
if (value < 0) {
|
|
value = 0
|
|
}
|
|
that.options.minWaterLevel = Math.floor(value * 10000) / 10000;
|
|
that.options.maxWaterLevel = that.options.minWaterLevel + that.waterLevel;
|
|
}
|
|
});
|
|
Object.defineProperty(that.options, 'minWaterLevel', {
|
|
get() {
|
|
return Number(e_minWaterLevel.value)
|
|
},
|
|
set(value) {
|
|
e_minWaterLevel.value = Math.floor(Number(value) * 10000) / 10000;
|
|
}
|
|
})
|
|
|
|
// 最高水位
|
|
let e_maxWaterLevel = contentElm.querySelector("input[name='maxWaterLevel']")
|
|
e_maxWaterLevel.value = that.options.maxWaterLevel
|
|
e_maxWaterLevel.addEventListener('input', e => {
|
|
if (e.data != '.') {
|
|
let value = Number(e.target.value)
|
|
if (value > 999999999) {
|
|
value = 999999999
|
|
}
|
|
if (value < 0) {
|
|
value = 0
|
|
}
|
|
if (value < that.options.minWaterLevel) {
|
|
that.options.maxWaterLevel = that.options.minWaterLevel;
|
|
}
|
|
else {
|
|
that.options.maxWaterLevel = Math.floor(value * 10000) / 10000;
|
|
}
|
|
that.waterLevel = that.options.maxWaterLevel - that.options.minWaterLevel
|
|
that.options.waterVolume = Number((that.waterLevel * that.area).toFixed(4))
|
|
}
|
|
});
|
|
Object.defineProperty(that.options, 'maxWaterLevel', {
|
|
get() {
|
|
return Number(e_maxWaterLevel.value)
|
|
},
|
|
set(value) {
|
|
if (isNaN(value)) {
|
|
value = 0
|
|
}
|
|
e_maxWaterLevel.value = Math.floor(Number(value) * 10000) / 10000;
|
|
}
|
|
})
|
|
|
|
// 水量
|
|
let e_waterVolume = contentElm.querySelector("input[name='waterVolume']")
|
|
e_waterVolume.value = that.options.waterVolume
|
|
e_waterVolume.addEventListener('input', e => {
|
|
if (e.data != '.') {
|
|
let value = Number(e.target.value)
|
|
if (value > 99999999999999) {
|
|
value = 99999999999999
|
|
}
|
|
if (value < 0) {
|
|
value = 0
|
|
}
|
|
that.options.waterVolume = Math.floor(value * 10000) / 10000;
|
|
if (that.area) {
|
|
that.waterLevel = Number((that.options.waterVolume / that.area).toFixed(4))
|
|
that.options.maxWaterLevel = that.options.minWaterLevel + that.waterLevel
|
|
}
|
|
}
|
|
});
|
|
Object.defineProperty(that.options, 'waterVolume', {
|
|
get() {
|
|
return Number(e_waterVolume.value)
|
|
},
|
|
set(value) {
|
|
e_waterVolume.value = value
|
|
}
|
|
})
|
|
|
|
// 面积
|
|
let e_area = contentElm.getElementsByClassName('area')[0]
|
|
e_area.value = that.area
|
|
Object.defineProperty(that, 'area', {
|
|
get() {
|
|
return Number(e_area.value)
|
|
},
|
|
set(value) {
|
|
e_area.value = value
|
|
that.waterLevel = Number((that.options.waterVolume / that.area).toFixed(4))
|
|
that.options.maxWaterLevel = that.options.minWaterLevel + that.waterLevel
|
|
}
|
|
})
|
|
// 表格
|
|
let e_tableBody = contentElm.getElementsByClassName('table-body')[0]
|
|
let e_tableEmpty = contentElm.getElementsByClassName('table-empty')[0]
|
|
Object.defineProperty(that, 'positions', {
|
|
get() {
|
|
return that._positions
|
|
},
|
|
set(value) {
|
|
if (value && value.length > 0) {
|
|
e_tableEmpty.style.display = 'none'
|
|
let tr = ''
|
|
for (let i = 0; i < value.length; i++) {
|
|
tr = tr + `<div class="tr">
|
|
<div class="td">${i + 1}</div>
|
|
<div class="td">${Number(value[i].lng.toFixed(10))}</div>
|
|
<div class="td">${Number(value[i].lat.toFixed(10))}</div>
|
|
<div class="td">${Number(value[i].alt.toFixed(4))}</div>
|
|
</div>`
|
|
}
|
|
e_tableBody.innerHTML = tr
|
|
}
|
|
else {
|
|
e_tableBody.innerHTML = ''
|
|
e_tableEmpty.style.display = 'flex'
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
move() {
|
|
if (this.TweenAnimate) {
|
|
TWEEN.remove(this.TweenAnimate)
|
|
}
|
|
let totalTime = ((this.options.maxWaterLevel - this.options.minWaterLevel) / this.options.risingSpeed) * 1000
|
|
this.TweenAnimate = new TWEEN.Tween({ waterLevel: this.options.minWaterLevel }).to({ waterLevel: this.options.maxWaterLevel }, totalTime).delay(this.delay).easing(TWEEN.Easing.Linear.None).onUpdate(async (r, a) => {
|
|
this.currentWaterLaver = r.waterLevel
|
|
}).start()
|
|
let contentElm = this._DialogObject._element.body
|
|
let pauseBtn = contentElm.getElementsByClassName('pause')[0];
|
|
let startBtn = contentElm.getElementsByClassName('start')[0];
|
|
startBtn.style.display = 'none'
|
|
pauseBtn.style.display = 'flex'
|
|
}
|
|
|
|
restart() {
|
|
this.currentWaterLaver = this.options.minWaterLevel
|
|
let isPaused = false
|
|
if (this.TweenAnimate) {
|
|
isPaused = this.TweenAnimate._isPaused
|
|
TWEEN.remove(this.TweenAnimate)
|
|
}
|
|
let totalTime = ((this.options.maxWaterLevel - this.options.minWaterLevel) / this.options.risingSpeed) * 1000
|
|
this.TweenAnimate = new TWEEN.Tween({ waterLevel: this.options.minWaterLevel }).to({ waterLevel: this.options.maxWaterLevel }, totalTime).delay(this.delay).easing(TWEEN.Easing.Linear.None).onUpdate(async (r, a) => {
|
|
this.currentWaterLaver = r.waterLevel
|
|
}).start()
|
|
if (isPaused) {
|
|
this.pause()
|
|
}
|
|
}
|
|
|
|
start() {
|
|
if (this.TweenAnimate) {
|
|
this.TweenAnimate.resume()
|
|
}
|
|
}
|
|
pause() {
|
|
if (this.TweenAnimate) {
|
|
this.TweenAnimate.pause()
|
|
}
|
|
}
|
|
|
|
calculateVolumeHeight() {
|
|
that.options.maxWaterLevel
|
|
}
|
|
|
|
/**
|
|
* 飞到
|
|
*/
|
|
flyTo() {
|
|
if (!this.positions || this.positions.length === 0) {
|
|
return
|
|
}
|
|
closeRotateAround(this.sdk)
|
|
closeViewFollow(this.sdk)
|
|
|
|
let positionArray = []
|
|
for (let i = 0; i < this.positions.length; i++) {
|
|
let fromDegrees = Cesium.Cartesian3.fromDegrees(this.positions[i].lng, this.positions[i].lat, this.options.maxWaterLevel)
|
|
positionArray.push(fromDegrees.x, fromDegrees.y, fromDegrees.z)
|
|
}
|
|
let BoundingSphere = Cesium.BoundingSphere.fromVertices(positionArray)
|
|
this.sdk.viewer.camera.flyToBoundingSphere(BoundingSphere, {
|
|
offset: {
|
|
heading: Cesium.Math.toRadians(0.0),
|
|
pitch: Cesium.Math.toRadians(-90.0),
|
|
roll: Cesium.Math.toRadians(0.0)
|
|
}
|
|
})
|
|
}
|
|
|
|
destroy() {
|
|
if (this.TweenAnimate) {
|
|
TWEEN.remove(this.TweenAnimate)
|
|
}
|
|
this.Draw.end()
|
|
this.sdk.viewer.entities.remove(this.entity)
|
|
this.entity = null
|
|
}
|
|
|
|
static EventBinding(that, elements) {
|
|
for (let i = 0; i < elements.length; i++) {
|
|
let Event = []
|
|
let isEvent = false
|
|
let removeName = []
|
|
if (!elements[i] || !elements[i].attributes) {
|
|
continue;
|
|
}
|
|
for (let m of elements[i].attributes) {
|
|
switch (m.name) {
|
|
case '@model': {
|
|
isEvent = true
|
|
if (elements[i].type == 'checkbox') {
|
|
Event.push((e) => { that[m.value] = e.target.checked })
|
|
elements[i].checked = that[m.value]
|
|
}
|
|
else {
|
|
Event.push((e) => {
|
|
let value = e.target.value
|
|
if (e.target.type == 'number') {
|
|
value = Number(value)
|
|
}
|
|
that[m.value] = value
|
|
})
|
|
if (elements[i].nodeName == 'IMG') {
|
|
elements[i].src = that[m.value]
|
|
}
|
|
else {
|
|
elements[i].value = that[m.value]
|
|
}
|
|
}
|
|
if (that._elms[m.value]) {
|
|
that._elms[m.value].push(elements[i])
|
|
}
|
|
else {
|
|
that._elms[m.value] = [elements[i]]
|
|
}
|
|
removeName.push(m.name)
|
|
break;
|
|
}
|
|
case '@click': {
|
|
elements[i].addEventListener('click', (e) => {
|
|
if (typeof (that[m.value]) === 'function') {
|
|
that[m.value](e)
|
|
}
|
|
});
|
|
removeName.push(m.name)
|
|
// elements[i].attributes.removeNamedItem(m.name)
|
|
break;
|
|
}
|
|
case '@change': {
|
|
isEvent = true
|
|
Event.push((e) => {
|
|
let value = e.target.value
|
|
if (e.target.type == 'number' && value != '') {
|
|
value = Number(value)
|
|
e.target.value = value
|
|
}
|
|
if (typeof (that[m.value]) === 'function') {
|
|
that[m.value](e, value)
|
|
}
|
|
})
|
|
break;
|
|
}
|
|
}
|
|
// elements[i].attributes[m] = undefined
|
|
}
|
|
for (let n = 0; n < removeName.length; n++) {
|
|
elements[i].attributes.removeNamedItem(removeName[n])
|
|
}
|
|
|
|
if (isEvent) {
|
|
let ventType = 'input'
|
|
if (elements[i].tagName != 'INPUT' || elements[i].type == 'checkbox') {
|
|
ventType = 'change'
|
|
}
|
|
elements[i].addEventListener(ventType, (e) => {
|
|
for (let t = 0; t < Event.length; t++) {
|
|
Event[t](e)
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export default Submerge
|