374 lines
12 KiB
JavaScript
374 lines
12 KiB
JavaScript
|
/**
|
|||
|
|
* @name: index
|
|||
|
|
* @author: Administrator
|
|||
|
|
* @date: 2023-11-20 16:05
|
|||
|
|
* @description：index
|
|||
|
|
* @update: 2023-11-20 16:05
|
|||
|
|
*/
|
|||
|
|
import BaseTileset from "../index";
|
|||
|
|
import cy_slider from "../../../../Element/cy_html_slider";
|
|||
|
|
import { html, css } from "./_element";
|
|||
|
|
import EventBinding from '../../../../Element/Dialog/eventBinding';
|
|||
|
|
import { syncSplitData } from '../../../../../Global/SplitScreen'
|
|||
|
|
import Dialog from '../../../../Element/Dialog';
|
|||
|
|
|
|||
|
|
class Tileset extends BaseTileset {
|
|||
|
|
#updateModelTimeout;
|
|||
|
|
/**
|
|||
|
|
* @constructor
|
|||
|
|
* @description 加载Tileset模型
|
|||
|
|
* @param sdk {object} sdk
|
|||
|
|
* @param options {object} 模型参数
|
|||
|
|
* @param options.id {string} 对象id
|
|||
|
|
* @param options.show=true {boolean} 模型显隐
|
|||
|
|
* @param options.name {string} 名称
|
|||
|
|
* @param options.url {string} 资源地址
|
|||
|
|
* @param options.accuracy=1 {number} 精度(倍)
|
|||
|
|
* @param options.position {object} 模型位置
|
|||
|
|
* @param options.position.lng {number} 经度
|
|||
|
|
* @param options.position.lat {number} 纬度
|
|||
|
|
* @param options.position.alt {number} 高度
|
|||
|
|
* */
|
|||
|
|
constructor(earth, options = {}, _Dialog = {}) {
|
|||
|
|
super(earth, options)
|
|||
|
|
this.picking = false
|
|||
|
|
this.Dialog = _Dialog
|
|||
|
|
this._elms = {};
|
|||
|
|
this._EventBinding = new EventBinding()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get type() {
|
|||
|
|
return "tileset"
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
on() {
|
|||
|
|
return this.add()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get name() {
|
|||
|
|
return this.newData.name
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
set name(v) {
|
|||
|
|
this.newData.name = v
|
|||
|
|
this._elms.name && this._elms.name.forEach((item) => {
|
|||
|
|
item.value = v
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get height() {
|
|||
|
|
return this.newData.height
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
set height(v) {
|
|||
|
|
this.newData.height = v
|
|||
|
|
this.options.position.alt = v
|
|||
|
|
this._elms.height && this._elms.height.forEach((item) => {
|
|||
|
|
item.value = v
|
|||
|
|
})
|
|||
|
|
this.updateModel(this.newData.lng, this.newData.lat, this.newData.height, this.newData.roll, this.newData.heading, this.newData.pitch)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get accuracy() {
|
|||
|
|
return this.newData.accuracy
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
set accuracy(v) {
|
|||
|
|
this.newData.accuracy = Number(v.toFixed(1))
|
|||
|
|
if(this.newData.accuracy<0.1) {
|
|||
|
|
this.newData.accuracy = 0.1
|
|||
|
|
}
|
|||
|
|
if(this.entity) {
|
|||
|
|
this.entity.maximumScreenSpaceError = 32/this.newData.accuracy
|
|||
|
|
}
|
|||
|
|
this._elms.accuracy && this._elms.accuracy.forEach((item) => {
|
|||
|
|
item.value = this.newData.accuracy
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get lng() {
|
|||
|
|
return this.newData.lng
|
|||
|
|
}
|
|||
|
|
set lng(v) {
|
|||
|
|
this.newData.lng = v
|
|||
|
|
this.options.position.lng = v
|
|||
|
|
this.updateModel(this.newData.lng, this.newData.lat, this.newData.height, this.newData.roll, this.newData.heading, this.newData.pitch)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get lat() {
|
|||
|
|
return this.newData.lat
|
|||
|
|
}
|
|||
|
|
set lat(v) {
|
|||
|
|
this.newData.lat = v
|
|||
|
|
this.options.position.lat = v
|
|||
|
|
this.updateModel(this.newData.lng, this.newData.lat, this.newData.height, this.newData.roll, this.newData.heading, this.newData.pitch)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get roll() {
|
|||
|
|
return this.newData.roll
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
set roll(v) {
|
|||
|
|
this.newData.roll = v
|
|||
|
|
this.updateModel(this.newData.lng, this.newData.lat, this.newData.height, this.newData.roll, this.newData.heading, this.newData.pitch, this.newData.scale)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get heading() {
|
|||
|
|
return this.newData.heading
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
set heading(v) {
|
|||
|
|
this.newData.heading = v
|
|||
|
|
this.updateModel(this.newData.lng, this.newData.lat, this.newData.height, this.newData.roll, this.newData.heading, this.newData.pitch, this.newData.scale)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get pitch() {
|
|||
|
|
return this.newData.pitch
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
set pitch(v) {
|
|||
|
|
this.newData.pitch = v
|
|||
|
|
this.updateModel(this.newData.lng, this.newData.lat, this.newData.height, this.newData.roll, this.newData.heading, this.newData.pitch, this.newData.scale)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get transparency() {
|
|||
|
|
return this.newData.transparency
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
set transparency(v) {
|
|||
|
|
if (!this.newData) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.newData.transparency = Number(v)
|
|||
|
|
this._elms.transparency && this._elms.transparency.forEach((item) => {
|
|||
|
|
item.value = v
|
|||
|
|
})
|
|||
|
|
let transparency = this.newData.transparency
|
|||
|
|
// if (transparency == 1) {
|
|||
|
|
// transparency = 0.99
|
|||
|
|
// }
|
|||
|
|
this.entity.style = new Cesium.Cesium3DTileStyle({
|
|||
|
|
color: {
|
|||
|
|
"conditions": [
|
|||
|
|
//有size属性表示为点云，需要与点颜色融合
|
|||
|
|
["Boolean(${SIZE})", "${COLOR} * color('rgba(255,255,255)', " + transparency + ")"],
|
|||
|
|
["true", "color('rgba(255,255,255," + transparency + ")')"]
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
show: true,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @description 编辑框
|
|||
|
|
* @param state=false {boolean} 状态: true打开, false关闭
|
|||
|
|
*/
|
|||
|
|
async edit(state = false) {
|
|||
|
|
let _this = this
|
|||
|
|
this._element_style = null
|
|||
|
|
|
|||
|
|
// 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._element_style = document.createElement('style');
|
|||
|
|
this._element_style.type = 'text/css';
|
|||
|
|
this._element_style.setAttribute('data-name', 'YJ_style_dialog');
|
|||
|
|
this._element_style.innerHTML = css();
|
|||
|
|
|
|||
|
|
this._DialogObject = await new Dialog(this.sdk, this.newData, {
|
|||
|
|
title: '倾斜模型属性', left: '180px', top: '100px',
|
|||
|
|
confirmCallBack: (options) => {
|
|||
|
|
this.oldData.name = this.newData.name
|
|||
|
|
this.oldData.height = this.newData.height
|
|||
|
|
this.oldData.lng = this.newData.lng
|
|||
|
|
this.oldData.lat = this.newData.lat
|
|||
|
|
this.oldData.transparency = this.newData.transparency
|
|||
|
|
this.oldData.scale = this.newData.scale
|
|||
|
|
this.oldData.roll = this.newData.roll
|
|||
|
|
this.oldData.heading = this.newData.heading
|
|||
|
|
this.oldData.pitch = this.newData.pitch
|
|||
|
|
this.oldData.type = this.type
|
|||
|
|
this.oldData.accuracy = this.newData.accuracy
|
|||
|
|
this._DialogObject.close()
|
|||
|
|
this.Dialog.confirmCallBack && this.Dialog.confirmCallBack({ ...this.oldData, type: this.type })
|
|||
|
|
syncSplitData(this.sdk, this.oldData.id)
|
|||
|
|
},
|
|||
|
|
resetCallBack: () => {
|
|||
|
|
this.reset()
|
|||
|
|
this.Dialog.resetCallBack && this.Dialog.resetCallBack()
|
|||
|
|
},
|
|||
|
|
removeCallBack: () => {
|
|||
|
|
this.Dialog.removeCallBack && this.Dialog.removeCallBack()
|
|||
|
|
},
|
|||
|
|
closeCallBack: () => {
|
|||
|
|
this.reset()
|
|||
|
|
if (this.positionEditing) {
|
|||
|
|
this.positionEditing = false
|
|||
|
|
}
|
|||
|
|
if (this.rotationEditing) {
|
|||
|
|
this.rotationEditing = false
|
|||
|
|
}
|
|||
|
|
this.Dialog.closeCallBack && this.Dialog.closeCallBack()
|
|||
|
|
},
|
|||
|
|
showCallBack: (show) => {
|
|||
|
|
this.newData.show = show
|
|||
|
|
this.entity && (this.entity.show = show)
|
|||
|
|
this.Dialog.showCallBack && this.Dialog.showCallBack()
|
|||
|
|
},
|
|||
|
|
rotateCallBack: () => {
|
|||
|
|
if (this.rotationEditing) {
|
|||
|
|
this.rotationEditing = false
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
this.rotationEditing = true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
translationalCallBack: () => {
|
|||
|
|
if (this.positionEditing) {
|
|||
|
|
this.positionEditing = false
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
this.positionEditing = true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, true)
|
|||
|
|
document.getElementsByTagName('head')[0].appendChild(this._element_style);
|
|||
|
|
let contentElm = document.createElement('div');
|
|||
|
|
contentElm.innerHTML = html()
|
|||
|
|
this._DialogObject.contentAppChild(contentElm)
|
|||
|
|
|
|||
|
|
let all_elm = contentElm.getElementsByTagName("*")
|
|||
|
|
this._EventBinding.on(this, all_elm)
|
|||
|
|
this._elms = this._EventBinding.element
|
|||
|
|
} 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
|
|||
|
|
// }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//更新模型位置
|
|||
|
|
updateModel(_tx, _ty, _tz, _rx = 0, _ry = 0, _rz = 0, s = 1) {
|
|||
|
|
if (!this.tileset.root.transform) {
|
|||
|
|
if (window.ELEMENT) {
|
|||
|
|
window.ELEMENT.Message.closeAll();
|
|||
|
|
window.ELEMENT.Message({
|
|||
|
|
message: '该模型不支持移动和旋转！',
|
|||
|
|
type: 'warning',
|
|||
|
|
duration: 1500
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
console.warn('该模型不支持移动和旋转！')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if ((!_tx && _tx!==0) || (!_ty && _ty!==0) || (!_tz && _tz!==0)) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
let mx = Cesium.Matrix3.fromRotationX(
|
|||
|
|
Cesium.Math.toRadians(_rx)
|
|||
|
|
)
|
|||
|
|
let my = Cesium.Matrix3.fromRotationY(
|
|||
|
|
Cesium.Math.toRadians(_ry)
|
|||
|
|
)
|
|||
|
|
let mz = Cesium.Matrix3.fromRotationZ(
|
|||
|
|
Cesium.Math.toRadians(_rz)
|
|||
|
|
)
|
|||
|
|
// 平移
|
|||
|
|
let m = Cesium.Transforms.eastNorthUpToFixedFrame(new Cesium.Cartesian3.fromDegrees(_tx, _ty, _tz))
|
|||
|
|
// 旋转
|
|||
|
|
let rotationX = Cesium.Matrix4.fromRotationTranslation(mx)
|
|||
|
|
let rotationY = Cesium.Matrix4.fromRotationTranslation(my)
|
|||
|
|
let rotationZ = Cesium.Matrix4.fromRotationTranslation(mz)
|
|||
|
|
let originalMatrix = new Cesium.Matrix4()
|
|||
|
|
Cesium.Matrix4.multiply(m, rotationX, originalMatrix)
|
|||
|
|
Cesium.Matrix4.multiply(originalMatrix, rotationY, originalMatrix)
|
|||
|
|
Cesium.Matrix4.multiply(originalMatrix, rotationZ, originalMatrix)
|
|||
|
|
const scale = Cesium.Matrix4.fromUniformScale(s);
|
|||
|
|
Cesium.Matrix4.multiply(originalMatrix, scale, this.entity._root.transform)
|
|||
|
|
// console.log(_tx, _ty, _tz)
|
|||
|
|
if (!this.editObj.activeAxis) {
|
|||
|
|
this.editObj.position = { lng: _tx, lat: _ty, alt: _tz }
|
|||
|
|
}
|
|||
|
|
if (!this.editObj.activeCircle) {
|
|||
|
|
this.editObj.rotate = { x: _rx, y: _ry, z: _rz }
|
|||
|
|
}
|
|||
|
|
this.editObj && this.editObj.update()
|
|||
|
|
|
|||
|
|
clearTimeout(this.#updateModelTimeout)
|
|||
|
|
this.#updateModelTimeout = setTimeout(() => {
|
|||
|
|
clearTimeout(this.#updateModelTimeout)
|
|||
|
|
let center = this.cartesian3Towgs84(this.entity.boundingSphere.center, this.sdk.viewer)
|
|||
|
|
let circle = turf.circle([center.lng, center.lat], this.entity.boundingSphere.radius / 1000, { steps: 360, units: 'kilometers' });
|
|||
|
|
for (let [key, entity] of this.sdk.entityMap) {
|
|||
|
|
if (entity.type === 'BillboardObject' && entity.heightMode == 3) {
|
|||
|
|
let pt = turf.point([entity.lng, entity.lat]);
|
|||
|
|
if (turf.booleanPointInPolygon(pt, circle)) {
|
|||
|
|
entity.updateHeight()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
if (entity.label) {
|
|||
|
|
entity.label.show = entity.label.show
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, 300);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// flyTo() {
|
|||
|
|
// this.entity.readyPromise.then(() => {
|
|||
|
|
// console.log(this.entity)
|
|||
|
|
// let boundingSphere
|
|||
|
|
// if(!this.lng || !this.lat) {
|
|||
|
|
// boundingSphere = new Cesium.BoundingSphere(this.entity.boundingSphere)
|
|||
|
|
// }
|
|||
|
|
// else {
|
|||
|
|
// boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(this.lng, this.lat, this.height), this.entity.boundingSphere.radius)
|
|||
|
|
// }
|
|||
|
|
// this.sdk.viewer.camera.flyToBoundingSphere(boundingSphere)
|
|||
|
|
// })
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
reset() {
|
|||
|
|
this.editObj.destroy()
|
|||
|
|
if (!this.entity) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.transparency = this.oldData.transparency
|
|||
|
|
this.name = this.oldData.name
|
|||
|
|
this.height = this.oldData.height
|
|||
|
|
this.lng = this.oldData.lng
|
|||
|
|
this.lat = this.oldData.lat
|
|||
|
|
this.roll = this.oldData.roll
|
|||
|
|
this.heading = this.oldData.heading
|
|||
|
|
this.pitch = this.oldData.pitch
|
|||
|
|
this.scale = this.oldData.scale
|
|||
|
|
this.accuracy = this.oldData.accuracy
|
|||
|
|
|
|||
|
|
this.entity.style = new Cesium.Cesium3DTileStyle({
|
|||
|
|
color: {
|
|||
|
|
"conditions": [
|
|||
|
|
["Boolean(${SIZE})", "${COLOR} * color('rgba(255,255,255)', " + this.transparency + ")"],
|
|||
|
|
["true", "color('rgba(255,255,255," + this.transparency + ")')"]
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
show: true,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default Tileset
|