/** * 文本框 */ import Base from "../index"; import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../../Global/global' class TextBox extends Base { /** * @constructor * @param sdk * @description 文本框 * @param options {object} 属性 * @param options.id=id * @param options.positions=[]位置 * @param options.text=文本框内容 * @param options.show=true {boolean}是否显示 * @param Dialog {object} 弹框对象 * @param Dialog.confirmCallBack {function} 弹框确认时的回调 * */ constructor(sdk, options = {}, callback = null) { // this.sdk = { ...sdk } // this.options = { ...options } super(sdk, options) this.options.positions = options.positions || [] this.options.text = options.text || '' this.options.show = (options.show || options.show === false) ? options.show : true this.clickTextDom = undefined this.handler = undefined this.textDom = undefined this.create(this) this.sdk.addIncetance(this.options.id, this) this.callback = callback } async create(that) { let viewer = that.sdk.viewer // 创建div元素 let dom = document.createElement('span'); dom.id = that.options.id dom.className = 'popup-textarea' // 创建textarea元素 var textarea = document.createElement('textarea'); textarea.className = 'textarea' textarea.value = that.options.text; // 设置textarea的属性,例如行数和列数 textarea.rows = 6; textarea.style.resize = 'none' // 将textarea添加到div中 dom.appendChild(textarea); (!that.options.show) && (dom.style.display = 'none') // 将div添加到body中 // document.body.appendChild(dom); // 配置CSS样式和内容结构 viewer.cesiumWidget.container.appendChild(dom); let posi = Cesium.Cartesian3.fromDegrees(that.options.positions.lng, that.options.positions.lat, that.options.positions.alt) that.handler = function () { const position = Cesium.SceneTransforms.wgs84ToWindowCoordinates( viewer.scene, posi ); if (position) { let width = dom.clientWidth * 1 let height = dom.clientHeight * 1 dom.style.left = `${position.x - width / 2}px`; dom.style.top = `${position.y - height}px`; } } viewer.scene.postRender.addEventListener(that.handler); that.textDom = dom; } async setHandeler(data) { let that = this const ray = this.sdk.viewer.camera.getPickRay(new Cesium.Cartesian2(data.x, data.y)); var cartesian = this.sdk.viewer.scene.globe.pick(ray, this.sdk.viewer.scene); if (Cesium.defined(cartesian)) { that.sdk.viewer.scene.postRender.removeEventListener(that.handler); var cartographic = Cesium.Cartographic.fromCartesian(cartesian); var longitude = Cesium.Math.toDegrees(cartographic.longitude); var latitude = Cesium.Math.toDegrees(cartographic.latitude); that.positions = { lng: longitude, lat: latitude, alt: cartographic.height } let posi = Cesium.Cartesian3.fromDegrees(longitude, latitude, cartographic.height) that.handler = function () { const position = Cesium.SceneTransforms.wgs84ToWindowCoordinates( that.sdk.viewer.scene, posi ); if (position) { let width = that.textDom.clientWidth * 1 let height = that.textDom.clientHeight * 1 that.textDom.style.left = `${position.x - width / 2}px`; that.textDom.style.top = `${position.y - height}px`; } } that.sdk.viewer.scene.postRender.addEventListener(that.handler); } } async getwords(words) { this.options.text = words this.callback(this.options) } async returnFun() { return this.handler } get show() { return this.options.show } set show(v) { this.options.show = v this.textDom && (this.textDom.style.display = v ? 'block' : 'none'); } get positions() { return this.options.positions } set positions(v) { this.options.positions = v } 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 positionArray = [] let a = Cesium.Cartesian3.fromDegrees( this.positions.lng, this.positions.lat, this.positions.alt ) positionArray.push(a.x, a.y, a.z) let BoundingSphere = Cesium.BoundingSphere.fromVertices(positionArray) this.viewer.camera.flyToBoundingSphere(BoundingSphere, { offset: { heading: Cesium.Math.toRadians(0.0), pitch: Cesium.Math.toRadians(-20.0), roll: Cesium.Math.toRadians(0.0) } }) } } async remove() { if (this.handler) { this.sdk.viewer.scene.postRender.removeEventListener(this.handler); this.handler = undefined } if (this.textDom && this.textDom.parentNode) { this.sdk.viewer.cesiumWidget.container.removeChild(this.textDom); } } flicker() { } } export default TextBox