线段缓冲
diff --git a/src/Obj/Base/PolylineObject/index.js b/src/Obj/Base/PolylineObject/index.js
index d40ab76..f72b6ec 100644
--- a/src/Obj/Base/PolylineObject/index.js
+++ b/src/Obj/Base/PolylineObject/index.js
@@ -57,6 +57,10 @@ class PolylineObject extends Base {
this.options['nose-to-tail'] = options['nose-to-tail'] || false
this.options.smooth = options.smooth || false
this.options.extend = options.extend || false
+ this.options.rotate = options.rotate || true
+ this.options.space = options.space || 0.1
+ this.options.speed = options.speed || 1
+ this.options.dashSize = options.dashSize || 0.03
this.options['length-unit'] = options['length-unit'] || '米'
this.options['fit-length-unit'] = options['fit-length-unit'] || '米'
this.options['extend-width'] =
@@ -144,7 +148,7 @@ class PolylineObject extends Base {
}
set color(v) {
this.options.color = v
- this.entity.polyline.material = this.getMaterial(v, this.options.type)
+ this.entity.polyline.material = this.getMaterial(v, this.options.type, this.entity, this.options)
if (this._elms.color) {
this._elms.color.forEach((item, i) => {
let colorPicker = new ewPlugins('colorpicker', {
@@ -166,6 +170,48 @@ class PolylineObject extends Base {
}
}
+ get speed() {
+ return this.options.speed
+ }
+
+ set speed(v) {
+ this.options.speed = v
+ this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options)
+ }
+ get dashSize() {
+ return this.options.dashSize
+ }
+
+ set dashSize(v) {
+ this.options.dashSize = v
+ this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options)
+ }
+
+ get rotate() {
+ return this.options.rotate
+ }
+
+ set rotate(v) {
+ this.options.rotate = v
+ PolylineObject.closeNodeEdit(this)
+ this._elms.rotate &&
+ this._elms.rotate.forEach(item => {
+ item.checked = v
+ })
+
+ this.options.rotate = v
+ this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options)
+ }
+
+ get space() {
+ return this.options.space
+ }
+
+ set space(v) {
+ this.options.space = v
+ this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options)
+ }
+
get length() {
return this.options.length
}
@@ -298,6 +344,31 @@ class PolylineObject extends Base {
name: '流动箭头1',
value: '流动箭头1',
key: 7
+ },
+ {
+ name: '流动箭头2',
+ value: '流动箭头2',
+ key: 8
+ },
+ {
+ name: '流动箭头3',
+ value: '流动箭头3',
+ key: 9
+ },
+ {
+ name: '流动箭头4',
+ value: '流动箭头4',
+ key: 10
+ },
+ {
+ name: '流动箭头5',
+ value: '流动箭头5',
+ key: 11
+ },
+ {
+ name: '流动箭头6',
+ value: '流动箭头6',
+ key: 12
}
]
this.options.type = Number(v)
@@ -306,6 +377,16 @@ class PolylineObject extends Base {
this._elms.lineType &&
this._elms.lineType.forEach(item => {
item.value = lineTypeData[i].value
+ if (2 < item.value && item.value < 13) {//贴图参数
+ document.getElementById('dashTextureDom').style.display = 'flex'
+ } else {
+ document.getElementById('dashTextureDom').style.display = 'none'
+ }
+ if (2 < item.value && item.value < 5) {//尾迹参数
+ document.getElementById('lineSpace').style.display = 'none'
+ } else {
+ document.getElementById('lineSpace').style.display = 'flex'
+ }
})
break
}
@@ -314,7 +395,9 @@ class PolylineObject extends Base {
this.entity.polyline &&
(this.entity.polyline.material = this.getMaterial(
this.options.color,
- this.options.type
+ this.options.type,
+ this.entity,
+ this.options
))
}
get noseToTail() {
@@ -1177,7 +1260,7 @@ class PolylineObject extends Base {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(fromDegreesArray),
width: that.options.width,
clampToGround: ground,
- material: that.getMaterial(that.options.color, that.options.type),
+ material: that.getMaterial(that.options.color, that.options.type, that.entity, that.options),
zIndex: that.sdk._entityZIndex
}
})
@@ -1540,6 +1623,31 @@ class PolylineObject extends Base {
name: '流动箭头1',
value: '流动箭头1',
key: 7
+ },
+ {
+ name: '流动箭头2',
+ value: '流动箭头2',
+ key: 8
+ },
+ {
+ name: '流动箭头3',
+ value: '流动箭头3',
+ key: 9
+ },
+ {
+ name: '流动箭头4',
+ value: '流动箭头4',
+ key: 10
+ },
+ {
+ name: '流动箭头5',
+ value: '流动箭头5',
+ key: 11
+ },
+ {
+ name: '流动箭头6',
+ value: '流动箭头6',
+ key: 12
}
]
let lineTypeDataLegpObject = legp(
@@ -1565,6 +1673,18 @@ class PolylineObject extends Base {
for (let i = 0; i < lineTypeData.length; i++) {
if (lineTypeData[i].value === lineTypeDataLegpElm.value) {
this.lineType = lineTypeData[i].key
+
+ //控制参数显隐
+ if (2 < this.lineType && this.lineType < 13) {//贴图参数
+ document.getElementById('dashTextureDom').style.display = 'flex'
+ } else {
+ document.getElementById('dashTextureDom').style.display = 'none'
+ }
+ if (2 < this.lineType && this.lineType < 5) {//尾迹参数
+ document.getElementById('lineSpace').style.display = 'none'
+ } else {
+ document.getElementById('lineSpace').style.display = 'flex'
+ }
break
}
}
@@ -1984,6 +2104,10 @@ class PolylineObject extends Base {
this.attributeVr = this.options.attribute.vr.content
this.attributeCamera = this.options.attribute.camera.content
this.attributeGoods = this.options.attribute.goods.content
+ this.rotate = this.originalOptions.rotate
+ this.speed = this.originalOptions.speed
+ this.dashSize = this.originalOptions.dashSize
+ this.space = this.originalOptions.space
this.cameraSelect && this.cameraSelect()
this.goodsSelect && this.goodsSelect()
diff --git a/src/Obj/Materail/FlowDashedLineFlowMaterialProperty.js b/src/Obj/Materail/FlowDashedLineFlowMaterialProperty.js
index 10d5d6c..b5a4fbe 100644
--- a/src/Obj/Materail/FlowDashedLineFlowMaterialProperty.js
+++ b/src/Obj/Materail/FlowDashedLineFlowMaterialProperty.js
@@ -8,8 +8,12 @@ function FlowDashedLine() {
this._color = undefined;
this._speed = undefined;
this._uType = undefined;
+ this._space = undefined;
+ this._dashSize = undefined;
this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)");
- this.speed = options.speed || 0.25;//速度
+ this.speed = options.speed != undefined ? options.speed : 1.0;//速度
+ this.space = options.space || 0.01;//速度
+ this.dashSize = options.dashSize || 0.03;//速度
this.uType = options.uType === undefined ? 1 : options.uType;//类型：0：普通流动线 1：虚化虚线
this.lineBackAlpha = options.lineBackAlpha || 0.05;
}
@@ -43,6 +47,18 @@ function FlowDashedLine() {
10,
result.speed
);
+ result.space = Cesium.Property.getValueOrDefault(
+ this._space,
+ time,
+ 10,
+ result.space
+ );
+ result.dashSize = Cesium.Property.getValueOrDefault(
+ this._dashSize,
+ time,
+ 10,
+ result.dashSize
+ );
result.uType = Cesium.Property.getValueOrDefault(
this._uType,
time,
@@ -69,6 +85,8 @@ function FlowDashedLine() {
Object.defineProperties(FlowDashedLineFlowMaterialProperty.prototype, {
color: Cesium.createPropertyDescriptor("color"),
speed: Cesium.createPropertyDescriptor("speed"),
+ space: Cesium.createPropertyDescriptor("space"),
+ dashSize: Cesium.createPropertyDescriptor("dashSize"),
uType: Cesium.createPropertyDescriptor("uType"),
transparency: Cesium.createPropertyDescriptor("lineBackAlpha"),
});
@@ -89,11 +107,13 @@ function FlowDashedLine() {
// 计算流动虚线
float dashSize = 0.03;
- float gapSize = 0.01;
- float progress = fract(czm_frameNumber * 0.01); // 时间控制流动
+ // float gapSize = 0.01;
+ // float dashSize = dashSize;
+ float gapSize = space;
+ float progress = fract(speed * czm_frameNumber * 0.01); // 时间控制流动
float pattern = fract(st.x / (dashSize + gapSize) + progress);
float dash1 = step(0.1, pattern) - step(0.9, pattern);
- float dash2 = smoothstep(0.1, 0.3, pattern) - smoothstep(0.7, 0.9, pattern);
+ float dash2 = smoothstep(0.0, 0.4, pattern) - smoothstep(0.6, 1.0, pattern);
float dash = (float(uType) != 1.0)?dash1:dash2;
material.alpha = dash;
material.diffuse = color.rgb;
@@ -108,7 +128,9 @@ function FlowDashedLine() {
type: Cesium.Material.FlowDashedLineMaterialType,
uniforms: {
color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
- speed: 0.1,
+ speed: 1,
+ space: 0.01,
+ dashSize: 0.03,
uType: 1,
lineBackAlpha: 0.05,
},
diff --git a/src/Obj/Materail/LineTextureMaterialProperty.js b/src/Obj/Materail/LineTextureMaterialProperty.js
index 105f391..2fedee1 100644
--- a/src/Obj/Materail/LineTextureMaterialProperty.js
+++ b/src/Obj/Materail/LineTextureMaterialProperty.js
@@ -7,10 +7,12 @@ function LineTexture() {
this._definitionChanged = new Cesium.Event();
this._image = undefined;
this._color = undefined;
- this._imageW = undefined;
+ this._speed = undefined;
+ this._repeat = undefined;
this.image = options.image || "";
this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)");
- this.imageW = options.imageW || 1;
+ this.speed = options.speed != undefined ? options.speed : 1.0;
+ this.repeat = options.repeat || 1.0;
}
get isConstant() {
@@ -41,11 +43,17 @@ function LineTexture() {
Cesium.Color.RED,
result.color
);
- result.imageW = Cesium.Property.getValueOrDefault(
- this._imageW,
+ result.speed = Cesium.Property.getValueOrDefault(
+ this._speed,
time,
- 1,
- result.imageW
+ 1.0,
+ result.speed
+ );
+ result.repeat = Cesium.Property.getValueOrDefault(
+ this._repeat,
+ time,
+ 1.0,
+ result.repeat
);
return result;
}
@@ -56,7 +64,8 @@ function LineTexture() {
(other instanceof LineTextureMaterialProperty &&
Cesium.Property.equals(this._image, other._image) &&
Cesium.Property.equals(this._color, other._color) &&
- Cesium.Property.equals(this._imageW, other._imageW))
+ Cesium.Property.equals(this._imageW, other._imageW) &&
+ Cesium.Property.equals(this._speed, other._speed))
);
}
}
@@ -64,27 +73,27 @@ function LineTexture() {
Object.defineProperties(LineTextureMaterialProperty.prototype, {
image: Cesium.createPropertyDescriptor("image"),
color: Cesium.createPropertyDescriptor("color"),
- imageW: Cesium.createPropertyDescriptor("imageW"),
+ speed: Cesium.createPropertyDescriptor("speed"),
+ repeat: Cesium.createPropertyDescriptor("repeat"),
});
Cesium.LineTextureMaterialProperty = LineTextureMaterialProperty;
Cesium.Material.LineTextureMaterialProperty = "LineTextureMaterialProperty";
Cesium.Material.LineTextureMaterialType = "LineTextureMaterialType";
Cesium.Material.LineTextureMaterialSource = `
- #extension GL_OES_standard_derivatives : enable
+ uniform vec4 color;
+ uniform sampler2D image;
+ uniform float speed;
+ uniform float repeat;
czm_material czm_getMaterial(czm_materialInput materialInput)
{
- czm_material m = czm_getDefaultMaterial(materialInput);
-
-
- vec2 st = materialInput.st * vec2(494/172, 1.0); // 横向重复两次
- vec2 uv = vec2(fract(st.s + uTime*0.1), st.t);
- // uv.y = mix(uv.y, 1.0-uv.y, step(0.5, fract(uTime))); // 周期性反转Y轴
- vec4 tex = texture(image, uv);
- m.diffuse =(tex.rgb+color.rgb)/2.0;
- m.alpha = tex.a * (1.0 - fract(st.t)) * color.a; // 顶部渐隐
-
- return m;
+ czm_material material = czm_getDefaultMaterial(materialInput);
+ vec2 st = materialInput.st;
+ st.s *= repeat; // 关键：通过repeat控制纹理密度
+ vec4 colorImage = texture2D(image, vec2(fract(st.s + speed*czm_frameNumber* 0.01), st.t));
+ material.alpha = colorImage.a * color.a;
+ material.diffuse = color.rgb;
+ return material;
}
`;
Cesium.Material._materialCache.addMaterial(
@@ -95,7 +104,8 @@ function LineTexture() {
uniforms: {
color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
image: '',
- imageW: 1,
+ repeat: 1.0,
+ speed: 1.0,
uTime: 1
},
source: Cesium.Material.LineTextureMaterialSource,
diff --git a/src/Obj/Materail/PolylineFlowMaterialProperty.js b/src/Obj/Materail/PolylineFlowMaterialProperty.js
index 79cb6df..95021fc 100644
--- a/src/Obj/Materail/PolylineFlowMaterialProperty.js
+++ b/src/Obj/Materail/PolylineFlowMaterialProperty.js
@@ -7,9 +7,11 @@ function PolylineFlow() {
this._definitionChanged = new Cesium.Event();
this._color = undefined;
this._speed = undefined;
+ this._rotate = undefined;
this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)");
- this.speed = options.speed || 0.25;//速度
+ this.speed = options.speed != undefined ? options.speed : 1.0;//速度
this.lineBackAlpha = options.lineBackAlpha || 0.05;
+ this.rotate = options.rotate;
}
get isConstant() {
@@ -41,6 +43,12 @@ function PolylineFlow() {
10,
result.speed
);
+ result.rotate = Cesium.Property.getValueOrDefault(
+ this._rotate,
+ time,
+ true,
+ result.rotate
+ );
result.lineBackAlpha = this.lineBackAlpha;
result.frameNumber = Cesium.getTimestamp();
return result;
@@ -60,6 +68,7 @@ function PolylineFlow() {
Object.defineProperties(PolylineFlowMaterialProperty.prototype, {
color: Cesium.createPropertyDescriptor("color"),
speed: Cesium.createPropertyDescriptor("speed"),
+ rotate: Cesium.createPropertyDescriptor("rotate"),
transparency: Cesium.createPropertyDescriptor("lineBackAlpha"),
});
@@ -78,11 +87,16 @@ function PolylineFlow() {
//获取st（uv）
vec2 st = materialInput.st;
//获取当前帧数，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);
//长度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 alpha = smoothstep(time-0.1,time,st.s) * step(-time,-st.s);
+ float alpha1 = smoothstep(time-0.1,time,1.0-st.s) * step(-time,- (1.0-st.s));
+ float alpha2 = smoothstep(time-0.1,time,st.s) * step(-time,- st.s);
+ float alpha =(speed== 0.0)? staticAlpha:(speed < 0.0)?alpha2:alpha1;
//光带轨迹（不会完全透明）
alpha += lineBackAlpha;
material.alpha = alpha;
@@ -99,6 +113,7 @@ function PolylineFlow() {
uniforms: {
color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
speed: 0.1,
+ rotate: true,
lineBackAlpha: 0.05,
},
source: Cesium.Material.PolylineFlowMaterialSource,
diff --git a/src/Obj/Materail/PolylineFlowMultMaterialProperty.js b/src/Obj/Materail/PolylineFlowMultMaterialProperty.js
index c9b64f2..473136c 100644
--- a/src/Obj/Materail/PolylineFlowMultMaterialProperty.js
+++ b/src/Obj/Materail/PolylineFlowMultMaterialProperty.js
@@ -7,9 +7,11 @@ function PolylineFlowMult() {
this._definitionChanged = new Cesium.Event();
this._color = undefined;
this._speed = undefined;
+ this._rotate = undefined;
this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)");
- this.speed = options.speed || 0.1;//速度
+ this.speed = options.speed != undefined ? options.speed : 1.0;//速度
this.lineBackAlpha = options.lineBackAlpha || 0.05;
+ this.rotate = options.rotate;
}
get isConstant() {
@@ -41,6 +43,12 @@ function PolylineFlowMult() {
10,
result.speed
);
+ result.rotate = Cesium.Property.getValueOrDefault(
+ this._rotate,
+ time,
+ true,
+ result.rotate
+ );
result.lineBackAlpha = this.lineBackAlpha;
result.frameNumber = Cesium.getTimestamp();
return result;
@@ -52,6 +60,7 @@ function PolylineFlowMult() {
(other instanceof PolylineFlowMultMaterialProperty &&
Cesium.Property.equals(this._color, other._color) &&
Cesium.Property.equals(this._speed, other.speed) &&
+ Cesium.Property.equals(this._rotate, other.rotate) &&
Cesium.Property.equals(this.lineBackAlpha, other.lineBackAlpha))
);
}
@@ -60,6 +69,7 @@ function PolylineFlowMult() {
Object.defineProperties(PolylineFlowMultMaterialProperty.prototype, {
color: Cesium.createPropertyDescriptor("color"),
speed: Cesium.createPropertyDescriptor("speed"),
+ rotate: Cesium.createPropertyDescriptor("rotate"),
transparency: Cesium.createPropertyDescriptor("lineBackAlpha"),
});
@@ -80,27 +90,47 @@ function PolylineFlowMult() {
float baseTime = fract(czm_frameNumber * speed / 60.0) * 1.1;
// 高频时间轴（控制高光点）
- 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 highlightSpacing = 0.3; // 高光点间隔
// 主光带透明度计算
float mainAlpha = smoothstep(baseTime-0.1, baseTime, st.s) * step(-baseTime, -st.s);
// 多高光点计算（3个周期性光斑）
- float highlight1 = smoothstep(highlightTime-0.05, highlightTime, st.s) *
+ float highlight11 = smoothstep(highlightTime-0.05, highlightTime, st.s) *
step(-highlightTime, -st.s) *
(1.0 - smoothstep(0.0, highlightSpacing, abs(st.s - highlightTime)));
- float highlight2 = smoothstep(highlightTime+highlightSpacing-0.05,
+ float highlight21 = smoothstep(highlightTime+highlightSpacing-0.05,
highlightTime+highlightSpacing, st.s) *
step(-(highlightTime+highlightSpacing), -st.s) *
(1.0 - smoothstep(0.0, highlightSpacing, abs(st.s - (highlightTime+highlightSpacing))));
- float highlight3 = smoothstep(highlightTime+2.0*highlightSpacing-0.05,
+ float highlight31 = smoothstep(highlightTime+2.0*highlightSpacing-0.05,
highlightTime+2.0*highlightSpacing, st.s) *
step(-(highlightTime+2.0*highlightSpacing), -st.s) *
(1.0 - smoothstep(0.0, highlightSpacing, abs(st.s - (highlightTime+2.0*highlightSpacing))));
+
+ float highlight12 = smoothstep(highlightTime-0.05, highlightTime, 1.0 - st.s) *
+ step(-highlightTime, -(1.0-st.s)) *
+ (1.0 - smoothstep(0.0, highlightSpacing, abs(1.0 - st.s - highlightTime)));
+
+ float highlight22 = smoothstep(highlightTime+highlightSpacing-0.05,
+ highlightTime+highlightSpacing, 1.0 - st.s) *
+ step(-(highlightTime+highlightSpacing),-(1.0 - st.s)) *
+ (1.0 - smoothstep(0.0, highlightSpacing, abs(1.0-st.s - (highlightTime+highlightSpacing))));
+
+ float highlight32 = smoothstep(highlightTime+2.0*highlightSpacing-0.05,
+ highlightTime+2.0*highlightSpacing, 1.0 - st.s) *
+ step(-(highlightTime+2.0*highlightSpacing), -(1.0-st.s)) *
+ (1.0 - smoothstep(0.0, highlightSpacing, abs(1.0 - st.s - (highlightTime+2.0*highlightSpacing))));
+
+
+ float highlight1 = !rotate?highlight11:highlight12;
+ float highlight2 = !rotate?highlight21:highlight22;
+ float highlight3 = !rotate?highlight31:highlight32;
// 合并效果
// material.alpha = mainAlpha * 0.7 +
// (highlight1 + highlight2 + highlight3) * 0.5 +
@@ -120,6 +150,7 @@ function PolylineFlowMult() {
uniforms: {
color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
speed: 0.1,
+ rotate: true,
lineBackAlpha: 0.05,
},
source: Cesium.Material.PolylineFlowMaterialSource,
diff --git a/src/Tools/index.js b/src/Tools/index.js
index 53c0fe5..6a8e9a4 100644
--- a/src/Tools/index.js
+++ b/src/Tools/index.js
@@ -10,6 +10,7 @@ import { Proj } from './proj'
import { open as projConvertOpen, close as projConvertClose } from './projConvert'
import { open as projectionConvertOpen, close as projectionConvertClose } from './projectionConvert'
import { setActiveViewer, closeRotateAround, closeViewFollow } from '../Global/global'
+import FlowPictureMaterialProperty from '../Obj/Materail/FlowPictureMaterialProperty'
class Tools {
/**
@@ -513,8 +514,11 @@ class Tools {
return res
}
- getMaterial(color = '#2ab0c2', type = 0) {
+ getMaterial(color = '#2ab0c2', type = 0, entity = null, newParam = {}) {
let material = ''
+
+
+
switch (Number(type)) {
case 1: //虚线
@@ -531,60 +535,51 @@ class Tools {
break
case 3: //尾迹光线
material = new Cesium.PolylineFlowMaterialProperty({
- color: color
+ color: color,
+ speed: newParam.rotate ? newParam.speed : 0 - newParam.speed,
+ rotate: newParam.rotate
})
break
case 4: //多尾迹光线
material = new Cesium.PolylineFlowMultMaterialProperty({
- color: color
+ color: color,
+ speed: newParam.rotate ? newParam.speed : 0 - newParam.speed,
+ rotate: newParam.rotate
})
break
case 5: //普通流动虚线
material = new Cesium.FlowDashedLineFlowMaterialProperty({
color: color,
- uType: 0
+ uType: 0,
+ speed: newParam.rotate ? newParam.speed : 0 - newParam.speed,
+ // dashSize: newParam.dashSize,
+ space: newParam.space
})
break
case 6: //流动虚线2
material = new Cesium.FlowDashedLineFlowMaterialProperty({
color: color,
- uType: 1
+ uType: 1,
+ speed: newParam.rotate ? newParam.speed : 0 - newParam.speed,
+ // dashSize: newParam.dashSize,
+ space: newParam.space
})
break
case 7: //流动箭头1
- material = new Cesium.LineTextureMaterialProperty({
+ case 8: //流动箭头2
+ case 9: //流动箭头3
+ case 10: //流动箭头4
+ case 11: //流动箭头5
+ case 12: //流动箭头6
+ let param = {
color: color,
- image: this.getSourceRootPath() + '/img/arrow/2.png',
- // imageW: 172
- })
- // let that = this
- // var curCanvas = 'a';
- // let i = 0;
- // function drawCanvasImage(time, result) {
- // let canvas = document.createElement('canvas');
- // canvas.id = "canvas-" + curCanvas;
- // // document.getElementById('app').appendChild(canvas)
- // // var canvas = document.getElementById("canvas-" + curCanvas);
- // let cwidth = 494;
- // let cheight = 172;
- // var ctx = canvas.getContext("2d");
- // var img = new Image();
- // img.src = that.getSourceRootPath() + '/img/arrow/1.png';
- // ctx.clearRect(0, 0, cwidth, cheight);
- // img.onload = function () {
- // if (i <= cwidth) {
- // ctx.drawImage(img, i, 0);
- // } else
- // i = 0;
- // i += 3;
- // }
- // curCanvas = curCanvas === 'a' ? 'b' : 'a';
- // return canvas;
- // }
- // material = new Cesium.ImageMaterialProperty({
- // image: new Cesium.CallbackProperty(drawCanvasImage, false),
- // transparent: true
- // })
+ image: this.getSourceRootPath() + `/img/arrow/${type - 6}.png`,
+ space: newParam.space,
+ speed: newParam.speed
+ }
+ param.speed = newParam.rotate ? param.speed : 0 - param.speed
+ this.getFlowTexture(this, param, entity)
+
break
default:
material = Cesium.Color.fromCssColorString(color)
@@ -592,6 +587,79 @@ class Tools {
}
return material
}
+ getFlowTexture(that, options, entity) {
+
+ const canvasEle = document.createElement('canvas');
+ const ctx = canvasEle.getContext('2d')
+ const myImg = new Image()
+ // myImg.src = that.getSourceRootPath() + '/img/arrow/1.png'
+ myImg.src = options.image
+ myImg.onload = function () {
+ if (options.speed > 0 || options.speed == 0) {
+ canvasEle.width = myImg.width * (options.space + 1)
+ canvasEle.height = myImg.height
+ ctx.drawImage(myImg, myImg.width * (options.space / 2), 0)
+ } else {
+ ctx.clearRect(0, 0, canvasEle.width, canvasEle.height);
+ ctx.save(); // 保存当前状态
+ canvasEle.width = myImg.width * (options.space + 1)
+ canvasEle.height = myImg.height
+ ctx.translate(canvasEle.width / 2, canvasEle.height / 2); // 移动原点至中心
+ ctx.rotate(Math.PI); // （弧度制）
+ ctx.drawImage(myImg, -myImg.width * (options.space / 2), -myImg.height / 2)
+ ctx.restore(); // 恢复状态
+ }
+
+ // let repeat = getRepeat()
+ // }, false)
+ 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);
+
+ 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 / ((myImg.width / myImg.height * 5) + 1);
+ repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1);
+ // if (repeatX < 3) {
+ // repeatX = 3
+ // }
+ // return new Cesium.Cartesian2(repeatX, 1.0);
+ return repeatX;
+ })
+ }
+ )
+ }
+ }
/*创建直箭头图片*/
create_arrow1_picture(color) {
diff --git a/static/custom/css/index.css b/static/custom/css/index.css
index bf4ec1e..eadf7ca 100644
--- a/static/custom/css/index.css
+++ b/static/custom/css/index.css
@@ -2594,7 +2594,9 @@
.YJ-custom-base-dialog.polyline>.content {
width: 580px;
}
-
+.YJ-custom-base-dialog.polyline>.content>div #dashTextureDom {
+ display: none;
+}
.YJ-custom-base-dialog.polyline>.content>div .row .col {
margin: 0 10px;
}
@@ -2643,6 +2645,8 @@
max-height: 185px;
}
+
+
/* 贴地图片 */
.YJ-custom-base-dialog.ground-image>.content {
width: 500px;