110 lines
3.4 KiB
JavaScript
110 lines
3.4 KiB
JavaScript
|
/**
|
|||
|
|
* 文本框
|
|||
|
|
*/
|
|||
|
|
import Base from "../index";
|
|||
|
|
class TextBox extends Base {
|
|||
|
|
constructor(sdk, options = {}) {
|
|||
|
|
// this.sdk = { ...sdk }
|
|||
|
|
// this.options = { ...options }
|
|||
|
|
super(sdk, options)
|
|||
|
|
this.clickTextDom = undefined
|
|||
|
|
this.handler = undefined
|
|||
|
|
this.textDom = undefined
|
|||
|
|
this.create(this)
|
|||
|
|
this.sdk.addIncetance(this.options.id, this)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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的属性，例如行数和列数
|
|||
|
|
textarea.rows = 6;
|
|||
|
|
textarea.style.resize = 'none'
|
|||
|
|
// 将textarea添加到div中
|
|||
|
|
dom.appendChild(textarea);
|
|||
|
|
// 将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
|
|||
|
|
);
|
|||
|
|
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
|
|||
|
|
);
|
|||
|
|
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 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 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
|