zh/sdk4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

轨迹运动增加油耗属性

Browse Source
This commit is contained in:
zh
2025-08-21 16:37:49 +08:00
parent b2d307b308
commit 2aade7eef9
4 changed files with 302 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/Obj/Base/LabelObject/index.js
View File

@ -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() {

17
src/Obj/Base/TrajectoryMotion/_element.js
View File

@ -182,6 +182,23 @@ function html() {
</div>
</div>
<span class="custom-divider"></span>
<div class="div-item">
<div class="row">
<div class="col">
<span class="label">油耗</span>
<div class="input-number input-number-unit-6" style="width: 170px;">
<input class="input" type="number" title="" min="1" max="99999999" @model="unitFuelConsumption">
<span class="unit">L/100km</span>
<span class="arrow"></span>
</div>
</div>
<div class="col" style="flex: 0 0 0;">
<span class="label">总油耗</span>
<input class="btn-switch" type="checkbox" @model="fuelShow">
</div>
</div>
</div>
<span class="custom-divider"></span>
`
}

132
src/Obj/Base/TrajectoryMotion/index.js
View File

@ -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

152
static/custom/css/index.css
View File

@ -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;
}