295 lines
9.2 KiB
JavaScript
295 lines
9.2 KiB
JavaScript
/**
|
||
* 文本框
|
||
*/
|
||
import Base from "../index";
|
||
import { syncData, getSdk } from '../../../Global/MultiViewportMode'
|
||
import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../../Global/global'
|
||
class TextBox extends Base {
|
||
/**
|
||
* @constructor
|
||
* @param sdk
|
||
* @description 文本框
|
||
* @param options {object} 属性
|
||
* @param options.id=id
|
||
* @param options.position=[]位置
|
||
* @param options.text=文本框内容
|
||
* @param options.show=true {boolean}是否显示
|
||
* @param callback=方法回调
|
||
* @param Dialog {object} 弹框对象
|
||
* @param Dialog.confirmCallBack {function} 弹框确认时的回调
|
||
* */
|
||
constructor(sdk, options = {}, callback = null) {
|
||
// this.sdk = { ...sdk }
|
||
// this.options = { ...options }
|
||
super(sdk, options)
|
||
this.options.position = options.position || []
|
||
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
|
||
|
||
syncData(this.sdk, this.options.id)
|
||
|
||
}
|
||
|
||
get type() {
|
||
return 'TextBox'
|
||
}
|
||
|
||
async create(that) {
|
||
let viewer = that.sdk.viewer
|
||
// 创建div元素
|
||
let dom = document.createElement('span');
|
||
dom.id = that.options.id
|
||
dom.className = 'popup-textarea'
|
||
dom.style.zIndex = 1
|
||
// 创建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.position.lng, that.options.position.lat, that.options.position.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 isClick(posi, id) {
|
||
let params = [
|
||
{
|
||
position: posi
|
||
},
|
||
id,
|
||
null
|
||
]
|
||
|
||
this.clickCallBack({ position: posi }, id, null)
|
||
}
|
||
async setHandeler(data) {
|
||
let that = this
|
||
|
||
let cartesian = this.sdk.viewer.scene.pickPosition(new Cesium.Cartesian2(data.x, data.y)); //屏幕坐标转为笛卡尔空间坐标
|
||
// if (!cartesian) return;
|
||
|
||
// let c = Cesium.Cartographic.fromCartesian(position);
|
||
if (!cartesian) {
|
||
const ray = this.sdk.viewer.camera.getPickRay(new Cesium.Cartesian2(data.x, data.y));
|
||
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);
|
||
|
||
let height = await that.getClampToHeight({ lng: longitude, lat: latitude })
|
||
that.position = {
|
||
lng: longitude,
|
||
lat: latitude,
|
||
alt: cartographic.height
|
||
// alt: 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
|
||
|
||
let { sdkP } = getSdk()
|
||
if (this.sdk === sdkP && sdkP) {//三维
|
||
this.callback(this.options)
|
||
syncData(this.sdk, this.options.id)
|
||
}
|
||
else if (sdkP) {//二维
|
||
sdkP.entityMap.get(this.options.id).text = words
|
||
sdkP.entityMap.get(this.options.id).twoToThree(this.options.position)
|
||
} else if (!sdkP) {
|
||
this.callback(this.options)
|
||
syncData(this.sdk, this.options.id)
|
||
}
|
||
}
|
||
async twoToThree(position) {
|
||
let that = this
|
||
that.sdk.viewer.scene.postRender.removeEventListener(that.handler);
|
||
let posi = Cesium.Cartesian3.fromDegrees(position.lng, position.lat, position.alt)
|
||
|
||
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 returnFun() {
|
||
return this.handler
|
||
}
|
||
get text() {
|
||
return this.options.text
|
||
}
|
||
set text(val) {
|
||
this.options.text = val
|
||
this.textDom.querySelector('textarea').value = val
|
||
this.callback(this.options)
|
||
}
|
||
get onClick() {
|
||
return this.clickCallBack
|
||
}
|
||
set onClick(val) {
|
||
if (val && typeof val !== 'function') {
|
||
console.error('val:', val, '不是一个function')
|
||
} else {
|
||
this.clickCallBack = val
|
||
}
|
||
}
|
||
get show() {
|
||
return this.options.show
|
||
}
|
||
set show(v) {
|
||
this.options.show = v
|
||
this.textDom && (this.textDom.style.display = v ? 'block' : 'none');
|
||
syncData(this.sdk, this.options.id)
|
||
}
|
||
get position() {
|
||
return this.options.position
|
||
}
|
||
set position(v) {
|
||
this.options.position = 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.position) {
|
||
position = { ...this.options.position[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.position.lng,
|
||
this.position.lat,
|
||
this.position.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);
|
||
}
|
||
await this.sdk.removeIncetance(this.options.id)
|
||
syncData(this.sdk, this.options.id)
|
||
}
|
||
|
||
flicker() { }
|
||
}
|
||
|
||
export default TextBox
|