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

线贴图 速度bug修改

Browse Source
This commit is contained in:
夏大胆
2025-07-15 18:23:31 +08:00
parent 2fd421e637
commit a82a8abf65
4 changed files with 188 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/Obj/Base/PolylineObject/_element.js
View File

@ -96,10 +96,9 @@ function html(that) {
<input class="btn-switch" type="checkbox" @model="rotate">
</div>
<div class="col" style="flex: 0 0 33%;">
<span class="label">动画时长</span>
<span class="label">流动速率</span>
<div class="input-number input-number-unit-1" style="width: 80px;">
<input class="input" type="number" title="" min="0" max="999999" step="0.1" @model="speed">
<span class="unit">s</span>
<input class="input" type="number" title="" min="0" max="999999" step="1" @model="speed">
<span class="arrow"></span>
</div>
</div>

99
src/Obj/Base/PolylineObject/index.js
View File

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

15
src/Obj/Materail/FlowDashedLineFlowMaterialProperty.js
View File

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

115
src/Tools/index.js
View File

@ -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
}
/*创建直箭头图片*/