const MaterialType = "PolylineDashImageMaterial";
function PolylineDashImageMaterialProperty(option) {
if (option.url && typeof option.url === "string") {
this.url = option.url;
} else {
throw new Error("url is not a string");
}
this._color = undefined;
this._definitionChanged = new Cesium.Event();
this._time = (new Date()).getTime();
if (option.color && option.color instanceof Cesium.Color) {
this.color = option.color;
} else {
this.color = Cesium.Color.RED.withAlpha(0.5)
}
if (option.duration && typeof option.duration === "number" && option.duration > 0) {
this.duration = option.duration;
} else {
this.duration = 10;
}
if (option.repeatPixel && typeof option.repeatPixel === "number" && option.repeatPixel > 0) {
this.repeatPixel = option.repeatPixel;
} else {
this.repeatPixel = 200;
}
}
Object.defineProperties(PolylineDashImageMaterialProperty.prototype, {
isConstant: {
get: function () {
return false;
}
},
definitionChanged: {
get: function () {
return this._definitionChanged;
}
},
color: Cesium.createPropertyDescriptor('color')
});
PolylineDashImageMaterialProperty.prototype.getType = () => {
return MaterialType;
}
PolylineDashImageMaterialProperty.prototype.getValue = function (time, result) {
if (!Cesium.defined(result)) {
result = {};
}
result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
result.image = this.url;
result.repeatPixel = this.repeatPixel;
result.time = (((new Date()).getTime() - this._time) % (this.duration * 1000)) / (this.duration * 1000);
return result;
}
PolylineDashImageMaterialProperty.prototype.equals = (other) => {
return this === other
}
Cesium.Material._materialCache.addMaterial(MaterialType, {
fabric: {
type: MaterialType,
uniforms: {
color: Cesium.Color.RED.withAlpha(0.5),
image: Cesium.Material.DefaultImageId,
time: 0.0,
repeatPixel: 300
},
source:
`
in float v_polylineAngle;
mat2 rotate(float rad) {
float c = cos(rad);
float s = sin(rad);
return mat2(
c, s,
-s, c
);
}
czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st;
vec2 pos = rotate(v_polylineAngle) * gl_FragCoord.xy;
float pos_x = pos.x;
float dashPosition = fract(pos_x / (repeatPixel * czm_pixelRatio));
vec4 colorImage = texture(
image,
vec2(fract(dashPosition - time), fract(st.t))
);
material.alpha = colorImage.a;
material.diffuse = color.rgb;
return material;
}
`
},
translucent: () => {
return true;
}
});
const positions = [
[118.8958776368, 31.9551742856, 37],
[118.8952529569, 31.9556593492, 37],
[118.895163408, 31.9555758481, 37],
[118.8951946168, 31.95555155, 37]
]
viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(
function () {
let arr = []
for (let i = 0; i < positions.length; i++) {
arr.push(positions[i][0], positions[i][1], positions[i][2])
}
return arr
}()
),
width: 30,
material: new PolylineDashImageMaterialProperty({
url: "/img/arrow2.png",
color: Cesium.Color.YELLOW,
repeatPixel: 200,
duration: 10
}),
},
});
viewer.zoomTo(viewer.entities)
Hello everyone,When I zoom in the camera, the texture direction will change to the opposite.
Can someone help me answer this,thanks!