diff --git a/src/Global/mouseRightMenu/index.js b/src/Global/mouseRightMenu/index.js index 818271b..0fd350e 100644 --- a/src/Global/mouseRightMenu/index.js +++ b/src/Global/mouseRightMenu/index.js @@ -173,6 +173,9 @@ function MouseRightMenu(sdk, status, callBack) { // that.edit(true) // this.attribute(entityId) break + case '文本框': + object.position = position + break } eventListener[sdk.div_id].callBack(key, object) _element.removeChild(menuElm) diff --git a/src/In/index.js b/src/In/index.js index 8120864..3fae21c 100644 --- a/src/In/index.js +++ b/src/In/index.js @@ -185,6 +185,8 @@ import Frustum from '../Obj/AirLine/frustum' import DrawTakeOff from '../Obj/AirLine/DrawTakeOff' import FlowLine from '../Obj/Base/FlowLine' import Sunshine from '../Global/efflect/Sunshine' +// import Road2 from '../Obj/Base/RoadObject' +import TextBox from '../Obj/Base/TextBox' const YJEarthismeasuring = Symbol('测量状态') const screenRecord = Symbol('录屏对象') @@ -256,7 +258,9 @@ if (!window.YJ) { FRUSTUN: Frustum, // GenerateRoute Dialog, - FlowLine + FlowLine, + // Road2, + TextBox }, YJEarth, Tools, diff --git a/src/Obj/Base/TextBox/index.js b/src/Obj/Base/TextBox/index.js new file mode 100644 index 0000000..e78e9a9 --- /dev/null +++ b/src/Obj/Base/TextBox/index.js @@ -0,0 +1,109 @@ +/** + * 文本框 + */ +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 diff --git a/src/YJEarth/index.js b/src/YJEarth/index.js index 5a12707..27a1dad 100644 --- a/src/YJEarth/index.js +++ b/src/YJEarth/index.js @@ -46,16 +46,18 @@ class YJEarth { // setCesiumIndexedDBMaxSize(getCesiumIndexedDBMaxSize()) setCesiumManageIndexexDBState(getCesiumManageIndexexDBState()) this.proj = new Proj() + this.clickTextDom = undefined + this.isLeftClick = false this.init() setSvg() } addIncetance(id, obj) { - this.entityMap.set(id, obj) + this.entityMap.set(id + '', obj) } getIncetance(id) { - return this.entityMap.get(id) + return this.entityMap.get(id + '') } removeIncetance(id) { @@ -221,11 +223,11 @@ class YJEarth { document.fonts.ready.then(() => { for (let [id, obj] of this.entityMap) { - if('labelFontFamily' in obj) { + if ('labelFontFamily' in obj) { obj.labelFontFamily = obj.labelFontFamily } } - + }); // const font = new FontFace( @@ -413,6 +415,94 @@ class YJEarth { }) ) } + + + let ClickHandler = new Cesium.ScreenSpaceEventHandler(_this.viewer.canvas) + ClickHandler.setInputAction((movement) => { + let textList = document.getElementsByClassName('popup-textarea') + _this.isLeftClick = false + for (let i = textList.length - 1; i > -1; i--) { + let left = returnNumber(textList[i].style.left) + let top = returnNumber(textList[i].style.top) + let width = textList[i].clientWidth * 1 + let height = textList[i].clientHeight * 1 + let x = movement.position.x + let y = movement.position.y + if (x > left && x < left + width && y > top && y < top + height) { + if (_this.clickTextDom) { + _this.clickTextDom.style['pointer-events'] = 'none' + } + _this.clickTextDom = textList[i] + textList[i].style['pointer-events'] = 'all' + textList[i].querySelector('textarea').focus() + _this.isLeftClick = true + break; + } + } + + let mousedown = undefined + let mousemove = undefined + let mouseup = undefined + let fun = undefined + let handler = undefined + + if (_this.isLeftClick) { + let click = false + let layerX = 0 + let layerY = 0 + + mousedown = function (e) { + layerX = e.layerX + layerY = e.layerY + click = true + } + mousemove = function (e) { + if (!click) { + return + } + let width = _this.clickTextDom.clientWidth * 1 + let height = _this.clickTextDom.clientHeight * 1 + let param = { + x: e.clientX - layerX + width / 2, + y: e.clientY - layerY + height, + } + _this.entityMap.get(_this.clickTextDom.id).setHandeler(param) + + } + mouseup = function (e) { + if (!click) { + return + } + click = false + } + + _this.clickTextDom.addEventListener('mousedown', mousedown); + document.addEventListener('mousemove', mousemove); + document.addEventListener('mouseup', mouseup); + } + // 点击其他地方取消 + if (!_this.isLeftClick && _this.clickTextDom) { + _this.clickTextDom.removeEventListener('mousedown', mousedown); + document.removeEventListener('mousemove', mousemove); + document.removeEventListener('mouseup', mouseup); + + _this.clickTextDom.style['pointer-events'] = 'none' + _this.clickTextDom = undefined + + } + }, Cesium.ScreenSpaceEventType.LEFT_CLICK) + + // ClickHandler.setInputAction((movement) => { + // if (_this.clickTextDom) { + // _this.clickTextDom.style['pointer-events'] = 'none' + // _this.clickTextDom = undefined + // } + // }, Cesium.ScreenSpaceEventType.LEFT_CLICK) + function returnNumber(str) { + let index = str.indexOf('px') + return Number(str.slice(0, index)) + } + } destroy() { diff --git a/static/custom/css/index.css b/static/custom/css/index.css index fc4b55b..421e48e 100644 --- a/static/custom/css/index.css +++ b/static/custom/css/index.css @@ -3043,6 +3043,42 @@ background-size: 100% 100%; } +/* 文本框 */ +.popup-textarea{ + /* width: 212px; */ + width: 161.6px; + /* height: 154px; */ + height: 119.2px; + display: block; + pointer-events: none; + position: absolute; + /* z-index: 99; */ + background: url(../../img/pop.png) 100% 100% no-repeat; + background-size: 100% 100%; + padding: 5px 5px 0px 5px; +} +.popup-textarea textarea{ + background-color: unset!important; + border: unset!important; + color: #fff; +} +.popup-textarea textarea::-webkit-scrollbar { + width: 8px!important; + /* height: 8px!important; */ +} + +.popup-textarea textarea::-webkit-scrollbar-thumb { + border-radius: 5px!important; + -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2)!important; + background-color: rgba(var(--color-sdk-base-rgb))!important; +} + +.popup-textarea textarea::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2)!important; + border-radius: 5px!important; + background-color: rgba(var(--color-sdk-base-rgb), 0.1)!important; +} + /* 贴地图片 */ .YJ-custom-base-dialog.ground-image>.content { width: 500px; diff --git a/static/img/pop.png b/static/img/pop.png new file mode 100644 index 0000000..59f94d1 Binary files /dev/null and b/static/img/pop.png differ