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-09 11:26:33 +08:00
parent dd003aa00d
commit 45f2d6f4eb
8 changed files with 54 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -103,20 +103,19 @@ function html(that) {
<input class="btn-switch" type="checkbox" @model="rotate"> <input class="btn-switch" type="checkbox" @model="rotate">
</div> </div>
<div class="col"> <div class="col">
<span class="label">动画倍数</span> <span class="label">动画时长</span>
<div class="input-number input-number-unit-1" style="width: 80px;"> <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"> <input class="input" type="number" title="" min="0" max="999999" step="0.1" @model="speed">
<span class="unit">s</span>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
</div> </div>
<div class="col" > <div class="col" >
<span id="lineSpace"> <span class="label lineSpace">间距</span>
<span class="label">间距</span> <div class="input-number input-number-unit-1 lineSpace" style="width: 80px;">
<div class="input-number input-number-unit-1" style="width: 80px;"> <input class="input" type="number" title="" min="0" max="4.5" step="0.1" @model="space">
<input class="input" type="number" title="" min="0" max="3" step="0.1" @model="space">
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
</span>
</div> </div>
</div> </div>
<div class="row"> <div class="row">

20
src/Obj/Base/PolylineObject/eventBinding.js
View File

@ -22,7 +22,7 @@ class eventBinding {
let isEvent = false let isEvent = false
let removeName = [] let removeName = []
if (!elements[i] || !elements[i].attributes) { if (!elements[i] || !elements[i].attributes) {
continue continue
} }
for (let m of elements[i].attributes) { for (let m of elements[i].attributes) {
switch (m.name) { switch (m.name) {
@ -38,13 +38,15 @@ class eventBinding {
if (e.target.type == 'number') { if (e.target.type == 'number') {
if (e.data != '.' && (e.data != '-' || e.target.value)) { if (e.data != '.' && (e.data != '-' || e.target.value)) {
value = Number(value) value = Number(value)
if((e.target.max) && value>Number(e.target.max)) { if ((e.target.max) && value > Number(e.target.max)) {
value = Number(e.target.max) value = Number(e.target.max)
e.target.value = value
} }
if((e.target.min) && value<Number(e.target.min)) { if ((e.target.min) && value < Number(e.target.min)) {
value = Number(e.target.min) value = Number(e.target.min)
e.target.value = value
} }
if((e.target.dataset.min) && value<Number(e.target.dataset.min)) { if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
value = Number(e.target.dataset.min) value = Number(e.target.dataset.min)
} }
that[m.value] = value that[m.value] = value
@ -54,14 +56,14 @@ class eventBinding {
that[m.value] = value that[m.value] = value
} }
}) })
if(elements[i].nodeName=='IMG') { if (elements[i].nodeName == 'IMG') {
elements[i].src = that[m.value] elements[i].src = that[m.value]
} }
else { else {
elements[i].value = that[m.value] elements[i].value = that[m.value]
} }
} }
if(this.element[m.value]) { if (this.element[m.value]) {
this.element[m.value].push(elements[i]) this.element[m.value].push(elements[i])
} }
else { else {
@ -84,7 +86,7 @@ class eventBinding {
isEvent = true isEvent = true
Event.push((e) => { Event.push((e) => {
let value = e.target.value let value = e.target.value
if(e.target.type == 'number' && value!='') { if (e.target.type == 'number' && value != '') {
value = Number(value) value = Number(value)
e.target.value = value e.target.value = value
} }
@ -97,7 +99,7 @@ class eventBinding {
} }
// elements[i].attributes[m] = undefined // elements[i].attributes[m] = undefined
} }
for(let n=0;n<removeName.length;n++) { for (let n = 0; n < removeName.length; n++) {
elements[i].attributes.removeNamedItem(removeName[n]) elements[i].attributes.removeNamedItem(removeName[n])
} }
@ -117,4 +119,4 @@ class eventBinding {
} }
const EventBinding = new eventBinding(); const EventBinding = new eventBinding();
export default EventBinding; export default EventBinding;

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

@ -383,9 +383,11 @@ class PolylineObject extends Base {
document.getElementById('dashTextureDom').style.display = 'none' document.getElementById('dashTextureDom').style.display = 'none'
} }
if (2 < item.value && item.value < 5) {//尾迹参数 if (2 < item.value && item.value < 5) {//尾迹参数
document.getElementById('lineSpace').style.display = 'none' document.getElementsByClassName('lineSpace')[0].style.display = 'none'
document.getElementsByClassName('lineSpace')[1].style.display = 'none'
} else { } else {
document.getElementById('lineSpace').style.display = 'flex' document.getElementsByClassName('lineSpace')[0].style.display = 'flex'
document.getElementsByClassName('lineSpace')[1].style.display = 'flex'
} }
}) })
break break
@ -551,6 +553,7 @@ class PolylineObject extends Base {
set extendWidth(v) { set extendWidth(v) {
this.options['extend-width'] = v this.options['extend-width'] = v
this.heightMode = this.heightMode
this._elms.extendWidth && this._elms.extendWidth &&
this._elms.extendWidth.forEach(item => { this._elms.extendWidth.forEach(item => {
item.value = v item.value = v
@ -1681,9 +1684,11 @@ class PolylineObject extends Base {
document.getElementById('dashTextureDom').style.display = 'none' document.getElementById('dashTextureDom').style.display = 'none'
} }
if (2 < this.lineType && this.lineType < 5) {//尾迹参数 if (2 < this.lineType && this.lineType < 5) {//尾迹参数
document.getElementById('lineSpace').style.display = 'none' document.getElementsByClassName('lineSpace')[0].style.display = 'none'
document.getElementsByClassName('lineSpace')[1].style.display = 'none'
} else { } else {
document.getElementById('lineSpace').style.display = 'flex' document.getElementsByClassName('lineSpace')[0].style.display = 'flex'
document.getElementsByClassName('lineSpace')[1].style.display = 'flex'
} }
break break
} }

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

@ -12,7 +12,7 @@ function FlowDashedLine() {
this._dashSize = undefined; this._dashSize = undefined;
this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)"); this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)");
this.speed = options.speed != undefined ? options.speed : 1.0;//速度 this.speed = options.speed != undefined ? options.speed : 1.0;//速度
this.space = options.space || 0.01;//速度 this.space = options.space || 0.0;//速度
this.dashSize = options.dashSize || 0.03;//速度 this.dashSize = options.dashSize || 0.03;//速度
this.uType = options.uType === undefined ? 1 : options.uType;//类型：0：普通流动线 1：虚化虚线 this.uType = options.uType === undefined ? 1 : options.uType;//类型：0：普通流动线 1：虚化虚线
this.lineBackAlpha = options.lineBackAlpha || 0.05; this.lineBackAlpha = options.lineBackAlpha || 0.05;
@ -105,15 +105,16 @@ function FlowDashedLine() {
czm_material material = czm_getDefaultMaterial(materialInput); czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st; vec2 st = materialInput.st;
// 计算流动虚线 float dashSize = 0.1;
float dashSize = 0.03;
// float gapSize = 0.01;
// float dashSize = dashSize;
float gapSize = space; float gapSize = space;
float progress = fract(speed * czm_frameNumber * 0.01); // 时间控制流动 // speed现在表示完成一次完整动画循环的秒数
float pattern = fract(st.x / (dashSize + gapSize) + progress); float progress = speed==0.0 ? 0.0 : fract(frameNumber / 1000.0 / speed);
float dash1 = step(0.1, pattern) - step(0.9, pattern); float pattern = fract(st.x / dashSize * (1.0 + gapSize) + progress / dashSize * (1.0 + gapSize));
float dash2 = smoothstep(0.0, 0.4, pattern) - smoothstep(0.6, 1.0, pattern); float dash1 = step(0.0, pattern) - step(1.0/(1.0 + gapSize), pattern);
float dash2 = smoothstep(0.0, 0.2, pattern) -
smoothstep(1.0/(1.0 + gapSize),
1.0/(1.0 + gapSize) + 0.2,
pattern);
float dash = (float(uType) != 1.0)?dash1:dash2; float dash = (float(uType) != 1.0)?dash1:dash2;
material.alpha = dash; material.alpha = dash;
material.diffuse = color.rgb; material.diffuse = color.rgb;
@ -129,8 +130,9 @@ function FlowDashedLine() {
uniforms: { uniforms: {
color: new Cesium.Color(1.0, 1.0, 1.0, 1.0), color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
speed: 1, speed: 1,
space: 0.01, space: 0.0,
dashSize: 0.03, dashSize: 0.03,
frameNumber: Cesium.getTimestamp(),
uType: 1, uType: 1,
lineBackAlpha: 0.05, lineBackAlpha: 0.05,
}, },

5
src/Obj/Materail/LineTextureMaterialProperty.js
View File

@ -55,6 +55,7 @@ function LineTexture() {
1.0, 1.0,
result.repeat result.repeat
); );
result.frameNumber = Cesium.getTimestamp();
return result; return result;
} }
@ -90,7 +91,8 @@ function LineTexture() {
czm_material material = czm_getDefaultMaterial(materialInput); czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st; vec2 st = materialInput.st;
st.s *= repeat; // 关键：通过repeat控制纹理密度 st.s *= repeat; // 关键：通过repeat控制纹理密度
vec4 colorImage = texture2D(image, vec2(fract(st.s + speed*czm_frameNumber* 0.01), st.t)); // vec4 colorImage = texture2D(image, vec2(fract(st.s + speed*czm_frameNumber* 0.01), st.t));
vec4 colorImage = speed==0.0?texture2D(image, vec2(fract(st.s), st.t)):texture2D(image, vec2(fract(st.s + frameNumber / 1000.0 / speed * repeat ), st.t));
material.alpha = colorImage.a * color.a; material.alpha = colorImage.a * color.a;
material.diffuse = color.rgb; material.diffuse = color.rgb;
return material; return material;
@ -106,6 +108,7 @@ function LineTexture() {
image: '', image: '',
repeat: 1.0, repeat: 1.0,
speed: 1.0, speed: 1.0,
frameNumber: Cesium.getTimestamp(),
uTime: 1 uTime: 1
}, },
source: Cesium.Material.LineTextureMaterialSource, source: Cesium.Material.LineTextureMaterialSource,

7
src/Obj/Materail/PolylineFlowMaterialProperty.js
View File

@ -50,7 +50,8 @@ function PolylineFlow() {
result.rotate result.rotate
); );
result.lineBackAlpha = this.lineBackAlpha; result.lineBackAlpha = this.lineBackAlpha;
result.frameNumber = Cesium.getTimestamp(); result.frameTime = Cesium.getTimestamp();
// result.frameNumber = Cesium.getTimestamp();
return result; return result;
} }
@ -88,7 +89,8 @@ function PolylineFlow() {
vec2 st = materialInput.st; vec2 st = materialInput.st;
//获取当前帧数，10秒内变化0-1 //获取当前帧数，10秒内变化0-1
// float time = fract(czm_frameNumber * speed / 60.0); // float time = fract(czm_frameNumber * speed / 60.0);
float time = fract(abs(speed) * czm_frameNumber * 0.01); // float time = fract(abs(speed) * czm_frameNumber * 0.01);
float time = fract(frameTime / 1000.0 / abs(speed));
//长度1/10 //长度1/10
// time = time * (1.0 + 0.1); // time = time * (1.0 + 0.1);
float staticAlpha = rotate?smoothstep(0.0,1.0, 1.0-st.s) * step(-1.0,-(1.0-st.s)):smoothstep(0.0,1.0, st.s) * step(-1.0,-st.s); float staticAlpha = rotate?smoothstep(0.0,1.0, 1.0-st.s) * step(-1.0,-(1.0-st.s)):smoothstep(0.0,1.0, st.s) * step(-1.0,-st.s);
@ -114,6 +116,7 @@ function PolylineFlow() {
color: new Cesium.Color(1.0, 1.0, 1.0, 1.0), color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
speed: 0.1, speed: 0.1,
rotate: true, rotate: true,
frameTime: Cesium.getTimestamp(),
lineBackAlpha: 0.05, lineBackAlpha: 0.05,
}, },
source: Cesium.Material.PolylineFlowMaterialSource, source: Cesium.Material.PolylineFlowMaterialSource,

6
src/Obj/Materail/PolylineFlowMultMaterialProperty.js
View File

@ -50,7 +50,7 @@ function PolylineFlowMult() {
result.rotate result.rotate
); );
result.lineBackAlpha = this.lineBackAlpha; result.lineBackAlpha = this.lineBackAlpha;
result.frameNumber = Cesium.getTimestamp(); result.frameTime = Cesium.getTimestamp();
return result; return result;
} }
@ -91,7 +91,8 @@ function PolylineFlowMult() {
// 高频时间轴（控制高光点） // 高频时间轴（控制高光点）
// float highlightTime = fract(czm_frameNumber * speed * 3.0 / 60.0); // float highlightTime = fract(czm_frameNumber * speed * 3.0 / 60.0);
float highlightTime = fract(abs(speed) * czm_frameNumber * 0.01); // float highlightTime = fract(abs(speed) * czm_frameNumber * 0.01);
float highlightTime = fract(frameTime / 1000.0 / abs(speed));
float highlightSpacing = 0.3; // 高光点间隔 float highlightSpacing = 0.3; // 高光点间隔
// 主光带透明度计算 // 主光带透明度计算
@ -151,6 +152,7 @@ function PolylineFlowMult() {
color: new Cesium.Color(1.0, 1.0, 1.0, 1.0), color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
speed: 0.1, speed: 0.1,
rotate: true, rotate: true,
frameTime: Cesium.getTimestamp(),
lineBackAlpha: 0.05, lineBackAlpha: 0.05,
}, },
source: Cesium.Material.PolylineFlowMaterialSource, source: Cesium.Material.PolylineFlowMaterialSource,

6
src/Tools/index.js
View File

@ -555,6 +555,7 @@ class Tools {
// dashSize: newParam.dashSize, // dashSize: newParam.dashSize,
space: newParam.space space: newParam.space
}) })
console.log(newParam.space)
break break
case 6: //流动虚线2 case 6: //流动虚线2
material = new Cesium.FlowDashedLineFlowMaterialProperty({ material = new Cesium.FlowDashedLineFlowMaterialProperty({
@ -595,19 +596,20 @@ class Tools {
// myImg.src = that.getSourceRootPath() + '/img/arrow/1.png' // myImg.src = that.getSourceRootPath() + '/img/arrow/1.png'
myImg.src = options.image myImg.src = options.image
myImg.onload = function () { myImg.onload = function () {
options.space = Math.max(0.1, options.space);
if (options.speed > 0 || options.speed == 0) { if (options.speed > 0 || options.speed == 0) {
canvasEle.width = myImg.width * (options.space + 1) canvasEle.width = myImg.width * (options.space + 1)
canvasEle.height = myImg.height canvasEle.height = myImg.height
ctx.drawImage(myImg, myImg.width * (options.space / 2), 0) ctx.drawImage(myImg, myImg.width * (options.space / 2), 0)
} else { } else {
ctx.clearRect(0, 0, canvasEle.width, canvasEle.height); ctx.clearRect(0, 0, canvasEle.width, canvasEle.height);
ctx.save(); // 保存当前状态
canvasEle.width = myImg.width * (options.space + 1) canvasEle.width = myImg.width * (options.space + 1)
canvasEle.height = myImg.height canvasEle.height = myImg.height
ctx.save(); // 保存当前状态
ctx.translate(canvasEle.width / 2, canvasEle.height / 2); // 移动原点至中心 ctx.translate(canvasEle.width / 2, canvasEle.height / 2); // 移动原点至中心
ctx.rotate(Math.PI); // （弧度制） ctx.rotate(Math.PI); // （弧度制）
ctx.translate(-canvasEle.width / 2, -canvasEle.height / 2); // 移回原点 ctx.translate(-canvasEle.width / 2, -canvasEle.height / 2); // 移回原点
ctx.drawImage(myImg, -myImg.width * (options.space / 2), 0) ctx.drawImage(myImg, myImg.width * (options.space / 2), 0)
ctx.restore(); // 恢复状态 ctx.restore(); // 恢复状态
} }