diff --git a/src/Draw/drawThreeRect.js b/src/Draw/drawThreeRect.js new file mode 100644 index 0000000..f77600c --- /dev/null +++ b/src/Draw/drawThreeRect.js @@ -0,0 +1,317 @@ +import MouseTip from '../MouseTip' +import MouseEvent from '../Event' +import Draw from './draw' + +/** + * @extends Draw*/ +class DrawThreeRect extends Draw { + /** + * @constructor + * @param [options] {object} 三点矩形属性 + * @param [options.color=rgba(185,14,14,0.58)] {object} 线属性 + + * */ + constructor(sdk, options = {}) { + super(sdk, options) + this.polygonHasCreated = false + this.rectObject = [] + } + + static create_polygon(that, viewer = that.viewer) { + that.polygonHasCreated = true + let id = that.randomString() + viewer.entities.add( + new Cesium.Entity({ + id: id, + polygon: { + classificationType: Cesium.ClassificationType.BOTH, + hierarchy: new Cesium.CallbackProperty((e) => { + return new Cesium.PolygonHierarchy(that.positions) + }), + material: Cesium.Color.fromCssColorString(that.color), + zIndex: 99999999 + }, + polyline: { + positions: new Cesium.CallbackProperty((e) => { + return that.positions.concat(that.positions[0]) + }), + width: 2, + material: Cesium.Color.fromCssColorString('#c1c505').withAlpha(0.5), + clampToGround: true, + zIndex: 99999999 + }, + }) + ) + return id + } + computedLastPoint(arr) { + const start = arr[0]; + const end = arr[1]; + // 计算点到线的距离 + const directionVector = Cesium.Cartesian3.subtract(end, start, new Cesium.Cartesian3()); + const pointToStart = Cesium.Cartesian3.subtract(arr[2], start, new Cesium.Cartesian3()); + const projectionLength = Cesium.Cartesian3.dot(pointToStart, directionVector) / Cesium.Cartesian3.magnitudeSquared(directionVector); + const projectionVector = Cesium.Cartesian3.multiplyByScalar(directionVector, projectionLength, new Cesium.Cartesian3()); + const projectionPoint = Cesium.Cartesian3.add(start, projectionVector, new Cesium.Cartesian3()); + const distance = Cesium.Cartesian3.distance(arr[2], projectionPoint) + + const perp = Cesium.Cartesian3.subtract(arr[2], projectionPoint, new Cesium.Cartesian3()); + Cesium.Cartesian3.normalize(perp, perp); + // 生成偏移向量 + const offset = Cesium.Cartesian3.multiplyByScalar(perp, distance, new Cesium.Cartesian3()); + let threePoint = Cesium.Cartesian3.add(end, offset, new Cesium.Cartesian3()) + let lastPoint = Cesium.Cartesian3.add(start, offset, new Cesium.Cartesian3()) + return [{ ...threePoint }, { ...lastPoint }] + } + /** + * @desc 开始动态绘制面 + * @method start + * @param cb {function} 回调函数 + * @memberOf DrawPolygon + * @example draw.start((err,positions)=>{ + * + * }) + * */ + start(cb) { + if (YJ.Measure.GetMeasureStatus()) { + cb('上一次测量未结束') + } else { + this.polygonHasCreated = false + super.start() + YJ.Measure.SetMeasureStatus(true) + let into + this.tip = new MouseTip('左键确定，右键结束；CTRL+右键撤销', this.sdk) + this.event = new MouseEvent(this.sdk) + let cnt = 0 + this.positions = [] + this.positionsLine = [] + this.points_ids = [] //存放左键点击时临时添加的point的id + let cache_positions = [] + let cache_84_position = [] + this.event.mouse_left((movement, cartesian) => { + if (into === '2D') { + return + } + into = '3D' + cnt++ + this.positions = cache_positions.concat({ ...cartesian }) + this.tip.setPosition( + cartesian, + movement.position.x, + movement.position.y + ) + if (!this.polygonHasCreated) { + let polyline_id = DrawThreeRect.create_polygon(this) + this.points_ids.push(polyline_id) + } + cache_positions.push(cartesian) + cache_84_position.push(this.cartesian3Towgs84(cartesian, this.viewer)) + this.points_ids.push(this.create_point(cartesian)) + if (cnt == 3) { + this.end() + cb(null, this.rectObject) + } + }) + this.event.mouse_right((movement, cartesian) => { + if (into === '2D') { + return + } + // let positions = [] + // console.log(cache_positions) + // cache_positions.forEach((item) => { + // let p = this.cartesian3Towgs84(item) + // console.log(item) + // positions.push(p) + // }) + this.end() + cb('取消', '') + }) + this.event.mouse_move((movement, cartesian) => { + if (into === '2D') { + return + } + + // this.positions = cache_positions.concat({ ...cartesian }) + this.tip.setPosition( + cartesian, + movement.endPosition.x, + movement.endPosition.y + ) + + if (cnt == 2) { + let arr = JSON.parse(JSON.stringify(cache_positions)) + let arr1 = arr.concat({ ...cartesian }) + let pointArr = this.computedLastPoint(arr1) + arr = arr.concat(pointArr) + this.positions = arr + let arr_84 = arr.map(item => { + return this.cartesian3Towgs84(item, this.viewer) + }) + this.rectObject = arr_84 + } + }) + this.event.mouse_right_keyboard_ctrl((movement, cartesian) => { + if (into === '2D') { + return + } + if (this.points_ids.length > 1) { + this.remove_entity(this.points_ids.pop()) //移除point + cache_positions.pop() + cache_84_position.pop() + } + }) + + this.event.gesture_pinck_start_keyboard_ctrl(() => { + if (into === '2D') { + return + } + if (this.points_ids.length > 1) { + this.remove_entity(this.points_ids.pop()) //移除point + cache_positions.pop() + cache_84_position.pop() + this.positions = cache_positions.concat(cartesian) + } + }) + + this.event.gesture_pinck_start((movement, cartesian) => { + if (into === '2D') { + return + } + let startTime = new Date() + this.event.gesture_pinck_end(() => { + let endTime = new Date() + if (endTime - startTime >= 500) { + cb(null, cache_84_position) + this.end() + } + else { + this.tip.setPosition( + cartesian, + (movement.position1.x + movement.position2.x) / 2, + (movement.position1.y + movement.position2.y) / 2 + ) + if (!this.polygonHasCreated) { + let polyline_id = DrawThreeRect.create_polygon(this) + this.points_ids.push(polyline_id) + } + cache_positions.push(cartesian) + cache_84_position.push(this.cartesian3Towgs84(cartesian, this.viewer)) + this.points_ids.push(this.create_point(cartesian)) + this.positions = cache_positions.concat(cartesian) + } + }) + }) + + if (!this._is2D && this._sdk2D) { + this.event2D = new MouseEvent(this._sdk2D) + this.event2D.mouse_left((movement, cartesian) => { + if (into === '3D') { + return + } + into = '2D' + cnt++ + this.positions = cache_positions.concat({ ...cartesian }) + this.tip.setPosition( + cartesian, + movement.position.x + this.viewer.canvas.width, + movement.position.y + ) + if (!this.polygonHasCreated) { + let polyline_id = DrawThreeRect.create_polygon(this, this._sdk2D.viewer) + this.points_ids.push(polyline_id) + } + cache_positions.push(cartesian) + cache_84_position.push(this.cartesian3Towgs84(cartesian, this.viewer)) + this.points_ids.push(this.create_point(cartesian, this._sdk2D.viewer)) + if (cnt == 3) { + this.end() + cb(null, this.rectObject) + } + }) + this.event2D.mouse_right((movement, cartesian) => { + if (into === '3D') { + return + } + this.end() + cb('取消', '') + }) + this.event2D.mouse_move((movement, cartesian) => { + if (into === '3D') { + return + } + // this.positions = cache_positions.concat({ ...cartesian }) + this.tip.setPosition( + cartesian, + movement.endPosition.x + this.viewer.canvas.width, + movement.endPosition.y + ) + + if (cnt == 2) { + let arr = JSON.parse(JSON.stringify(cache_positions)) + let arr1 = arr.concat({ ...cartesian }) + let pointArr = this.computedLastPoint(arr1) + arr = arr.concat(pointArr) + this.positions = arr + let arr_84 = arr.map(item => { + return this.cartesian3Towgs84(item, this.viewer) + }) + this.rectObject = arr_84 + } + }) + this.event2D.mouse_right_keyboard_ctrl((movement, cartesian) => { + if (into === '3D') { + return + } + if (this.points_ids.length > 1) { + this.remove_entity(this.points_ids.pop()) //移除point + cache_positions.pop() + cache_84_position.pop() + } + }) + + this.event2D.gesture_pinck_start_keyboard_ctrl(() => { + if (into === '3D') { + return + } + if (this.points_ids.length > 1) { + this.remove_entity(this.points_ids.pop()) //移除point + cache_positions.pop() + cache_84_position.pop() + this.positions = cache_positions.concat(cartesian) + } + }) + + this.event2D.gesture_pinck_start((movement, cartesian) => { + if (into === '3D') { + return + } + let startTime = new Date() + this.event2D.gesture_pinck_end(() => { + let endTime = new Date() + if (endTime - startTime >= 500) { + cb(null, cache_84_position) + this.end() + } + else { + this.tip.setPosition( + cartesian, + ((movement.position1.x + movement.position2.x) / 2) + this.viewer.canvas.width, + (movement.position1.y + movement.position2.y) / 2 + ) + if (!this.polygonHasCreated) { + let polyline_id = DrawThreeRect.create_polygon(this, this._sdk2D.viewer) + this.points_ids.push(polyline_id) + } + cache_positions.push(cartesian) + cache_84_position.push(this.cartesian3Towgs84(cartesian, this.viewer)) + this.points_ids.push(this.create_point(cartesian, this._sdk2D.viewer)) + this.positions = cache_positions.concat(cartesian) + } + }) + }) + } + } + } +} + +export default DrawThreeRect diff --git a/src/Global/efflect/Sunshine/index.js b/src/Global/efflect/Sunshine/index.js index f1b1a59..12119d5 100644 --- a/src/Global/efflect/Sunshine/index.js +++ b/src/Global/efflect/Sunshine/index.js @@ -80,6 +80,10 @@ export default class Sunshine { } set speed(v) { this.options.speed = v + this._elms.speed && + this._elms.speed.forEach(item => { + item.value = v + }) this.viewer.clock.multiplier = this.options.speed; this.timeLine.setSpeed(v) } diff --git a/src/Global/efflect/Sunshine/timeLIne.js b/src/Global/efflect/Sunshine/timeLIne.js index f6155e9..d7deb47 100644 --- a/src/Global/efflect/Sunshine/timeLIne.js +++ b/src/Global/efflect/Sunshine/timeLIne.js @@ -9,7 +9,7 @@ export default class TimeLine { this.timelineCon = document.getElementsByClassName('timeline-container')[0]; this.speed = speed; this.animationId; - this.startTime = Date.now(); + this.startTime = performance.now(); this.manualPosition = null; this.isDragging = false; this.pauseed = false; @@ -28,9 +28,7 @@ export default class TimeLine { document.getElementsByClassName('time-marks')[0].appendChild(label) } } - - - that.startTime = Date.now() - ((that.manualPosition || 0) * 86400 * 1000 / that.speed); + that.startTime = performance.now() - ((that.manualPosition || 0) * 86400 * 1000 / that.speed); that.timeline.addEventListener('mousedown', (e) => { if (e.srcElement.className === 'handle') { @@ -57,21 +55,22 @@ export default class TimeLine { document.getElementById('timePause').addEventListener('click', function () { that.pauseed = !that.pauseed; if (that.pauseed) {//暂停 + that.pausedTime = performance.now(); // 记录暂停时刻 document.getElementById('timePause').textContent = '播放'; that.animationId && cancelAnimationFrame(that.animationId); - that.pausedTime = Date.now(); // 记录暂停时刻 that.sdk.viewer.clock.shouldAnimate = false } else {//播放 + let now = performance.now() + const pausedDuration = now - that.pausedTime; document.getElementById('timePause').textContent = '暂停'; that.manualPosition = null - const pausedDuration = Date.now() - that.pausedTime; that.startTime += pausedDuration; // 补偿暂停期间的时间差 if (that.changeDate) {//切换日期后让时间从0开始 if (that.changeDateGrag) { that.changeDateGrag = undefined } else { - that.startTime = Date.now() + that.startTime = now } that.changeDate = undefined } @@ -88,14 +87,14 @@ export default class TimeLine { that.isDragging = false; if (that.manualPosition !== null) { // that.sdk.viewer.clock.shouldAnimate = true - that.startTime = Date.now() - (that.manualPosition * 86400 * 1000 / that.speed); + that.startTime = performance.now() - (that.manualPosition * 86400 * 1000 / that.speed); that.manualPosition = null; that.changeDate && (that.changeDateGrag = true) if (!that.pauseed) { that.update() func(that.time) } else { - that.pausedTime = Date.now(); // 记录暂停时刻 + that.pausedTime = performance.now(); // 记录暂停时刻 func(that.currentTime.textContent) } @@ -113,9 +112,9 @@ export default class TimeLine { update() { if (this.manualPosition !== null) return; if (this.changeDate) {//切换日期后让时间从0开始 - this.startTime = Date.now() + this.startTime = performance.now() } - let elapsed = (Date.now() - this.startTime) * this.speed; + let elapsed = (performance.now() - this.startTime) * this.speed; // if (this.elapsed) { // elapsed = elapsed + this.elapsed // this.elapsed = undefined @@ -133,23 +132,23 @@ export default class TimeLine { } } setSpeed(v) { + let now = performance.now() if (!this.pauseed) { const currentProgress = this.manualPosition ?? - (Date.now() - this.startTime) * this.speed / (86400 * 1000); + (performance.now() - this.startTime) * this.speed / (86400 * 1000); this.speed = v; - this.startTime = Date.now() - (currentProgress * 86400 * 1000 / this.speed); + this.startTime = performance.now() - (currentProgress * 86400 * 1000 / this.speed); } else { - let pausedDuration = Date.now() - this.pausedTime; + let pausedDuration = now - this.pausedTime; this.startTime += pausedDuration; // 补偿暂停期间的时间差 - const currentProgress = this.manualPosition ?? - (Date.now() - this.startTime) * this.speed / (86400 * 1000); + (now - this.startTime) * this.speed / (86400 * 1000); this.speed = v; - this.startTime = Date.now() - (currentProgress * 86400 * 1000 / this.speed); + this.startTime = now - (currentProgress * 86400 * 1000 / this.speed); - this.pausedTime = Date.now(); // 记录切换speed暂停时刻 - this.speed = v; + this.pausedTime = now; // 记录切换speed暂停时刻 + // this.speed = v; } this.manualPosition = null; @@ -158,7 +157,7 @@ export default class TimeLine { } updateTime() { this.manualPosition = null; - this.startTime = Date.now() - ((this.manualPosition || 0) * 86400 * 1000 / this.speed); + this.startTime = performance.now() - ((this.manualPosition || 0) * 86400 * 1000 / this.speed); this.pauseed && (this.changeDate = true) this.changeDateGrag = undefined this.update(); 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..ebfff60 100644 --- a/src/In/index.js +++ b/src/In/index.js @@ -100,6 +100,7 @@ import MeasureAngle from '../Measure/MeasureAngle' import MeasureAzimuth from '../Measure/MeasureAzimuth' import DrawPolyline from '../Draw/drawPolyline' import DrawPolygon from '../Draw/drawPolygon' +import DrawThreeRect from '../Draw/drawThreeRect' import DrawPoint from '../Draw/drawPoint' import DrawCircle from '../Draw/drawCircle' import DrawElliptic from '../Draw/drawElliptic' @@ -185,6 +186,9 @@ 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' +import BatchModel from '../Obj/Base/BatchModel' const YJEarthismeasuring = Symbol('测量状态') const screenRecord = Symbol('录屏对象') @@ -256,7 +260,10 @@ if (!window.YJ) { FRUSTUN: Frustum, // GenerateRoute Dialog, - FlowLine + FlowLine, + // Road2, + TextBox, + BatchModel }, YJEarth, Tools, @@ -374,6 +381,7 @@ if (!window.YJ) { DrawAssemble, DrawSector, DrawTakeOff, + DrawThreeRect }, // 分析 Analysis: { diff --git a/src/Obj/Base/BatchModel/_element.js b/src/Obj/Base/BatchModel/_element.js new file mode 100644 index 0000000..afe7ff8 --- /dev/null +++ b/src/Obj/Base/BatchModel/_element.js @@ -0,0 +1,24 @@ +function html() { + return ` + +
+
+
+ 添加方式 +
+
+
+ 间距 +
+ + 米 + +
+
+
+
+ + ` +} + +export { html } diff --git a/src/Obj/Base/BatchModel/eventBinding.js b/src/Obj/Base/BatchModel/eventBinding.js new file mode 100644 index 0000000..ccbf026 --- /dev/null +++ b/src/Obj/Base/BatchModel/eventBinding.js @@ -0,0 +1,92 @@ +class eventBinding { + constructor() { + this.element = {} + } + static event = {} + + getEvent(name) { + return eventBinding.event[name] + } + + getEventAll() { + return eventBinding.event + } + + setEvent(name, event) { + eventBinding.event[name] = event + } + + on(that, elements) { + for (let i = 0; i < elements.length; i++) { + let Event = [] + let isEvent = false + let removeName = [] + if (!elements[i] || !elements[i].attributes) { + continue; + } + for (let m of elements[i].attributes) { + switch (m.name) { + case '@model': { + isEvent = true + if (elements[i].type == 'checkbox') { + Event.push((e) => { that[m.value] = e.target.checked }) + elements[i].checked = that[m.value] + } + else { + Event.push((e) => { + let value = e.target.value + if (e.target.type == 'number') { + value = Number(value) + } + that[m.value] = value + }) + if (elements[i].nodeName == 'IMG') { + elements[i].src = that[m.value] + } + else { + elements[i].value = that[m.value] + } + } + if (this.element[m.value]) { + this.element[m.value].push(elements[i]) + } + else { + this.element[m.value] = [elements[i]] + } + removeName.push(m.name) + break; + } + case '@click': { + elements[i].addEventListener('click', (e) => { + if (typeof (that.Dialog[m.value]) === 'function') { + that.Dialog[m.value](e) + } + }); + removeName.push(m.name) + // elements[i].attributes.removeNamedItem(m.name) + break; + } + } + // elements[i].attributes[m] = undefined + } + for (let n = 0; n < removeName.length; n++) { + elements[i].attributes.removeNamedItem(removeName[n]) + } + + if (isEvent) { + let ventType = 'input' + if (elements[i].tagName != 'INPUT' || elements[i].type == 'checkbox') { + ventType = 'change' + } + elements[i].addEventListener(ventType, (e) => { + for (let t = 0; t < Event.length; t++) { + Event[t](e) + } + }); + } + } + } +} + +const EventBinding = new eventBinding(); +export default EventBinding; \ No newline at end of file diff --git a/src/Obj/Base/BatchModel/index.js b/src/Obj/Base/BatchModel/index.js new file mode 100644 index 0000000..84045dd --- /dev/null +++ b/src/Obj/Base/BatchModel/index.js @@ -0,0 +1,653 @@ +/** + * @description 批量模型 + */ +import Dialog from '../../Element/Dialog'; +import { html } from "./_element"; +import EventBinding from '../../Element/Dialog/eventBinding'; +import Base from "../index"; +import { syncData } from '../../../Global/MultiViewportMode' +import Model from '../BaseSource/BaseModel/Model' +import { legp } from '../../Element/datalist' + +import DrawPolyline from '../../../Draw/drawPolyline' +import DrawPolygon from '../../../Draw/drawPolygon' +import DrawThreeRect from '../../../Draw/drawThreeRect' +import DrawPoint from '../../../Draw/drawPoint' +import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../../Global/global' + +import { setSplitDirection, syncSplitData, setActiveId } from '../../../Global/SplitScreen' + +class BatchModel extends Base { + /** + * @constructor + * @param sdk + * @description 批量模型 + * @param options {object} 批量模型属性 + * @param options.name=未命名对象 {string} 名称 + * @param options.type=polygon {string} 线类型(line,polygon) + * @param options.url=polygon {string} 线类型(line,polygon,point) + * @param options.spacing= {number} 间距 + * @param options.show=true {boolean} + * @param Dialog {object} 弹框对象 + * @param Dialog.confirmCallBack {function} 弹框确认时的回调 + * */ + constructor(sdk, options = {}, callback = null, _Dialog = {}) { + super(sdk, options); + this.viewer = this.sdk.viewer + this.options.name = options.name || '批量模型' + this.options.type = options.type || '面' + this.options.url = options.url || '' + this.options.spacing = options.spacing || 50 + this.options.positions = options.positions || [] + this.options.show = (options.show || options.show === false) ? options.show : true + this.callback = callback + this.Dialog = _Dialog + this._EventBinding = new EventBinding() + this._elms = {}; + this.pointArr = [] + this.sdk.addIncetance(this.options.id, this) + // BatchModel.computeDis(this) + if (this.options.positions.length > 0 || this.options.positions.lng) { + BatchModel.computeDis(this) + } else { + this.edit(true) + } + } + + // 计算距离 + static async computeDis(that) { + let fromDegreesArray = [] + let arr + let posiArr = [] + let array = [] + if (that.options.type == '面') { + that.options.positions.forEach(item => { + fromDegreesArray.push(item.lng, item.lat) + }) + // arr = that.generateInterpolatedPoints(Cesium.Cartesian3.fromDegreesArray(fromDegreesArray), that.options.spacing) + arr = await that.computedArea(Cesium.Cartesian3.fromDegreesArray(fromDegreesArray), that.options.spacing) + array[0] = arr + array[1] = that.calculateRoadAngle(Cesium.Cartesian3.fromDegreesArray(fromDegreesArray)[0], Cesium.Cartesian3.fromDegreesArray(fromDegreesArray)[3]) + arr.forEach((item, index) => { + const cartographic = Cesium.Cartographic.fromCartesian( + item // Cartesian3对象 {x, y, z} + ); + const longitude = Cesium.Math.toDegrees(cartographic.longitude); + const latitude = Cesium.Math.toDegrees(cartographic.latitude); + const height = cartographic.height; + posiArr.push({ + lng: longitude, + lat: latitude, + alt: height + }) + }) + } else if (that.options.type == '线') { + that.options.positions.forEach(item => { + fromDegreesArray.push(item.lng, item.lat) + }) + array = await that.linePoint(Cesium.Cartesian3.fromDegreesArray(fromDegreesArray), that.options.spacing) + arr = array[0] + that.pointArr = arr + arr.forEach((item, index) => { + const cartographic = Cesium.Cartographic.fromCartesian( + item // Cartesian3对象 {x, y, z} + ); + const longitude = Cesium.Math.toDegrees(cartographic.longitude); + const latitude = Cesium.Math.toDegrees(cartographic.latitude); + const height = cartographic.height; + posiArr.push({ + lng: longitude, + lat: latitude, + alt: height + }) + }) + } else if (that.options.type == '点') { + let height = await that.getClampToHeight({ lng: that.options.positions.lng, lat: that.options.positions.lat }) + posiArr = [{ lng: that.options.positions.lng, lat: that.options.positions.lat, alt: height }] + // posiArr = [that.options.positions] + that.pointArr = posiArr + } + posiArr.forEach((item, index) => { + let model = new Model(that.sdk, { + id: 'model' + index, + show: that.options.show, + url: that.options.url, + position: item, + rotate: that.options.type == '点' ? undefined : { x: 0, y: 0, z: array[1] && (array[1][index] || array[1]) } + }) + that.pointArr.push(model) + }) + } + async linePoint(polygonPositions, spacing) { + let boundaryPoints = []; + let boundaryAngle = []; + for (let i = 0; i < polygonPositions.length - 1; i++) { + + const start = polygonPositions[i]; + const end = polygonPositions[(i + 1) % polygonPositions.length]; + const segmentLength = Cesium.Cartesian3.distance(start, end); + const segments = Math.ceil(segmentLength / spacing); + + for (let j = 0; j <= segments; j++) { + const ratio = j / segments; + let point = Cesium.Cartesian3.lerp( + start, end, ratio, new Cesium.Cartesian3() + ); + + const cartographic = Cesium.Cartographic.fromCartesian( + point // Cartesian3对象 {x, y, z} + ); + const longitude = Cesium.Math.toDegrees(cartographic.longitude); + const latitude = Cesium.Math.toDegrees(cartographic.latitude); + + + let height = await this.getClampToHeight({ lng: longitude, lat: latitude }) + point = Cesium.Cartesian3.fromDegrees(longitude, latitude, height); + + boundaryPoints.push(point); + if (j != segments || i == polygonPositions.length - 2) { + boundaryAngle.push(this.calculateRoadAngle(start, end)) + } + } + } + return [[...new Set(boundaryPoints + .map(p => `${p.x},${p.y},${p.z}`))] + .map(str => { + const [x, y, z] = str.split(',').map(Number); + return new Cesium.Cartesian3(x, y, z); + }), boundaryAngle]; + } + calculateRoadAngle(startPoint, endPoint) { + const normal = Cesium.Ellipsoid.WGS84.geodeticSurfaceNormal(startPoint); + const enuMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(startPoint, undefined, normal); + const inverseMatrix = Cesium.Matrix4.inverse(enuMatrix, new Cesium.Matrix4()); + + const localEnd = Cesium.Matrix4.multiplyByPoint(inverseMatrix, endPoint, new Cesium.Cartesian3()); + const horizontalVec = new Cesium.Cartesian2(localEnd.x, localEnd.y); + Cesium.Cartesian2.normalize(horizontalVec, horizontalVec); + + const north = new Cesium.Cartesian2(1, 0); + + let angle = Cesium.Cartesian2.angleBetween(north, horizontalVec); + angle = Cesium.Math.toDegrees(angle) + const cross = Cesium.Cartesian2.cross(north, horizontalVec, new Cesium.Cartesian2()); + // return cross < 0 ? angle : - angle; + return cross < 0 ? -angle : angle; + } + generateInterpolatedPoints(polygonPositions, spacing) { + // 1. 边界点插值 + const boundaryPoints = []; + + for (let i = 0; i < polygonPositions.length; i++) { + + const start = polygonPositions[i]; + const end = polygonPositions[(i + 1) % polygonPositions.length]; + const segmentLength = Cesium.Cartesian3.distance(start, end); + const segments = Math.ceil(segmentLength / spacing); + + for (let j = 0; j <= segments; j++) { + const ratio = j / segments; + const point = Cesium.Cartesian3.lerp( + start, end, ratio, new Cesium.Cartesian3() + ); + boundaryPoints.push(point); + } + } + + // 2. 内部网格生成 + const extent = this.computePolygonExtent(polygonPositions); + let result = this.createGridFromBBox(extent, this.options.spacing) + // const extent = Cesium.Rectangle.fromCartesianArray(polygonPositions); + + const gridPoints = []; + // const polygon = new Cesium.PolygonHierarchy(polygonPositions); + var polygon = [] + this.options.positions.forEach(item => { + polygon.push([item.lng, item.lat]) + }) + polygon.push(polygon[0]) + for (let x = extent.west; x <= extent.east; x += result.lonStep) { + for (let y = extent.south; y <= extent.north; y += result.latStep) { + const position = Cesium.Cartesian3.fromDegrees(x, y); + const point = turf.point([x, y]); + const polygonTurf = turf.polygon([polygon]); + const isInside = turf.booleanPointInPolygon(point, polygonTurf); + isInside && gridPoints.push(position) + } + } + + // 3. 合并结果并去重 + // return [...new Set([...boundaryPoints, ...gridPoints] + return [...new Set([...gridPoints] + .map(p => `${p.x},${p.y},${p.z}`))] + .map(str => { + const [x, y, z] = str.split(',').map(Number); + return new Cesium.Cartesian3(x, y, z); + }); + } + + createGridFromBBox(bbox, spacing) { + const earthRadius = 6378137; // WGS84椭球体长半轴 + // 计算经度方向网格数 + const lonDistance = Cesium.Cartesian3.distance( + Cesium.Cartesian3.fromDegrees(bbox.west, (bbox.south + bbox.north) / 2, 0), + Cesium.Cartesian3.fromDegrees(bbox.east, (bbox.south + bbox.north) / 2, 0) + ); + const lonCount = Math.ceil(lonDistance / spacing); + + // 计算纬度方向网格数 + const latDistance = Cesium.Cartesian3.distance( + Cesium.Cartesian3.fromDegrees((bbox.west + bbox.east) / 2, bbox.south, 0), + Cesium.Cartesian3.fromDegrees((bbox.west + bbox.east) / 2, bbox.north, 0) + ); + const latCount = Math.ceil(latDistance / spacing); + // 生成网格线 + const lonStep = (bbox.east - bbox.west) / lonCount; + const latStep = (bbox.north - bbox.south) / latCount; + return { lonStep, latStep } + } + + computePolygonExtent(positions) { + // 计算多边形经纬度范围 + const cartographics = positions.map(p => + Cesium.Cartographic.fromCartesian(p)); + const lons = cartographics.map(c => Cesium.Math.toDegrees(c.longitude)); + const lats = cartographics.map(c => Cesium.Math.toDegrees(c.latitude)); + return { + west: Math.min(...lons), + east: Math.max(...lons), + south: Math.min(...lats), + north: Math.max(...lats) + }; + } + async computedArea(polygonPositions, spacing) { + let dis12 = Cesium.Cartesian3.distance(polygonPositions[0], polygonPositions[1]); + let dis23 = Cesium.Cartesian3.distance(polygonPositions[1], polygonPositions[2]); + let vec12 = Cesium.Cartesian3.subtract(polygonPositions[1], polygonPositions[0], new Cesium.Cartesian3()); + let vec23 = Cesium.Cartesian3.subtract(polygonPositions[2], polygonPositions[1], new Cesium.Cartesian3()); + + let num12 = Math.ceil(dis12 / spacing); + let num23 = Math.ceil(dis23 / spacing); + + let line1 = [] + for (let i = 0; i < num12; i++) { + line1.push(await this.calculatePointB(polygonPositions[0], polygonPositions[1], i * spacing)) + } + let line2 = [] + for (let i = 0; i < num12; i++) { + line2.push(await this.calculatePointB(polygonPositions[3], polygonPositions[2], i * spacing)) + } + + let allPoints = [] + for (let i = 0; i < line1.length; i++) { + for (let j = 0; j < num23; j++) { + allPoints.push(await this.calculatePointB(line1[i], line2[i], j * spacing)) + } + } + return allPoints + } + async calculatePointB(pointA, pointC, distance) { + // 将输入坐标转换为Cartesian3类型 + // const pointA = Cesium.Cartesian3.fromDegrees(a.longitude, a.latitude, a.height); + // const pointC = Cesium.Cartesian3.fromDegrees(c.longitude, c.latitude, c.height); + + // 计算向量AC + const vectorAC = Cesium.Cartesian3.subtract(pointC, pointA, new Cesium.Cartesian3()); + + // 计算向量AC的长度 + const lengthAC = Cesium.Cartesian3.magnitude(vectorAC); + + // 归一化向量AC + const unitVector = Cesium.Cartesian3.normalize(vectorAC, new Cesium.Cartesian3()); + + // 计算点B坐标 + const scaledVector = Cesium.Cartesian3.multiplyByScalar(unitVector, distance, new Cesium.Cartesian3()); + const pointB = Cesium.Cartesian3.add(pointA, scaledVector, new Cesium.Cartesian3()); + + + const cartographic = Cesium.Cartographic.fromCartesian( + pointB // Cartesian3对象 {x, y, z} + ); + const longitude = Cesium.Math.toDegrees(cartographic.longitude); + const latitude = Cesium.Math.toDegrees(cartographic.latitude); + + + let height = await this.getClampToHeight({ lng: longitude, lat: latitude }) + let point = Cesium.Cartesian3.fromDegrees(longitude, latitude, height); + // 转换回经纬度 + // const cartographic = Cesium.Cartographic.fromCartesian(pointB); + // return { + // longitude: Cesium.Math.toDegrees(cartographic.longitude), + // latitude: Cesium.Math.toDegrees(cartographic.latitude), + // height: cartographic.height + // }; + // return pointB + return point + } + get show() { + return this.options.show + } + + set show(v) { + this.options.show = v + for (let i = 0; i < this.pointArr.length; i++) { + this.pointArr[i].show = v + } + } + get type() { + return this.options.type + } + + set type(v) { + this.options.type = v + this._elms.type && + this._elms.type.forEach(item => { + item.value = v + }) + } + get spacing() { + return this.options.spacing + } + + set spacing(v) { + this.options.spacing = v + this._elms.spacing && + this._elms.spacing.forEach(item => { + item.value = v + }) + } + /** + * @description 编辑框 + * @param state=false {boolean} 状态: true打开, false关闭 + */ + async edit(state = false) { + let _this = this + this.originalOptions = this.deepCopyObj(this.options) + + // 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._DialogObject = await new Dialog(this.sdk, this.originalOptions, { + title: '默认模型参数设置', left: '180px', top: '100px', + confirmCallBack: (options) => { + this.name = this.name.trim() + if (!this.name) { + // this.name = '未命名对象' + this.name = '飞线' + } + + let Draw + switch (this.options.type) { + case '点': + Draw = new DrawPoint(this.sdk) + break; + case '线': + Draw = new DrawPolyline(this.sdk) + break; + case '面': + Draw = new DrawThreeRect(this.sdk) + break; + default: + break; + } + Draw && Draw.start((a, positions) => { + this.options.positions = positions + this.callback(this.options); + (this.options.positions.length || this.options.positions.lng) && BatchModel.computeDis(this) + }) + + this.originalOptions = this.deepCopyObj(this.options) + this._DialogObject.close() + this.Dialog.confirmCallBack && this.Dialog.confirmCallBack(this.originalOptions) + syncData(this.sdk, this.options.id) + syncSplitData(this.sdk, this.options.id) + }, + // resetCallBack: () => { + // this.reset() + // console.log('22222') + // this.Dialog.resetCallBack && this.Dialog.resetCallBack() + // }, + // removeCallBack: () => { + // console.log('33333') + // this.Dialog.removeCallBack && this.Dialog.removeCallBack() + // }, + closeCallBack: () => { + this.reset() + // this.entity.style = new Cesium.Cesium3DTileStyle({ + // color: "color('rgba(255,255,255," + this.newData.transparency + ")')", + // show: true, + // }); + this.Dialog.closeCallBack && this.Dialog.closeCallBack() + }, + addFootElm: [ + { + tagName: 'button', + className: 'flipe-over-y', + innerHTML: '重置', + event: [ + 'click', + () => { + this.reset() + } + ] + } + ] + // showCallBack: (show) => { + // this.show = show + // this.Dialog.showCallBack && this.Dialog.showCallBack() + // } + }, true) + this._DialogObject._element.body.className = this._DialogObject._element.body.className + ' flow-line-surface' + let contentElm = document.createElement('div'); + contentElm.innerHTML = html() + this._DialogObject.contentAppChild(contentElm) + // 颜色组件 + // let waterColorPicker = new YJColorPicker({ + // el: contentElm.getElementsByClassName("flowLine-color")[0], + // size: 'mini',//颜色box类型 + // alpha: true,//是否开启透明度 + // defaultColor: this.color, + // disabled: false,//是否禁止打开颜色选择器 + // openPickerAni: 'opacity',//打开颜色选择器动画 + // sure: (color) => { + // this.color = color + // },//点击确认按钮事件回调 + // clear: () => { + // this.color = 'rgba(255,255,255,1)' + // },//点击清空按钮事件回调 + // }) + + let all_elm = contentElm.getElementsByTagName("*") + this._EventBinding.on(this, all_elm) + this._elms = this._EventBinding.element + + let nameData = [ + { + name: '点', + value: '点', + }, + { + name: '线', + value: '线', + }, + { + name: '面', + value: '面', + } + ] + + let nameDataLegpObject = legp( + this._DialogObject._element.content.getElementsByClassName( + 'add-type-box' + )[0], + '.add-type' + ) + if (nameDataLegpObject) { + nameDataLegpObject.legp_search(nameData) + let nameDataLegpElm = this._DialogObject._element.content + .getElementsByClassName('add-type')[0] + .getElementsByTagName('input')[0] + this._elms.type = [nameDataLegpElm] + nameDataLegpElm.value = this.options.type + for (let i = 0; i < nameData.length; i++) { + if (nameData[i].value === nameDataLegpElm.value) { + nameDataLegpObject.legp_searchActive(nameData[i].value) + break + } + } + nameDataLegpElm.addEventListener('input', () => { + for (let i = 0; i < nameData.length; i++) { + if (nameData[i].value === nameDataLegpElm.value) { + this.type = nameData[i].value + break + } + } + }) + } + // this._elms.color = [waterColorPicker] + } 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 + // } + } + } + drawArea() { + + } + + reset() { + this.name = this.originalOptions.name + this.type = this.originalOptions.type + this.spacing = this.originalOptions.spacing + this.show = this.originalOptions.show + this.options.spacing = this.originalOptions.spacing + } + + /** + * 飞到对应实体 + */ + 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 = [] + if (this.options.positions.length > 0) { + for (let i = 0; i < this.options.positions.length; i++) { + let a = Cesium.Cartesian3.fromDegrees( + this.options.positions[i].lng, + this.options.positions[i].lat, + this.options.positions[i].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) + } + }) + } else if (this.options.positions.lng) { + let orientation = { + heading: Cesium.Math.toRadians(0.0), + pitch: Cesium.Math.toRadians(-60.0), + roll: Cesium.Math.toRadians(0.0) + } + this.sdk.viewer.camera.flyTo({ + destination: Cesium.Cartesian3.fromDegrees(this.options.positions.lng, this.options.positions.lat, this.options.positions.alt + 100), + // orientation: orientation + }) + + } + + } + } + /** + * 删除 + */ + async remove() { + for (let i = 0; i < this.pointArr.length; i++) { + this.pointArr[i].remove() + } + + this.pointArr = [] + this.positions = [] + this.entity = null + + if (this._DialogObject && !this._DialogObject.isDestroy) { + this._DialogObject.close() + this._DialogObject = null + } + await this.sdk.removeIncetance(this.options.id) + await syncData(this.sdk, this.options.id) + } + + flicker() { } +} + +export default BatchModel diff --git a/src/Obj/Base/CurvelineObject/_element.js b/src/Obj/Base/CurvelineObject/_element.js index cc8b89a..24d6837 100644 --- a/src/Obj/Base/CurvelineObject/_element.js +++ b/src/Obj/Base/CurvelineObject/_element.js @@ -65,7 +65,7 @@ function html(that) { 线条颜色
-
+
线条宽度
@@ -73,7 +73,7 @@ function html(that) {
-
+
线条形式
@@ -83,7 +83,7 @@ function html(that) { 线段缓冲
-
+
缓冲宽度
@@ -91,21 +91,43 @@ function html(that) {
-
+
缓冲颜色
+
+
+ 动画顺向 + +
+
+ 流动速率 +
+ + +
+
+
+ 间距 +
+ + 倍 + +
+
+
首尾相连
-
+
-
+
+ ${labelStyleElm1()} diff --git a/src/Obj/Base/CurvelineObject/index.js b/src/Obj/Base/CurvelineObject/index.js index 4ad6a95..4d8cc3e 100644 --- a/src/Obj/Base/CurvelineObject/index.js +++ b/src/Obj/Base/CurvelineObject/index.js @@ -11,7 +11,7 @@ import LabelObject from '../LabelObject' import MouseEvent from '../../../Event/index' import MouseTip from '../../../MouseTip' import Controller from '../../../Controller/index' -import { syncData } from '../../../Global/MultiViewportMode' +import { syncData, get3DView } from '../../../Global/MultiViewportMode' import { legp } from '../../Element/datalist' import { getFontList, getFontFamilyName } from '../../Element/fontSelect' import { setSplitDirection, syncSplitData, setActiveId } from '../../../Global/SplitScreen' @@ -56,6 +56,10 @@ class CurvelineObject extends Base { this.options.type = options.type ? Number(options.type) : 0 this.options['nose-to-tail'] = options['nose-to-tail'] || false this.options.extend = options.extend || false + this.options.rotate = options.rotate || true + this.options.space = options.space || 1 + this.options.speed = options.speed || 10 + this.options.dashSize = options.dashSize || 0.03 this.options['length-unit'] = options['length-unit'] || '米' this.options['fit-length-unit'] = options['fit-length-unit'] || '米' this.options['words-name'] = options['words-name'] || '空间长度' @@ -146,7 +150,8 @@ class CurvelineObject extends Base { } set color(v) { this.options.color = v || '#ff0000' - this.entity.polyline.material = this.getMaterial(v, this.options.type) + // this.entity.polyline.material = this.getMaterial(v, this.options.type) + this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) if (this._elms.color) { this._elms.color.forEach((item, i) => { let colorPicker = new YJColorPicker({ @@ -167,6 +172,48 @@ class CurvelineObject extends Base { }) } } + get speed() { + return this.options.speed + } + + set speed(v) { + // this.options.speed = v + this.options.speed = v !== 0 ? Math.pow(v, -1) * 100 : 0 + this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) + } + get dashSize() { + return this.options.dashSize + } + + set dashSize(v) { + this.options.dashSize = v + this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) + } + + get rotate() { + return this.options.rotate + } + + set rotate(v) { + this.options.rotate = v + CurvelineObject.closeNodeEdit(this) + this._elms.rotate && + this._elms.rotate.forEach(item => { + item.checked = v + }) + + this.options.rotate = v + this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) + } + + get space() { + return this.options.space + } + + set space(v) { + this.options.space = v + this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) + } get length() { return this.options.length @@ -299,19 +346,82 @@ class CurvelineObject extends Base { set lineType(v) { let lineTypeData = [ { - name: '实线', + name: '实线', value: '实线', - key: 0 + key: 0, + icon: 'line' }, { - name: '虚线', + name: '虚线', value: '虚线', - key: 1 + key: 1, + icon: 'dash-line' }, { - name: '泛光', + name: '泛光', value: '泛光', - key: 2 + key: 2, + icon: 'light-line' + }, + { + name: '尾迹光线', + value: '尾迹光线', + key: 3, + icon: 'tail-line' + }, + { + name: '多尾迹光线', + value: '多尾迹光线', + key: 4, + icon: 'mult-tail-line' + }, + { + name: '流动虚线1', + value: '流动虚线1', + key: 5, + icon: 'flow-dash-line1' + }, + { + name: '流动虚线2', + value: '流动虚线2', + key: 6, + icon: 'flow-dash-line2' + }, + { + name: '流动箭头1', + value: '流动箭头1', + key: 7, + icon: 'pic-line1' + }, + { + name: '流动箭头2', + value: '流动箭头2', + key: 8, + icon: 'pic-line2' + }, + { + name: '流动箭头3', + value: '流动箭头3', + key: 9, + icon: 'pic-line3' + }, + { + name: '流动箭头4', + value: '流动箭头4', + key: 10, + icon: 'pic-line4' + }, + { + name: '流动箭头5', + value: '流动箭头5', + key: 11, + icon: 'pic-line5' + }, + { + name: '流动箭头6', + value: '流动箭头6', + key: 12, + icon: 'pic-line6' } ] this.options.type = Number(v) @@ -320,6 +430,18 @@ class CurvelineObject extends Base { this._elms.lineType && this._elms.lineType.forEach(item => { item.value = lineTypeData[i].value + if (2 < item.value && item.value < 13) {//贴图参数 + document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'flex') + } else { + document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'none') + } + if (2 < item.value && item.value < 5) {//尾迹参数 + document.getElementsByClassName('lineSpace')[0] && (document.getElementsByClassName('lineSpace')[0].style.display = 'none') + document.getElementsByClassName('lineSpace')[1] && (document.getElementsByClassName('lineSpace')[1].style.display = 'none') + } else { + document.getElementsByClassName('lineSpace')[0] && (document.getElementsByClassName('lineSpace')[0].style.display = 'flex') + document.getElementsByClassName('lineSpace')[1] && (document.getElementsByClassName('lineSpace')[1].style.display = 'flex') + } }) break } @@ -328,7 +450,9 @@ class CurvelineObject extends Base { this.entity.polyline && (this.entity.polyline.material = this.getMaterial( this.options.color, - this.options.type + this.options.type, + this.entity, + this.options )) } get noseToTail() { @@ -1212,6 +1336,16 @@ class CurvelineObject extends Base { zIndex: that.sdk._entityZIndex } }) + + that.entity.polyline.oriWidth = that.options.width + that.judgeLine(that.entity, that.options) + that.entity.polyline.material = that.getMaterial( + that.options.color, + that.options.type, + that.entity, + that.options + ) + that.sdk._entityZIndex++ CurvelineObject.createLabel(that) // that.entity.polyline.positionsLngLat = positions @@ -1252,7 +1386,130 @@ class CurvelineObject extends Base { let scene = that.sdk.viewer.scene } + judgeLine(entity, newParam) { + if (!entity.polyline.oriRepeat) { + let param = { + color: newParam.color, + image: this.getSourceRootPath() + `/img/arrow/1.png`, + space: newParam.space, + speed: newParam.speed + } + param.speed = newParam.rotate ? param.speed : 0 - param.speed + + const canvasEle = document.createElement('canvas'); + const ctx = canvasEle.getContext('2d') + const myImg = new Image() + // myImg.src = that.getSourceRootPath() + '/img/arrow/1.png' + myImg.src = param.image + let that = this + myImg.onload = function () { + canvasEle.width = myImg.width * (param.space + 1) + canvasEle.height = myImg.height + + let oriRepeat = that.getSceenLine(entity, param, canvasEle) + oriRepeat && (entity.polyline.oriRepeat = oriRepeat) + + + var positionProperty = entity.polyline.positions; + var positions = positionProperty.getValue(that.sdk.viewer.clock.currentTime); + + if (!Cesium.defined(positions)) { + return new Cesium.Cartesian2(1.0, 1.0); + // return 1.0; + } + + var distance = 0; + for (var i = 0; i < positions.length - 1; ++i) { + distance += Cesium.Cartesian3.distance(positions[i], positions[i + 1]); + } + + var repeatX = distance / entity.polyline.width.getValue(); + // 根据地图缩放程度调整repeatX + var cameraHeight = that.sdk.viewer.camera.positionCartographic.height; + var boundingSphere = new Cesium.BoundingSphere( + new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标 + 500000 // 半径（距离） + ); + + // 获取绘图缓冲区的宽度和高度（通常是屏幕的分辨率） + var drawingBufferWidth = that.sdk.viewer.canvas.clientWidth; + var drawingBufferHeight = that.sdk.viewer.canvas.clientHeight; + + // 使用 getPixelSize 方法获取包围球在屏幕上的像素大小 + var groundResolution = that.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight) + repeatX *= groundResolution / cameraHeight / (param.space * (canvasEle.width / canvasEle.height * 5) + 1); + // if (entity.polyline.material.oriRepeat) { + + if (that.sdk.viewer.scene.mode === Cesium.SceneMode.SCENE3D) { + let speed = repeatX / entity.polyline.oriRepeat + entity.polyline.oriSpeed = speed + entity.polyline.oriRepeatX = repeatX + } else { + let sdk3d = get3DView() + let sdk3dEntity = sdk3d.viewer.entities.getById(that.options.id) + entity.polyline.oriSpeed = sdk3dEntity.polyline.oriSpeed + entity.polyline.oriRepeatX = sdk3dEntity.polyline.oriRepeatX + } + } + + } + } + /**获取当前满屏横线速度 */ + getSceenLine(entity, options, canvasEle) { + let point1 = new Cesium.Cartesian2(0, this.sdk.viewer.canvas.clientHeight) + let point2 = new Cesium.Cartesian2(this.sdk.viewer.canvas.clientWidth / 2, this.sdk.viewer.canvas.clientHeight) + // var cartesian1 = this.sdk.viewer.scene.pickPosition(point1) + // var cartesian2 = this.sdk.viewer.scene.pickPosition(point2) + + let ray = this.sdk.viewer.camera.getPickRay(point1); + let cartesian1 = this.sdk.viewer.scene.globe.pick(ray, this.sdk.viewer.scene); + + let ray2 = this.sdk.viewer.camera.getPickRay(point2); + let cartesian2 = this.sdk.viewer.scene.globe.pick(ray2, this.sdk.viewer.scene); + // if (!cartesian1 || !cartesian2) { + // let ray = this.sdk.viewer.camera.getPickRay(point1); + // cartesian1 = this.sdk.viewer.scene.globe.pick(ray, this.sdk.viewer.scene); + + // let ray2 = this.sdk.viewer.camera.getPickRay(point2); + // cartesian2 = this.sdk.viewer.scene.globe.pick(ray2, this.sdk.viewer.scene); + // } + if (cartesian1 && cartesian2) { + + + var distance = Cesium.Cartesian3.distance(cartesian1, cartesian2); + + var repeatX = distance / entity.polyline.width.getValue(); + // 根据地图缩放程度调整repeatX + var cameraHeight = this.sdk.viewer.camera.positionCartographic.height; + var boundingSphere = new Cesium.BoundingSphere( + new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标 + 500000 // 半径（距离） + ); + + + // 获取绘图缓冲区的宽度和高度（通常是屏幕的分辨率） + var drawingBufferWidth = this.sdk.viewer.canvas.clientWidth; + var drawingBufferHeight = this.sdk.viewer.canvas.clientHeight; + + // 使用 getPixelSize 方法获取包围球在屏幕上的像素大小 + var groundResolution = this.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight) + // repeatX *= groundResolution / cameraHeight / ((myImg.width / myImg.height * 5) + 1); + if (groundResolution > 700) { + repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1); + } else { + repeatX = undefined; + } + + if (this.sdk.viewer.scene.mode === Cesium.SceneMode.SCENE3D) { + return repeatX + } else { + let sdk3d = get3DView() + let sdk3dEntity = sdk3d.viewer.entities.getById(this.options.id) + return sdk3dEntity.polyline.oriRepeatX + } + } + } /** * 编辑框 * @param {boolean} state true打开，false关闭 @@ -1327,6 +1584,15 @@ class CurvelineObject extends Base { this.attributeType = this.options.attributeType // this.attributeCamera = this.options.attribute.camera.content // this.attributeGoods = this.options.attribute.goods.content + function tabClick(e) { + if (e === '2' || e === 2) {//点击线条样式 + if (2 < _this.options.type && _this.options.type < 13) {//贴图参数 + document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'flex') + } else { + document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'none') + } + } + } // 创建标签页 let tabsElm = new cy_tabs( @@ -1590,19 +1856,82 @@ class CurvelineObject extends Base { let lineTypeData = [ { - name: '实线', + name: '实线', value: '实线', - key: 0 + key: 0, + icon: 'line' }, { - name: '虚线', + name: '虚线', value: '虚线', - key: 1 + key: 1, + icon: 'dash-line' }, { - name: '泛光', + name: '泛光', value: '泛光', - key: 2 + key: 2, + icon: 'light-line' + }, + { + name: '尾迹光线', + value: '尾迹光线', + key: 3, + icon: 'tail-line' + }, + { + name: '多尾迹光线', + value: '多尾迹光线', + key: 4, + icon: 'mult-tail-line' + }, + { + name: '流动虚线1', + value: '流动虚线1', + key: 5, + icon: 'flow-dash-line1' + }, + { + name: '流动虚线2', + value: '流动虚线2', + key: 6, + icon: 'flow-dash-line2' + }, + { + name: '流动箭头1', + value: '流动箭头1', + key: 7, + icon: 'pic-line1' + }, + { + name: '流动箭头2', + value: '流动箭头2', + key: 8, + icon: 'pic-line2' + }, + { + name: '流动箭头3', + value: '流动箭头3', + key: 9, + icon: 'pic-line3' + }, + { + name: '流动箭头4', + value: '流动箭头4', + key: 10, + icon: 'pic-line4' + }, + { + name: '流动箭头5', + value: '流动箭头5', + key: 11, + icon: 'pic-line5' + }, + { + name: '流动箭头6', + value: '流动箭头6', + key: 12, + icon: 'pic-line6' } ] let lineTypeDataLegpObject = legp( @@ -1613,6 +1942,11 @@ class CurvelineObject extends Base { ) if (lineTypeDataLegpObject) { lineTypeDataLegpObject.legp_search(lineTypeData) + + let iActiveElm2 = document.createElement('i') + iActiveElm2.className = 'icon icon-active' + this._DialogObject._element.content.getElementsByClassName('input-select-line-type')[0].getElementsByClassName('cy_datalist')[0].appendChild(iActiveElm2) + let lineTypeDataLegpElm = this._DialogObject._element.content .getElementsByClassName('input-select-line-type')[0] .getElementsByTagName('input')[0] @@ -1621,6 +1955,7 @@ class CurvelineObject extends Base { if (lineTypeData[i].key === this.options.type) { lineTypeDataLegpObject.legp_searchActive(lineTypeData[i].value) lineTypeDataLegpElm.value = lineTypeData[i].value + iActiveElm2.className = `icon icon-active ${lineTypeData[i].icon}` break } } @@ -1628,6 +1963,21 @@ class CurvelineObject extends Base { for (let i = 0; i < lineTypeData.length; i++) { if (lineTypeData[i].value === lineTypeDataLegpElm.value) { this.lineType = lineTypeData[i].key + iActiveElm2.className = `icon icon-active ${lineTypeData[i].icon}` + + //控制参数显隐 + if (2 < this.lineType && this.lineType < 13) {//贴图参数 + document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'flex') + } else { + document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'none') + } + if (2 < this.lineType && this.lineType < 5) {//尾迹参数 + document.getElementsByClassName('lineSpace')[0] && (document.getElementsByClassName('lineSpace')[0].style.display = 'none') + document.getElementsByClassName('lineSpace')[1] && (document.getElementsByClassName('lineSpace')[1].style.display = 'none') + } else { + document.getElementsByClassName('lineSpace')[0] && (document.getElementsByClassName('lineSpace')[0].style.display = 'flex') + document.getElementsByClassName('lineSpace')[1] && (document.getElementsByClassName('lineSpace')[1].style.display = 'flex') + } break } } @@ -2111,6 +2461,10 @@ class CurvelineObject extends Base { this.attributeVr = this.options.attribute.vr.content this.attributeCamera = this.options.attribute.camera.content this.attributeGoods = this.options.attribute.goods.content + this.rotate = this.originalOptions.rotate + this.speed = this.originalOptions.speed + this.dashSize = this.originalOptions.dashSize + this.space = this.originalOptions.space this.cameraSelect && this.cameraSelect() this.goodsSelect && this.goodsSelect() diff --git a/src/Obj/Base/PolylineObject/index.js b/src/Obj/Base/PolylineObject/index.js index 879f8c6..e184417 100644 --- a/src/Obj/Base/PolylineObject/index.js +++ b/src/Obj/Base/PolylineObject/index.js @@ -1480,39 +1480,41 @@ class PolylineObject extends Base { // let ray2 = this.sdk.viewer.camera.getPickRay(point2); // cartesian2 = this.sdk.viewer.scene.globe.pick(ray2, this.sdk.viewer.scene); // } - - var distance = Cesium.Cartesian3.distance(cartesian1, cartesian2); - - var repeatX = distance / entity.polyline.width.getValue(); - // 根据地图缩放程度调整repeatX - var cameraHeight = this.sdk.viewer.camera.positionCartographic.height; - var boundingSphere = new Cesium.BoundingSphere( - new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标 - 500000 // 半径（距离） - ); + if (cartesian1 && cartesian2) { - // 获取绘图缓冲区的宽度和高度（通常是屏幕的分辨率） - var drawingBufferWidth = this.sdk.viewer.canvas.clientWidth; - var drawingBufferHeight = this.sdk.viewer.canvas.clientHeight; + var distance = Cesium.Cartesian3.distance(cartesian1, cartesian2); - // 使用 getPixelSize 方法获取包围球在屏幕上的像素大小 - var groundResolution = this.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight) - // repeatX *= groundResolution / cameraHeight / ((myImg.width / myImg.height * 5) + 1); - if (groundResolution > 700) { - repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1); - } else { - repeatX = undefined; + var repeatX = distance / entity.polyline.width.getValue(); + // 根据地图缩放程度调整repeatX + var cameraHeight = this.sdk.viewer.camera.positionCartographic.height; + var boundingSphere = new Cesium.BoundingSphere( + new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标 + 500000 // 半径（距离） + ); + + + // 获取绘图缓冲区的宽度和高度（通常是屏幕的分辨率） + var drawingBufferWidth = this.sdk.viewer.canvas.clientWidth; + var drawingBufferHeight = this.sdk.viewer.canvas.clientHeight; + + // 使用 getPixelSize 方法获取包围球在屏幕上的像素大小 + var groundResolution = this.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight) + // repeatX *= groundResolution / cameraHeight / ((myImg.width / myImg.height * 5) + 1); + if (groundResolution > 700) { + repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1); + } else { + repeatX = undefined; + } + + if (this.sdk.viewer.scene.mode === Cesium.SceneMode.SCENE3D) { + return repeatX + } else { + let sdk3d = get3DView() + let sdk3dEntity = sdk3d.viewer.entities.getById(this.options.id) + return sdk3dEntity.polyline.oriRepeatX + } } - - if (this.sdk.viewer.scene.mode === Cesium.SceneMode.SCENE3D) { - return repeatX - } else { - let sdk3d = get3DView() - let sdk3dEntity = sdk3d.viewer.entities.getById(this.options.id) - return sdk3dEntity.polyline.oriRepeatX - } - } /** * 编辑框 diff --git a/src/Obj/Base/TextBox/index.js b/src/Obj/Base/TextBox/index.js new file mode 100644 index 0000000..5e5697b --- /dev/null +++ b/src/Obj/Base/TextBox/index.js @@ -0,0 +1,212 @@ +/** + * 文本框 + */ +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.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 + } + + 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.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 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.position = { + 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 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); + } + } + + flicker() { } +} + +export default TextBox diff --git a/src/Tools/index.js b/src/Tools/index.js index 0674a47..7716ae3 100644 --- a/src/Tools/index.js +++ b/src/Tools/index.js @@ -880,38 +880,38 @@ class Tools { let ray2 = this.sdk.viewer.camera.getPickRay(point2); let cartesian2 = this.sdk.viewer.scene.globe.pick(ray2, this.sdk.viewer.scene); + if (cartesian1 && cartesian2) { + var distance = Cesium.Cartesian3.distance(cartesian1, cartesian2); - var distance = Cesium.Cartesian3.distance(cartesian1, cartesian2); + var repeatX = distance / entity.polyline.width.getValue(); + // 根据地图缩放程度调整repeatX + var cameraHeight = this.sdk.viewer.camera.positionCartographic.height; + var boundingSphere = new Cesium.BoundingSphere( + new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标 + 500000 // 半径（距离） + ); - var repeatX = distance / entity.polyline.width.getValue(); - // 根据地图缩放程度调整repeatX - var cameraHeight = this.sdk.viewer.camera.positionCartographic.height; - var boundingSphere = new Cesium.BoundingSphere( - new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标 - 500000 // 半径（距离） - ); + // 获取绘图缓冲区的宽度和高度（通常是屏幕的分辨率） + var drawingBufferWidth = this.sdk.viewer.canvas.clientWidth; + var drawingBufferHeight = this.sdk.viewer.canvas.clientHeight; - // 获取绘图缓冲区的宽度和高度（通常是屏幕的分辨率） - var drawingBufferWidth = this.sdk.viewer.canvas.clientWidth; - var drawingBufferHeight = this.sdk.viewer.canvas.clientHeight; + // 使用 getPixelSize 方法获取包围球在屏幕上的像素大小 + var groundResolution = this.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight) + // repeatX *= groundResolution / cameraHeight / ((myImg.width / myImg.height * 5) + 1); + if (groundResolution > 700) { + repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1); + } else { + repeatX = undefined; + } - // 使用 getPixelSize 方法获取包围球在屏幕上的像素大小 - var groundResolution = this.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight) - // repeatX *= groundResolution / cameraHeight / ((myImg.width / myImg.height * 5) + 1); - if (groundResolution > 700) { - repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1); - } else { - repeatX = undefined; + if (this.sdk.viewer.scene.mode === Cesium.SceneMode.SCENE3D) { + return repeatX + } else { + let sdk3d = get3DView() + let sdk3dEntity = sdk3d.viewer.entities.getById(this.options.id) + return sdk3dEntity.polyline.oriRepeatX + } } - - if (this.sdk.viewer.scene.mode === Cesium.SceneMode.SCENE3D) { - return repeatX - } else { - let sdk3d = get3DView() - let sdk3dEntity = sdk3d.viewer.entities.getById(this.options.id) - return sdk3dEntity.polyline.oriRepeatX - } - } /*创建直箭头图片*/ diff --git a/src/YJEarth/index.js b/src/YJEarth/index.js index 5a12707..0f5df67 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,95 @@ 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.entityMap.get(_this.clickTextDom.id).getwords(_this.clickTextDom.getElementsByTagName('textarea')[0].value) + + _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 f5d1ff7..5e12184 100644 --- a/static/custom/css/index.css +++ b/static/custom/css/index.css @@ -3119,6 +3119,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