From a82a8abf65000dd3c8ba75ee3ab5e0c88f40ebb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=8F=E5=A4=A7=E8=83=86?= <1101282782@qq.com>
Date: Tue, 15 Jul 2025 18:23:31 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BA=BF=E8=B4=B4=E5=9B=BE=20=E9=80=9F?=
=?UTF-8?q?=E5=BA=A6bug=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/Obj/Base/PolylineObject/_element.js | 5 +-
src/Obj/Base/PolylineObject/index.js | 99 ++++++++++++++-
.../FlowDashedLineFlowMaterialProperty.js | 15 ++-
src/Tools/index.js | 115 ++++++++++++------
4 files changed, 188 insertions(+), 46 deletions(-)
diff --git a/src/Obj/Base/PolylineObject/_element.js b/src/Obj/Base/PolylineObject/_element.js
index c1356e5..17c8b9e 100644
--- a/src/Obj/Base/PolylineObject/_element.js
+++ b/src/Obj/Base/PolylineObject/_element.js
@@ -96,10 +96,9 @@ function html(that) {
diff --git a/src/Obj/Base/PolylineObject/index.js b/src/Obj/Base/PolylineObject/index.js
index e474b08..f605d4f 100644
--- a/src/Obj/Base/PolylineObject/index.js
+++ b/src/Obj/Base/PolylineObject/index.js
@@ -177,7 +177,8 @@ class PolylineObject extends Base {
}
set speed(v) {
- this.options.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() {
@@ -1321,6 +1322,7 @@ class PolylineObject extends Base {
}
})
that.entity.polyline.oriWidth = that.options.width
+ that.judgeLine(that.entity, that.options)
that.sdk._entityZIndex++
PolylineObject.createLabel(that)
// that.entity.polyline.positionsLngLat = positions
@@ -1355,7 +1357,102 @@ class PolylineObject 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) {
+ let speed = repeatX / entity.polyline.oriRepeat
+ entity.polyline.oriSpeed = speed
+ entity.polyline.oriRepeatX = repeatX
+ }
+
+
+
+
+ }
+ }
+ /**获取当前满屏横线速度 */
+ 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)
+
+ 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;
+ }
+
+ return repeatX
+ }
/**
* 编辑框
* @param {boolean} state true打开，false关闭
diff --git a/src/Obj/Materail/FlowDashedLineFlowMaterialProperty.js b/src/Obj/Materail/FlowDashedLineFlowMaterialProperty.js
index 546cda6..dddc50f 100644
--- a/src/Obj/Materail/FlowDashedLineFlowMaterialProperty.js
+++ b/src/Obj/Materail/FlowDashedLineFlowMaterialProperty.js
@@ -10,12 +10,14 @@ function FlowDashedLine() {
this._uType = undefined;
this._space = undefined;
this._dashSize = undefined;
+ this._scale = undefined;
this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)");
this.speed = options.speed != undefined ? options.speed : 1.0;//速度
this.space = options.space || 0.0;//速度
this.dashSize = options.dashSize || 0.03;//速度
this.uType = options.uType === undefined ? 1 : options.uType;//类型：0：普通流动线 1：虚化虚线
this.lineBackAlpha = options.lineBackAlpha || 0.05;
+ this.scale = options.scale || 1.0;
}
get isConstant() {
@@ -65,6 +67,12 @@ function FlowDashedLine() {
1,
result.uType
);
+ result.scale = Cesium.Property.getValueOrDefault(
+ this._scale,
+ time,
+ 1.0,
+ result.scale
+ );
result.lineBackAlpha = this.lineBackAlpha;
result.frameNumber = Cesium.getTimestamp();
return result;
@@ -77,7 +85,8 @@ function FlowDashedLine() {
Cesium.Property.equals(this._color, other._color) &&
Cesium.Property.equals(this._speed, other.speed) &&
Cesium.Property.equals(this._uType, other.uType) &&
- Cesium.Property.equals(this.lineBackAlpha, other.lineBackAlpha))
+ Cesium.Property.equals(this._lineBackAlpha, other.lineBackAlpha) &&
+ Cesium.Property.equals(this._scale, other.scale))
);
}
}
@@ -89,6 +98,7 @@ function FlowDashedLine() {
dashSize: Cesium.createPropertyDescriptor("dashSize"),
uType: Cesium.createPropertyDescriptor("uType"),
transparency: Cesium.createPropertyDescriptor("lineBackAlpha"),
+ scale: Cesium.createPropertyDescriptor("scale"),
});
Cesium.FlowDashedLineFlowMaterialProperty = FlowDashedLineFlowMaterialProperty;
@@ -108,7 +118,7 @@ function FlowDashedLine() {
float dashSize = 0.1;
float gapSize = space;
// speed现在表示完成一次完整动画循环的秒数
- float progress = speed==0.0 ? 0.0 : fract(frameNumber / 1000.0 / speed);
+ float progress = speed==0.0 ? 0.0 : fract(frameNumber / 1000.0 / speed * scale);
float pattern = fract(st.x / dashSize * (1.0 + gapSize) + progress / dashSize * (1.0 + gapSize));
float dash1 = step(0.0, pattern) - step(1.0/(1.0 + gapSize), pattern);
float dash2 = smoothstep(0.0, 0.2, pattern) -
@@ -131,6 +141,7 @@ function FlowDashedLine() {
color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
speed: 1,
space: 0.0,
+ scale: 1.0,
dashSize: 0.03,
frameNumber: Cesium.getTimestamp(),
uType: 1,
diff --git a/src/Tools/index.js b/src/Tools/index.js
index 044ed77..8fc5006 100644
--- a/src/Tools/index.js
+++ b/src/Tools/index.js
@@ -202,7 +202,7 @@ class Tools {
return length.toFixed(fractionDigits)
}
}
-
+
computeDistance2(positions = [], fractionDigits = 2, ground = true) {
if (positions.length < 2) {
return 0
@@ -586,6 +586,17 @@ class Tools {
getMaterial(color = '#2ab0c2', type = 0, entity = null, newParam = {}) {
let material = ''
+ let arr = {
+ '7': 10,
+ '8': 3,
+ '9': 4,
+ '10': 4,
+ '11': 4,
+ '12': 2
+ }
+ if (entity) {
+ arr[type + ''] ? (entity.polyline.width = entity.polyline.oriWidth + arr[type + '']) : (entity.polyline.width = entity.polyline.oriWidth)
+ }
switch (Number(type)) {
@@ -616,22 +627,48 @@ class Tools {
})
break
case 5: //普通流动虚线
- material = new Cesium.FlowDashedLineFlowMaterialProperty({
- color: color,
- uType: 0,
- speed: newParam.rotate ? newParam.speed : 0 - newParam.speed,
- // dashSize: newParam.dashSize,
- space: newParam.space
- })
- break
+ // material = new Cesium.FlowDashedLineFlowMaterialProperty({
+ // color: color,
+ // uType: 0,
+ // speed: newParam.rotate ? newParam.speed : 0 - newParam.speed,
+ // // dashSize: newParam.dashSize,
+ // space: newParam.space,
+ // scale: 1.0
+ // })
+ // break
case 6: //流动虚线2
+ let that = this
+
material = new Cesium.FlowDashedLineFlowMaterialProperty({
color: color,
- uType: 1,
+ uType: type == 5 ? 0 : 1,
speed: newParam.rotate ? newParam.speed : 0 - newParam.speed,
// dashSize: newParam.dashSize,
- space: newParam.space
+ space: newParam.space,
+ scale: new Cesium.CallbackProperty(function () {
+ var oriPositions = entity.polyline.positions.getValue();
+
+ if (!Cesium.defined(oriPositions)) {
+ return 1.0;
+ }
+ var distance = 0;
+ for (var i = 0; i < oriPositions.length - 1; ++i) {
+ distance += Cesium.Cartesian3.distance(oriPositions[i], oriPositions[i + 1]);
+ }
+ //屏幕坐标
+ let point1 = new Cesium.Cartesian2(0, that.sdk.viewer.canvas.clientHeight)
+ let point2 = new Cesium.Cartesian2(that.sdk.viewer.canvas.clientWidth / 2, that.sdk.viewer.canvas.clientHeight)
+ var cartesian1 = that.sdk.viewer.scene.pickPosition(point1)
+ var cartesian2 = that.sdk.viewer.scene.pickPosition(point2)
+
+ var distance2 = Cesium.Cartesian3.distance(cartesian1, cartesian2);
+
+ let repeatX = distance2 * 2 / distance
+
+ return repeatX;
+ })
})
+
break
case 7: //流动箭头1
case 8: //流动箭头2
@@ -645,20 +682,8 @@ class Tools {
space: newParam.space,
speed: newParam.speed
}
- let arr = {
- '7': 10,
- '8': 3,
- '9': 4,
- '10': 4,
- '11': 4,
- '12': 2
- }
-
param.speed = newParam.rotate ? param.speed : 0 - param.speed
- entity.polyline.width = entity.polyline.oriWidth + arr[type + '']
-
-
this.getFlowTexture(this, param, entity)
@@ -669,6 +694,7 @@ class Tools {
}
return material
}
+
getFlowTexture(that, options, entity) {
const canvasEle = document.createElement('canvas');
@@ -698,15 +724,13 @@ class Tools {
// }, false)
// entity.polyline.material.oriRepeat = that.getSceenLine(entity, options, canvasEle)
// entity.polyline.material.oriSpeed = undefined
+ let beforeSpeed = 0, repeat = 0
entity.polyline.material = new Cesium.LineTextureMaterialProperty(
{
color: options.color,
- // image: options.image,
image: canvasEle,
speed: options.speed,
- // repeat: repeat
repeat: new Cesium.CallbackProperty(function () {
- // function getRepeat() {
var positionProperty = entity.polyline.positions;
var positions = positionProperty.getValue(that.sdk.viewer.clock.currentTime);
@@ -734,24 +758,30 @@ class Tools {
// 使用 getPixelSize 方法获取包围球在屏幕上的像素大小
var groundResolution = that.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight)
- // repeatX *= groundResolution / cameraHeight / ((myImg.width / myImg.height * 5) + 1);
- repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1);
- let speed
- if (entity.polyline.material.oriRepeat) {
- speed = repeatX / entity.polyline.material.oriRepeat
+ let result
+ if (groundResolution > 700) {
+ repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1);
+ // if (entity.polyline.material.oriRepeat) {
+ let speed = repeatX / entity.polyline.oriRepeat
+ entity.polyline.oriSpeed = speed
+ entity.polyline.oriRepeatX = repeatX
+ // } else {
+ // entity.polyline.material.oriRepeat = repeatX
+ // }
+ beforeSpeed = speed
+ repeat = repeatX
+ result = new Cesium.Cartesian2(repeatX, speed || 1.0)
} else {
- entity.polyline.material.oriRepeat = repeatX
+ result = new Cesium.Cartesian2(repeat || entity.polyline.oriRepeatX, beforeSpeed || entity.polyline.oriSpeed)
}
- // if (repeatX < 3) {
- // repeatX = 3
- // }
- return new Cesium.Cartesian2(repeatX, speed || 1.0);
+
+ return result;
// return repeatX;
})
}
)
- // entity.polyline.material.oriSpeed = options.speed
- entity.polyline.material.oriRepeat = that.getSceenLine(entity, options, canvasEle)
+ let oriRepeat = that.getSceenLine(entity, options, canvasEle)
+ oriRepeat && (entity.polyline.oriRepeat = oriRepeat)
}
}
/**获取当前满屏横线速度 */
@@ -778,8 +808,13 @@ class Tools {
// 使用 getPixelSize 方法获取包围球在屏幕上的像素大小
var groundResolution = this.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight)
// repeatX *= groundResolution / cameraHeight / ((myImg.width / myImg.height * 5) + 1);
- repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1);
- return repeatX * 2
+ if (groundResolution > 700) {
+ repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1);
+ } else {
+ repeatX = undefined;
+ }
+
+ return repeatX
}
/*创建直箭头图片*/