代码迁移
This commit is contained in:
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