From 2aade7eef96d8761a900feb28dc26d5c3e630267 Mon Sep 17 00:00:00 2001 From: zh <972939975@qq.com> Date: Thu, 21 Aug 2025 16:37:49 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BD=A8=E8=BF=B9=E8=BF=90=E5=8A=A8=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E6=B2=B9=E8=80=97=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Obj/Base/LabelObject/index.js | 34 ++--- src/Obj/Base/TrajectoryMotion/_element.js | 17 +++ src/Obj/Base/TrajectoryMotion/index.js | 132 ++++++++++++++++--- static/custom/css/index.css | 152 +++++++++++++++++++++- 4 files changed, 302 insertions(+), 33 deletions(-) diff --git a/src/Obj/Base/LabelObject/index.js b/src/Obj/Base/LabelObject/index.js index dfd9dc1..322dd8a 100644 --- a/src/Obj/Base/LabelObject/index.js +++ b/src/Obj/Base/LabelObject/index.js @@ -14,6 +14,8 @@ import { class LabelObject extends Base { #updateBillboardImageTimeout + #canvas = document.createElement('canvas') + #canvas2 = document.createElement('canvas') constructor(sdk, options = {}, model) { super(sdk, options) this.model = model @@ -438,11 +440,12 @@ class LabelObject extends Base { this.updateBillboardImage() } updateBillboardImage() { - clearTimeout(this.#updateBillboardImageTimeout) - this.#updateBillboardImageTimeout = setTimeout(() => { - clearTimeout(this.#updateBillboardImageTimeout) - this.entity.billboard.image = this.getcanvas() - }, 500) + this.entity.billboard.image = this.getcanvas() + // clearTimeout(this.#updateBillboardImageTimeout) + // this.#updateBillboardImageTimeout = setTimeout(() => { + // clearTimeout(this.#updateBillboardImageTimeout) + // this.entity.billboard.image = this.getcanvas() + // }, 500) } get lineColor() { return this.options.pixelOffset @@ -489,9 +492,8 @@ class LabelObject extends Base { // } getcanvas() { - const canvas = document.createElement('canvas') - const ctx = canvas.getContext('2d') - + const ctx = this.#canvas.getContext('2d') + ctx.clearRect(0, 0, this.#canvas.width, this.#canvas.height); ctx.font = this.options.fontSize + 'px ' + this.font let texts = this.options.text.split('\n') let canvasWidth = 0 @@ -509,9 +511,8 @@ class LabelObject extends Base { if (canvasWidth < this.options.lineWidth) { canvasWidth = this.options.lineWidth } - canvas.width = canvasWidth - - canvas.height = this.options.pixelOffset + canvasHeight + this.#canvas.width = canvasWidth + this.#canvas.height = this.options.pixelOffset + canvasHeight const linearGradient = ctx.createLinearGradient( 0, 0, @@ -558,15 +559,14 @@ class LabelObject extends Base { ctx.stroke() ctx.closePath() - const canvas2 = document.createElement('canvas') - const ctx2 = canvas2.getContext('2d') - canvas2.width = canvas.width + 10 - canvas2.height = canvas.height + 10 - ctx2.drawImage(canvas, 5, 5); + const ctx2 = this.#canvas2.getContext('2d') + this.#canvas2.width = this.#canvas.width + 10 + this.#canvas2.height = this.#canvas.height + 10 + ctx2.drawImage(this.#canvas, 5, 5); // const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); // ctx.putImageData(imageData, 40, 40); - return canvas2 + return this.#canvas2.toDataURL("image/png") } remove() { diff --git a/src/Obj/Base/TrajectoryMotion/_element.js b/src/Obj/Base/TrajectoryMotion/_element.js index 3303918..81497e3 100644 --- a/src/Obj/Base/TrajectoryMotion/_element.js +++ b/src/Obj/Base/TrajectoryMotion/_element.js @@ -182,6 +182,23 @@ function html() { +
+
+
+ 油耗 +
+ + L/100km + +
+
+
+ 总油耗 + +
+
+
+ ` } diff --git a/src/Obj/Base/TrajectoryMotion/index.js b/src/Obj/Base/TrajectoryMotion/index.js index 56a8c6e..7e5af05 100644 --- a/src/Obj/Base/TrajectoryMotion/index.js +++ b/src/Obj/Base/TrajectoryMotion/index.js @@ -78,6 +78,7 @@ class TrajectoryMotion extends Base { this.options.line.smooth = options.line.smooth ? options.line.smooth : false this.options.line.noseToTail = options.line.noseToTail ? options.line.noseToTail : false this.positions_smooth = [] + this.options.unitFuelConsumption = options.unitFuelConsumption || 0 this.options.ground = options.ground || false this.options.state = (options.state || options.state === false) ? options.state : true this.options.routeDirection = (options.routeDirection || options.routeDirection === false) ? options.routeDirection : true @@ -180,6 +181,7 @@ class TrajectoryMotion extends Base { this.realTimeLine && (this.realTimeLine.show = (!this.showView || this.showView == 3) ? true : false) } this.label && (this.label.show = (!this.showView || this.showView == 3) ? this.options.label.show : false) + this.fuelLabel && (this.fuelLabel.show = (!this.showView || this.showView == 3) ? this.options.fuelShow : false) } else { this.model.show = (!this.showView || this.showView == 3) ? this.options.show : false @@ -202,6 +204,7 @@ class TrajectoryMotion extends Base { this.keyPoints[i].show = (!this.showView || this.showView == 3) ? show : false } this.label && (this.label.show = false) + this.fuelLabel && (this.fuelLabel.show = false) this.viewFollow = false } @@ -256,14 +259,17 @@ class TrajectoryMotion extends Base { // Cesium.Matrix4.multiplyByTranslation(this.model.modelMatrix, new Cesium.Cartesian3(0, 0, -difference), this.model.modelMatrix) // Cesium.Matrix4.getTranslation(this.model.modelMatrix, this.model.position) this.label && (this.label.show = this.label.show) + this.fuelLabel && (this.fuelLabel.show = this.fuelLabel.show) if (this.options.label.position) { setTimeout(() => { if (this.options.label.position.alt) { this.label && (this.label.position = [this.options.label.position.lng, this.options.label.position.lat, this.options.label.position.alt]) + this.fuelLabel && (this.fuelLabel.position = [this.options.label.position.lng, this.options.label.position.lat, this.options.label.position.alt]) } else { this.getClampToHeight({ lng: this.options.label.position.lng, lat: this.options.label.position.lat }).then((height) => { this.label && (this.label.position = [this.options.label.position.lng, this.options.label.position.lat, height]) + this.fuelLabel && (this.fuelLabel.position = [this.options.label.position.lng, this.options.label.position.lat, height]) }) } }, 0) @@ -1163,18 +1169,21 @@ class TrajectoryMotion extends Base { show = false } if (this.show) { - this.label && (this.label.show = show) - if (this.options.label.position) { - setTimeout(() => { - if (this.options.label.position.alt) { - this.label && (this.label.position = [this.options.label.position.lng, this.options.label.position.lat, this.options.label.position.alt]) - } - else { - this.getClampToHeight({ lng: this.options.label.position.lng, lat: this.options.label.position.lat }).then((height) => { - this.label && (this.label.position = [this.options.label.position.lng, this.options.label.position.lat, height]) - }) - } - }, 0); + if (this.label) { + this.label.show = show + this.label.pixelOffset = this.options.label.pixelOffset + (this.fuelShow ? this.labelFontSize + 20 : 0) + if (this.options.label.position) { + setTimeout(() => { + if (this.options.label.position.alt) { + this.label && (this.label.position = [this.options.label.position.lng, this.options.label.position.lat, this.options.label.position.alt]) + } + else { + this.getClampToHeight({ lng: this.options.label.position.lng, lat: this.options.label.position.lat }).then((height) => { + this.label && (this.label.position = [this.options.label.position.lng, this.options.label.position.lat, height]) + }) + } + }, 0); + } } } else { @@ -1192,6 +1201,7 @@ class TrajectoryMotion extends Base { set labelFontFamily(v) { this.options.label.fontFamily = v || 0 this.label && (this.label.fontFamily = this.options.label.fontFamily) + this.fuelLabel && (this.fuelLabel.fontFamily = this.options.label.fontFamily) let name = getFontFamilyName(this.labelFontFamily) || '' this._elms.labelFontFamily && @@ -1206,6 +1216,7 @@ class TrajectoryMotion extends Base { set labelColor(v) { this.options.label.color = v this.label && (this.label.color = v) + this.fuelLabel && (this.fuelLabel.color = v) if (this._elms.labelColor) { this._elms.labelColor.forEach((item, i) => { let labelColorPicker = new YJColorPicker({ @@ -1233,6 +1244,13 @@ class TrajectoryMotion extends Base { set labelFontSize(v) { this.options.label.fontSize = v this.label && (this.label.fontSize = v) + if (this.fuelLabel) { + this.fuelLabel.fontSize = v + this.label.pixelOffset = this.options.label.pixelOffset + v + 20 + } + else { + this.label.pixelOffset = this.options.label.pixelOffset + } this._elms.labelFontSize && this._elms.labelFontSize.forEach((item) => { item.value = v }) @@ -1244,6 +1262,7 @@ class TrajectoryMotion extends Base { set labelScaleByDistance(v) { this.options.label.scaleByDistance = v this.label && (this.label.scaleByDistance = v) + this.fuelLabel && (this.fuelLabel.scaleByDistance = v) this._elms.labelScaleByDistance && this._elms.labelScaleByDistance.forEach((item) => { item.checked = v }) @@ -1259,6 +1278,7 @@ class TrajectoryMotion extends Base { } this.options.label.near = near this.label && (this.label.near = near) + this.fuelLabel && (this.fuelLabel.near = near) this._elms.labelNear && this._elms.labelNear.forEach((item) => { item.value = near }) @@ -1274,11 +1294,66 @@ class TrajectoryMotion extends Base { } this.options.label.far = far this.label && (this.label.far = far) + this.fuelLabel && (this.fuelLabel.far = far) this._elms.labelFar && this._elms.labelFar.forEach((item) => { item.value = far }) } + get unitFuelConsumption() { + return this.options.unitFuelConsumption + } + + set unitFuelConsumption(v) { + this.options.unitFuelConsumption = v + this._elms.unitFuelConsumption && this._elms.unitFuelConsumption.forEach((item) => { + item.value = v + }) + } + + get fuelShow() { + return this.options.fuelShow + } + + set fuelShow(v) { + this.options.fuelShow = v + let show = v + if (this.show && (!this.showView || this.showView == 3)) { + show = v + } + else { + show = false + } + if (this.show) { + if (this.fuelLabel) { + this.fuelLabel.show = show + this.label.pixelOffset = this.options.label.pixelOffset + (show ? this.labelFontSize + 20 : 0) + } + else { + this.label.pixelOffset = this.options.label.pixelOffset + } + if (this.options.label.position) { + setTimeout(() => { + if (this.options.label.position.alt) { + this.fuelLabel && (this.fuelLabel.position = [this.options.label.position.lng, this.options.label.position.lat, this.options.label.position.alt]) + } + else { + this.getClampToHeight({ lng: this.options.label.position.lng, lat: this.options.label.position.lat }).then((height) => { + this.fuelLabel && (this.fuelLabel.position = [this.options.label.position.lng, this.options.label.position.lat, height]) + }) + } + }, 0); + } + } + else { + this.fuelLabel && (this.fuelLabel.show = false) + this.label.pixelOffset = this.options.label.pixelOffset + } + this._elms.fuelShow && this._elms.fuelShow.forEach((item) => { + item.checked = v + }) + } + // 创建路径 static addLine(that) { let positions_smooth = that.renewLinePositions(that.options.line.positions) @@ -1397,6 +1472,7 @@ class TrajectoryMotion extends Base { } let pos = that.smooth ? that.positions_smooth : Cesium.Cartesian3.fromDegreesArrayHeights(fromDegreesArrayHeights) TrajectoryMotion.createLabel(that) + TrajectoryMotion.createFuelLabel(that) that.modelMove(pos) @@ -1406,13 +1482,13 @@ class TrajectoryMotion extends Base { static async createLabel(that) { let labelPosition = that.cartesian3Towgs84(that.model.position, that.sdk.viewer) that.label = new LabelObject(that.sdk, { - show: that.options.show ? (that.options.model.show ? that.options.label.show : false) : false, + show: that.options.show ? (that.options.label.show ? true : false) : false, position: [labelPosition.lng, labelPosition.lat, labelPosition.alt], text: that.options.name, fontSize: that.options.label.fontSize, fontFamily: that.options.label.fontFamily, color: that.options.label.color, - pixelOffset: that.options.label.pixelOffset, + pixelOffset: that.options.label.pixelOffset + (that.options.fuelShow ? that.options.label.fontSize + 20 : 0), backgroundColor: that.options.label.backgroundColor, lineColor: that.options.label.lineColor, lineWidth: that.options.label.lineWidth, @@ -1422,6 +1498,26 @@ class TrajectoryMotion extends Base { }, that.model) } + static async createFuelLabel(that) { + let labelPosition = that.cartesian3Towgs84(that.model.position, that.sdk.viewer) + that.fuelLabel = new LabelObject(that.sdk, { + show: that.options.show ? (that.options.fuelShow ? true : false) : false, + // show: true, + position: [labelPosition.lng, labelPosition.lat, labelPosition.alt], + text: '总油耗:', + fontSize: that.options.label.fontSize, + fontFamily: that.options.label.fontFamily, + color: that.options.label.color, + pixelOffset: 0, + backgroundColor: ['#6e6e6e', '#6e6e6e'], + lineColor: '#00ffff00', + lineWidth: 0, + scaleByDistance: that.options.label.scaleByDistance, + near: that.options.label.near, + far: that.options.label.far + }, that.model) + } + // 创建关键点 static async addKeyPoint(that) { for (let i = 0; i < that.options.line.positions.length; i++) { @@ -1527,7 +1623,7 @@ class TrajectoryMotion extends Base { setPosition(startDistance) setTimeout(() => { _this.model.isMove = false - }, 500); + }, 1000); animateUpdate() @@ -1550,6 +1646,8 @@ class TrajectoryMotion extends Base { } async function setPosition(distance) { + _this.totalFuelConsumption = Number((distance / 100 * _this.unitFuelConsumption).toFixed(2)) + _this.fuelLabel.text = '总油耗:' + _this.totalFuelConsumption + ' L' _this.model.isMove = true let sdk2D = get2DView() let splitSdk = getSdk() @@ -1761,6 +1859,7 @@ class TrajectoryMotion extends Base { } let labelPosition = _this.cartesian3Towgs84(position, _this.sdk.viewer) _this.label.position = [labelPosition.lng, labelPosition.lat, labelPosition.alt] + _this.fuelLabel.position = [labelPosition.lng, labelPosition.lat, labelPosition.alt] lastDistance = distance // console.log(position) _this.realTimeRouteArray.push(position) @@ -2157,6 +2256,7 @@ class TrajectoryMotion extends Base { this.sdk.viewer.entities.remove(this.line) this.sdk.viewer.entities.remove(this.realTimeLine) this.label && this.label.remove() + this.fuelLabel && this.fuelLabel.remove() for (let i = 0; i < this.keyPointShow.length; i++) { this.sdk.viewer.entities.remove(this.keyPointShow[i]) } @@ -2164,6 +2264,7 @@ class TrajectoryMotion extends Base { this.realTimeLine = null this.model = null this.label = null + this.fuelLabel = null if (this._DialogObject && !this._DialogObject.isDestroy) { this._DialogObject.close() this._DialogObject = null @@ -2217,6 +2318,7 @@ class TrajectoryMotion extends Base { this.model && (this.model.show = false) } this.labelShow = this.originalOptions.label.show + this.fuelLabelShow = this.originalOptions.fuelShow this.labelColor = this.originalOptions.label.color this.labelFontSize = this.originalOptions.label.fontSize this.labelFontFamily = this.originalOptions.label.fontFamily diff --git a/static/custom/css/index.css b/static/custom/css/index.css index f7ce847..f5d1ff7 100644 --- a/static/custom/css/index.css +++ b/static/custom/css/index.css @@ -1429,6 +1429,24 @@ margin-bottom: 10px; display: flex; position: relative; + overflow-y: auto; +} + +.DIV-cy-tabs .DIV-cy-tab-top::-webkit-scrollbar { + width: 4px; + height: 4px; +} + +.DIV-cy-tabs .DIV-cy-tab-top::-webkit-scrollbar-thumb { + border-radius: 5px; + -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); + background-color: rgba(var(--color-sdk-base-rgb)); +} + +.DIV-cy-tabs .DIV-cy-tab-top::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); + border-radius: 5px; + background-color: rgba(var(--color-sdk-base-rgb), 0.1); } .DIV-cy-tabs .DIV-cy-tab-top::after { @@ -1473,7 +1491,14 @@ border-bottom: 2px solid #dddddd00; position: relative; z-index: 2; + white-space: nowrap; + user-select: none; cursor: pointer; + -webkit-pointer-events: auto; + -moz-pointer-events: auto; + -ms-pointer-events: auto; + -o-pointer-events: auto; + pointer-events: auto; } .DIV-cy-tabs .DIV-cy-tab-pane-title-p span { @@ -3550,22 +3575,35 @@ border: 1.5px solid; border-image: linear-gradient(to bottom, var(--color-sdk-gradual)) 1; color: #fff; + min-width: 200px; + min-height: 120px; + box-sizing: border-box; + /* -webkit-pointer-events: none; + -moz-pointer-events: none; + -ms-pointer-events: none; + -o-pointer-events: none; + pointer-events: none; */ } + .billboard-attribute-box .DIV-cy-tabs { height: 100%; display: flex; flex-direction: column; } + .billboard-attribute-box .DIV-cy-tabs .DIV-cy-tab-top .DIV-cy-tab-pane-title { padding: 0 2px; } + .billboard-attribute-box .DIV-cy-tabs .DIV-cy-tab-top .DIV-cy-tab-pane-title:first-child { padding-left: 0; } + .billboard-attribute-box .DIV-cy-tabs .DIV-cy-tab-top .DIV-cy-tab-pane-title:last-child { padding-right: 0; } -.billboard-attribute-box .DIV-cy-tabs .DIV-cy-tab-top .DIV-cy-tab-pane-title span{ + +.billboard-attribute-box .DIV-cy-tabs .DIV-cy-tab-top .DIV-cy-tab-pane-title span { margin: 0 5px; } @@ -3573,4 +3611,116 @@ padding: 0 5px 5px 5px; box-sizing: border-box; flex: 1; + overflow: auto; +} + +.billboard-attribute-box .DIV-cy-tabs .DIV-cy-tab-content::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +.billboard-attribute-box .DIV-cy-tabs .DIV-cy-tab-content::-webkit-scrollbar-thumb { + border-radius: 5px; + -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); + background-color: rgba(var(--color-sdk-base-rgb)); +} + +.billboard-attribute-box .DIV-cy-tabs .DIV-cy-tab-content::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); + border-radius: 5px; + background-color: rgba(var(--color-sdk-base-rgb), 0.1); +} + +.billboard-attribute-box .DIV-cy-tabs .DIV-cy-tab-content-pane { + width: 100%; + height: 100%; +} + +.billboard-attribute-box .DIV-cy-tabs .DIV-cy-tab-content-pane iframe { + border: none; +} + +.billboard-attribute-box .billboard-attribute-box-line { + position: absolute; + width: 0px; + /* border-left: 1px solid rgba(var(--color-sdk-base-rgb), 0.5); */ + border-left: 1px solid rgba(var(--color-sdk-base-rgb), 1); + /* transform: rotate(45deg); */ + transform-origin: 0px 0px; + -webkit-pointer-events: none; + -moz-pointer-events: none; + -ms-pointer-events: none; + -o-pointer-events: none; + pointer-events: none; +} + +.billboard-attribute-box .drag-nook { + position: absolute; + width: 12px; + height: 12px; + display: block; + user-select: none; + -webkit-pointer-events: auto; + -moz-pointer-events: auto; + -ms-pointer-events: auto; + -o-pointer-events: auto; + pointer-events: auto; + z-index: 3; + clip-path: polygon(0% 100%, 100% 100%, 50% 50%); + background-image: linear-gradient(to top, #ffffff 1px, #00000000 1px); + background-size: 100% 3px; + /* background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAJRJREFUWEftltsJgFAMQ5NNdBJ1Eh3NTdRJdJPIBQXF50/p/WgHSNNDCSGch877EQbyIyCpBtAa/cZEsj9qXwhImgEURgZA8rTzzkAiYGVgITm+ErC6/Ek3vycMAkHAnYCkAUDKAosZSTaeSZiCqIwgCgJBIG8CWyXzKySSZBGBu+afStYBqIxMfJdSo8WPslHJgsAKWjkmIRBy/c8AAAAASUVORK5CYII='); */ +} + +.billboard-attribute-box .drag-nook.left-top { + top: -6px; + left: -6px; + cursor: se-resize; + transform: rotate(-45deg); + display: none; +} + +.billboard-attribute-box .drag-nook.right-top { + top: -6px; + right: -6px; + cursor: ne-resize; + transform: rotate(45deg); + display: none; +} + +.billboard-attribute-box .table { + background-color: #ffffff00; + color: #ffffff; + overflow: hidden; + border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5); +} + +.billboard-attribute-box .table .table-head .tr { + border-top: none; + border-left: none; + border-right: none; +} + +.billboard-attribute-box .table .tr { + display: flex; + border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5); + border-right: none; +} +.billboard-attribute-box .table .tr .th, .billboard-attribute-box .table .tr .td { + border-right: 1px solid rgba(var(--color-sdk-base-rgb), 0.5); + display: flex; + justify-content: center; +} +.billboard-attribute-box .table .tr .th:last-child, .billboard-attribute-box .table .tr .td:last-child { + border-right: none; +} + + +.billboard-attribute-box .table .table-body .tr { + border-bottom: none; + border-left: none; +} + +.billboard-attribute-box .table .table-body .tr:first-child { + border-top: none; } \ No newline at end of file