代码迁移
This commit is contained in:
58
src/Obj/Base/WaterSurface/_element.js
Normal file
58
src/Obj/Base/WaterSurface/_element.js
Normal file
@ -0,0 +1,58 @@
|
||||
function html() {
|
||||
return `
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">名称</span>
|
||||
<input class="input" maxlength="40" type="text" @model="name">
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">颜色</span>
|
||||
<div class="water-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">高度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="-9999999" max="999999999" @model="height">
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">水面振幅</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="0" max="100" step="1" @model="amplitude">
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">动画速度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" max="10" min="0" step="0.1" @model="animationSpeed">
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">水面频率</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" max="100" min="0" step="1" @model="frequency">
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
`
|
||||
}
|
||||
|
||||
export { html }
|
||||
92
src/Obj/Base/WaterSurface/eventBinding.js
Normal file
92
src/Obj/Base/WaterSurface/eventBinding.js
Normal file
@ -0,0 +1,92 @@
|
||||
class eventBinding {
|
||||
constructor() {
|
||||
this.element = {}
|
||||
}
|
||||
static event = {}
|
||||
|
||||
getEvent(name) {
|
||||
return eventBinding.event[name]
|
||||
}
|
||||
|
||||
getEventAll() {
|
||||
return eventBinding.event
|
||||
}
|
||||
|
||||
setEvent(name, event) {
|
||||
eventBinding.event[name] = event
|
||||
}
|
||||
|
||||
on(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 (this.element[m.value]) {
|
||||
this.element[m.value].push(elements[i])
|
||||
}
|
||||
else {
|
||||
this.element[m.value] = [elements[i]]
|
||||
}
|
||||
removeName.push(m.name)
|
||||
break;
|
||||
}
|
||||
case '@click': {
|
||||
elements[i].addEventListener('click', (e) => {
|
||||
if (typeof (that.Dialog[m.value]) === 'function') {
|
||||
that.Dialog[m.value](e)
|
||||
}
|
||||
});
|
||||
removeName.push(m.name)
|
||||
// elements[i].attributes.removeNamedItem(m.name)
|
||||
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)
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const EventBinding = new eventBinding();
|
||||
export default EventBinding;
|
||||
368
src/Obj/Base/WaterSurface/index.js
Normal file
368
src/Obj/Base/WaterSurface/index.js
Normal file
@ -0,0 +1,368 @@
|
||||
/**
|
||||
* @description 水面
|
||||
*/
|
||||
import Dialog from '../../Element/Dialog';
|
||||
import { html } from "./_element";
|
||||
import EventBinding from '../../Element/Dialog/eventBinding';
|
||||
import Base from "../index";
|
||||
import { syncData } from '../../../Global/MultiViewportMode'
|
||||
import { setSplitDirection, syncSplitData, setActiveId } from '../../../Global/SplitScreen'
|
||||
import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../../Global/global'
|
||||
|
||||
class WaterSurface extends Base {
|
||||
/**
|
||||
* @constructor
|
||||
* @param sdk
|
||||
* @description 水面
|
||||
* @param options {object} 面属性
|
||||
* @param options.name=未命名对象 {string} 名称
|
||||
* @param options.positions {Array.<{lng:number, lat:number, alt:number}>} 坐标数组
|
||||
* @param options.color=rgba(32,67,135,0.5) {string} 颜色
|
||||
* @param options.frequency=100 {number} 频率
|
||||
* @param options.animationSpeed=0.02 {number} 动画速度
|
||||
* @param options.amplitude=10 {number} 振幅
|
||||
* @param Dialog {object} 弹框对象
|
||||
* @param Dialog.confirmCallBack {function} 弹框确认时的回调
|
||||
* */
|
||||
constructor(sdk, options = {}, _Dialog = {}) {
|
||||
super(sdk, options);
|
||||
this.options.name = options.name || '未命名对象'
|
||||
this.options.color = options.color || "rgba(32,67,135,0.5)"
|
||||
this.options.positions = options.positions || []
|
||||
this.options.frequency = options.frequency || 10
|
||||
this.options.animationSpeed = options.animationSpeed || 1
|
||||
this.options.amplitude = options.amplitude || 10
|
||||
this.options.show = (options.show || options.show === false) ? options.show : true
|
||||
this.Dialog = _Dialog
|
||||
this._EventBinding = new EventBinding()
|
||||
this._elms = {};
|
||||
this.sdk.addIncetance(this.options.id, this)
|
||||
WaterSurface.create(this)
|
||||
}
|
||||
|
||||
// 创建水面
|
||||
static create(that) {
|
||||
let positions = that.options.positions
|
||||
let fromDegreesArray = []
|
||||
let height = positions[0].alt
|
||||
for (let i = 0; i < positions.length; i++) {
|
||||
fromDegreesArray.push(positions[i].lng, positions[i].lat)
|
||||
if (height < positions[i].alt) {
|
||||
height = positions[i].alt
|
||||
}
|
||||
}
|
||||
if (!that.options.height && that.options.height !== 0) {
|
||||
that.options.height = height
|
||||
}
|
||||
that.entity = that.sdk.viewer.scene.primitives.add(new Cesium.Primitive({
|
||||
id: that.options.id,
|
||||
show: that.options.show,
|
||||
// allowPicking: false,
|
||||
asynchronous: false,
|
||||
releaseGeometryInstances: false,
|
||||
geometryInstances: new Cesium.GeometryInstance({
|
||||
name: "water-surface",
|
||||
geometry: new Cesium.PolygonGeometry({
|
||||
polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(fromDegreesArray)),
|
||||
vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
|
||||
height: that.options.height,
|
||||
// extrudedHeight: 2200,
|
||||
// height: 0,
|
||||
}),
|
||||
}),
|
||||
appearance: new Cesium.EllipsoidSurfaceAppearance({
|
||||
aboveGroud: true,
|
||||
material: new Cesium.Material({
|
||||
fabric: {
|
||||
type: "Water",
|
||||
uniforms: {
|
||||
baseWaterColor: Cesium.Color.fromCssColorString(that.options.color),
|
||||
normalMap: that.getSourceRootPath() + '/img/water.png',
|
||||
//频率速度设置
|
||||
frequency: that.options.frequency * 10,
|
||||
animationSpeed: that.options.animationSpeed * 0.01,
|
||||
amplitude: that.options.amplitude,
|
||||
},
|
||||
},
|
||||
}),
|
||||
}),
|
||||
}));
|
||||
that.entity.id = that.options.id
|
||||
that.entity.originalHeight = that.options.height
|
||||
syncData(that.sdk, that.options.id)
|
||||
if (that.options.show) {
|
||||
|
||||
setSplitDirection(0, that.options.id)
|
||||
}
|
||||
}
|
||||
|
||||
get color() {
|
||||
return this.options.color
|
||||
}
|
||||
|
||||
set color(v) {
|
||||
this.options.color = v
|
||||
this.entity && (this.entity.appearance.material.uniforms.baseWaterColor = Cesium.Color.fromCssColorString(v))
|
||||
if (this._elms.color) {
|
||||
this._elms.color.forEach((item, i) => {
|
||||
let picker = new ewPlugins('colorpicker', {
|
||||
el: item.el,
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: v,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: (c) => {
|
||||
this.color = c
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.color = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
this._elms.color[i] = picker
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
get frequency() {
|
||||
return this.options.frequency
|
||||
}
|
||||
|
||||
set frequency(v) {
|
||||
this.options.frequency = v
|
||||
this.entity && (this.entity.appearance.material.uniforms.frequency = v * 10)
|
||||
this._elms.frequency && this._elms.frequency.forEach((item) => {
|
||||
item.value = v
|
||||
})
|
||||
}
|
||||
|
||||
get animationSpeed() {
|
||||
return this.options.animationSpeed
|
||||
}
|
||||
|
||||
set animationSpeed(v) {
|
||||
this.options.animationSpeed = v
|
||||
this.entity && (this.entity.appearance.material.uniforms.animationSpeed = v * 0.01)
|
||||
this._elms.animationSpeed && this._elms.animationSpeed.forEach((item) => {
|
||||
item.value = v
|
||||
})
|
||||
}
|
||||
|
||||
get amplitude() {
|
||||
return this.options.amplitude
|
||||
}
|
||||
|
||||
set amplitude(v) {
|
||||
this.options.amplitude = v
|
||||
this.entity && (this.entity.appearance.material.uniforms.amplitude = v)
|
||||
this._elms.amplitude && this._elms.amplitude.forEach((item) => {
|
||||
item.value = v
|
||||
})
|
||||
}
|
||||
|
||||
get height() {
|
||||
return this.options.height
|
||||
}
|
||||
|
||||
set height(v) {
|
||||
this.options.height = v
|
||||
let positions = this.options.positions[0]
|
||||
let a = Cesium.Cartesian3.fromDegrees(positions.lng, positions.lat, v)
|
||||
let b = Cesium.Cartesian3.fromDegrees(positions.lng, positions.lat, this.entity.originalHeight)
|
||||
this.entity.modelMatrix = Cesium.Matrix4.setTranslation(this.entity.modelMatrix, new Cesium.Cartesian3(a.x - b.x, a.y - b.y, a.z - b.z), new Cesium.Matrix4())
|
||||
this._elms.height && this._elms.height.forEach((item) => {
|
||||
item.value = v
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 编辑框
|
||||
* @param state=false {boolean} 状态: true打开, false关闭
|
||||
*/
|
||||
async edit(state = false) {
|
||||
let _this = this
|
||||
this.originalOptions = this.deepCopyObj(this.options)
|
||||
|
||||
// let elms = this.sdk.viewer._container.getElementsByClassName('YJ-custom-base-dialog')
|
||||
// for (let i = elms.length - 1; i >= 0; i--) {
|
||||
// this.sdk.viewer._container.removeChild(elms[i])
|
||||
// }
|
||||
|
||||
if (this._DialogObject && this._DialogObject.close) {
|
||||
this._DialogObject.close()
|
||||
this._DialogObject = null
|
||||
}
|
||||
|
||||
if (state) {
|
||||
this._DialogObject = await new Dialog(this.sdk, this.originalOptions, {
|
||||
title: '水面属性', left: '180px', top: '100px',
|
||||
confirmCallBack: (options) => {
|
||||
this.name = this.name.trim()
|
||||
if (!this.name) {
|
||||
this.name = '未命名对象'
|
||||
}
|
||||
this.originalOptions = this.deepCopyObj(this.options)
|
||||
this._DialogObject.close()
|
||||
this.Dialog.confirmCallBack && this.Dialog.confirmCallBack(this.originalOptions)
|
||||
syncData(this.sdk, this.options.id)
|
||||
syncSplitData(this.sdk, this.options.id)
|
||||
},
|
||||
resetCallBack: () => {
|
||||
this.reset()
|
||||
this.Dialog.resetCallBack && this.Dialog.resetCallBack()
|
||||
},
|
||||
removeCallBack: () => {
|
||||
this.Dialog.removeCallBack && this.Dialog.removeCallBack()
|
||||
},
|
||||
closeCallBack: () => {
|
||||
this.reset()
|
||||
// this.entity.style = new Cesium.Cesium3DTileStyle({
|
||||
// color: "color('rgba(255,255,255," + this.newData.transparency + ")')",
|
||||
// show: true,
|
||||
// });
|
||||
this.Dialog.closeCallBack && this.Dialog.closeCallBack()
|
||||
},
|
||||
showCallBack: (show) => {
|
||||
this.show = show
|
||||
this.Dialog.showCallBack && this.Dialog.showCallBack()
|
||||
}
|
||||
}, true)
|
||||
this._DialogObject._element.body.className = this._DialogObject._element.body.className + ' water-surface'
|
||||
let contentElm = document.createElement('div');
|
||||
contentElm.innerHTML = html()
|
||||
this._DialogObject.contentAppChild(contentElm)
|
||||
// 颜色组件
|
||||
let waterColorPicker = new ewPlugins('colorpicker', {
|
||||
el: contentElm.getElementsByClassName("water-color")[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: this.color,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: (color) => {
|
||||
this.color = color
|
||||
},//点击确认按钮事件回调
|
||||
clear: () => {
|
||||
this.color = 'rgba(255,255,255,1)'
|
||||
},//点击清空按钮事件回调
|
||||
})
|
||||
|
||||
let all_elm = contentElm.getElementsByTagName("*")
|
||||
this._EventBinding.on(this, all_elm)
|
||||
this._elms = this._EventBinding.element
|
||||
this._elms.color = [waterColorPicker]
|
||||
} else {
|
||||
// if (this._element_style) {
|
||||
// document.getElementsByTagName('head')[0].removeChild(this._element_style)
|
||||
// this._element_style = null
|
||||
// }
|
||||
// if (this._DialogObject && this._DialogObject.remove) {
|
||||
// this._DialogObject.remove()
|
||||
// this._DialogObject = null
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
reset() {
|
||||
if (!this.entity) {
|
||||
return
|
||||
}
|
||||
this.name = this.originalOptions.name
|
||||
this.color = this.originalOptions.color
|
||||
this.frequency = this.originalOptions.frequency
|
||||
this.animationSpeed = this.originalOptions.animationSpeed
|
||||
this.amplitude = this.originalOptions.amplitude
|
||||
this.height = this.originalOptions.height
|
||||
}
|
||||
|
||||
/**
|
||||
* 飞到对应实体
|
||||
*/
|
||||
async flyTo(options = {}) {
|
||||
setActiveViewer(0)
|
||||
closeRotateAround(this.sdk)
|
||||
closeViewFollow(this.sdk)
|
||||
|
||||
if (this.options.customView && this.options.customView.relativePosition && this.options.customView.orientation) {
|
||||
let orientation = {
|
||||
heading: Cesium.Math.toRadians(this.options.customView.orientation.heading || 0.0),
|
||||
pitch: Cesium.Math.toRadians(this.options.customView.orientation.pitch || -60.0),
|
||||
roll: Cesium.Math.toRadians(this.options.customView.orientation.roll || 0.0)
|
||||
}
|
||||
|
||||
let lng = this.options.customView.relativePosition.lng
|
||||
let lat = this.options.customView.relativePosition.lat
|
||||
let alt = this.options.customView.relativePosition.alt
|
||||
let destination = Cesium.Cartesian3.fromDegrees(lng, lat, alt)
|
||||
|
||||
let position = { lng: 0, lat: 0 }
|
||||
if (this.options.position) {
|
||||
position = { ...this.options.position }
|
||||
}
|
||||
else if (this.options.positions) {
|
||||
position = { ...this.options.positions[0] }
|
||||
}
|
||||
else if (this.options.center) {
|
||||
position = { ...this.options.center }
|
||||
}
|
||||
else if (this.options.start) {
|
||||
position = { ...this.options.start }
|
||||
}
|
||||
else {
|
||||
if (this.options.hasOwnProperty('lng')) {
|
||||
position.lng = this.options.lng
|
||||
}
|
||||
if (this.options.hasOwnProperty('lat')) {
|
||||
position.lat = this.options.lat
|
||||
}
|
||||
if (this.options.hasOwnProperty('alt')) {
|
||||
position.alt = this.options.alt
|
||||
}
|
||||
}
|
||||
// 如果没有高度值，则获取紧贴高度计算
|
||||
if (!position.hasOwnProperty('alt')) {
|
||||
position.alt = await this.getClampToHeight(position)
|
||||
}
|
||||
lng = this.options.customView.relativePosition.lng + position.lng
|
||||
lat = this.options.customView.relativePosition.lat + position.lat
|
||||
alt = this.options.customView.relativePosition.alt + position.alt
|
||||
destination = Cesium.Cartesian3.fromDegrees(lng, lat, alt)
|
||||
this.sdk.viewer.camera.flyTo({
|
||||
destination: destination,
|
||||
orientation: orientation
|
||||
})
|
||||
}
|
||||
else {
|
||||
let rect = Cesium.Rectangle.fromCartesianArray(this.entity.geometryInstances.geometry._polygonHierarchy.positions)
|
||||
let positions = this.sdk.viewer.camera.getRectangleCameraCoordinates(rect)
|
||||
let positions84 = this.cartesian3Towgs84(positions, this.sdk.viewer)
|
||||
var cartesian3 = Cesium.Cartesian3.fromDegrees(positions84.lng, positions84.lat, positions84.alt + this.height)
|
||||
this.sdk.viewer.camera.flyTo({
|
||||
orientation: options.orientation || {
|
||||
heading: Cesium.Math.toRadians(0.0),
|
||||
pitch: Cesium.Math.toRadians(-90.0),
|
||||
roll: Cesium.Math.toRadians(0.0)
|
||||
},
|
||||
destination: cartesian3
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
async remove() {
|
||||
this.sdk.viewer.scene.primitives.remove(this.entity)
|
||||
this.entity = null
|
||||
if (this._DialogObject && !this._DialogObject.isDestroy) {
|
||||
this._DialogObject.close()
|
||||
this._DialogObject = null
|
||||
}
|
||||
await this.sdk.removeIncetance(this.options.id)
|
||||
await syncData(this.sdk, this.options.id)
|
||||
}
|
||||
|
||||
flicker() { }
|
||||
}
|
||||
|
||||
export default WaterSurface
|
||||
Reference in New Issue
Block a user