281 lines
9.8 KiB
JavaScript
281 lines
9.8 KiB
JavaScript
|
import Tools from "../../Tools";
|
|||
|
|
|
|||
|
|
function StreamWall1() {
|
|||
|
|
//动态墙材质
|
|||
|
|
function PolylineTrailLinkMaterialProperty(options = {}) {
|
|||
|
|
this._definitionChanged = new Cesium.Event();
|
|||
|
|
this._color = undefined;
|
|||
|
|
this._colorSubscription = undefined;
|
|||
|
|
this.color = options.color;
|
|||
|
|
this.duration = options.duration;
|
|||
|
|
this.fltr = options.fltr;
|
|||
|
|
this.image = options.image;
|
|||
|
|
this._time = (new Date()).getTime();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
|
|||
|
|
isConstant: {
|
|||
|
|
get: function () {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
definitionChanged: {
|
|||
|
|
get: function () {
|
|||
|
|
return this._definitionChanged;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
repeat: Cesium.createPropertyDescriptor('repeat'),
|
|||
|
|
color: Cesium.createPropertyDescriptor('color')
|
|||
|
|
});
|
|||
|
|
PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
|
|||
|
|
return 'PolylineTrailLink';
|
|||
|
|
};
|
|||
|
|
PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {
|
|||
|
|
if (!Cesium.defined(result)) {
|
|||
|
|
result = {};
|
|||
|
|
}
|
|||
|
|
result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.BROWN, result.color);
|
|||
|
|
if (this.image) {
|
|||
|
|
result.image = this.image;
|
|||
|
|
} else {
|
|||
|
|
result.image = Cesium.Material.PolylineTrailLinkImage
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.duration) {
|
|||
|
|
result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
|
|||
|
|
}
|
|||
|
|
if (this.fltr === false) {
|
|||
|
|
result.fltr = this.fltr;
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
result.fltr = true;
|
|||
|
|
}
|
|||
|
|
return result;
|
|||
|
|
};
|
|||
|
|
PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
|
|||
|
|
return this === other ||
|
|||
|
|
(other instanceof PolylineTrailLinkMaterialProperty
|
|||
|
|
&& Cesium.Property.equals(this._color, other._color))
|
|||
|
|
};
|
|||
|
|
Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
|
|||
|
|
Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
|
|||
|
|
Cesium.Material.PolylineTrailLinkImage = create_gradient();
|
|||
|
|
Cesium.Material.PolylineTrailLinkSource =
|
|||
|
|
"czm_material czm_getMaterial(czm_materialInput materialInput)\n\
|
|||
|
|
{\n\
|
|||
|
|
czm_material material =czm_getDefaultMaterial(materialInput);\n\
|
|||
|
|
vec2 st = materialInput.st;\n\
|
|||
|
|
vec4 colorImage = texture(image,vec2(fract(st.t - time), st.t));\n\
|
|||
|
|
vec4 fragColor;\n\
|
|||
|
|
fragColor.rgb = color.rgb / 1.0;\n\
|
|||
|
|
fragColor = czm_gammaCorrect(fragColor);\n\
|
|||
|
|
material.alpha = colorImage.a * color.a;\n\
|
|||
|
|
material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\
|
|||
|
|
material.emission = fragColor.rgb;\n\
|
|||
|
|
return material;\n\
|
|||
|
|
}";
|
|||
|
|
Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {
|
|||
|
|
fabric: {
|
|||
|
|
type: Cesium.Material.PolylineTrailLinkType,
|
|||
|
|
uniforms: {
|
|||
|
|
// color: new Cesium.Color(1.0, 1.0, 1.0, 1),
|
|||
|
|
color: new Cesium.Color(1.0, 1.0, 1.0, 1),
|
|||
|
|
image: Cesium.Material.PolylineTrailLinkImage,
|
|||
|
|
time: 0
|
|||
|
|
},
|
|||
|
|
source: Cesium.Material.PolylineTrailLinkSource
|
|||
|
|
},
|
|||
|
|
translucent: function (material) {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
function StreamWall2() {
|
|||
|
|
let tools = new Tools()
|
|||
|
|
let _that = this
|
|||
|
|
if (typeof Cesium !== 'undefined') (function (Cesium) {
|
|||
|
|
/**
|
|||
|
|
* 自定义材质线Property 适用于entity和primitive材质
|
|||
|
|
* @param {object} options
|
|||
|
|
* @param source {string} glsl的shader代码
|
|||
|
|
* @param options.image {string} 图片地址
|
|||
|
|
*/
|
|||
|
|
function CustomMaterialSource(options = {}, source) {
|
|||
|
|
|
|||
|
|
var Color = Cesium.Color,
|
|||
|
|
defaultValue = Cesium.defaultValue,
|
|||
|
|
defineProperties = Object.defineProperties,
|
|||
|
|
Event = Cesium.Event,
|
|||
|
|
createPropertyDescriptor = Cesium.createPropertyDescriptor,
|
|||
|
|
Property = Cesium.Property,
|
|||
|
|
Material = Cesium.Material,
|
|||
|
|
MaterialType = options.MaterialType || 'wallType' + parseInt(Math.random() * 1000);
|
|||
|
|
|
|||
|
|
let uniforms = {
|
|||
|
|
color: new Cesium.Color(1.0, 1.0, 1.0, 1),
|
|||
|
|
image: options.image || tools.getSourceRootPath() + "/img/material/arrow.png",
|
|||
|
|
time: options.time || 0,
|
|||
|
|
repeat: new Cesium.Cartesian2(100.0, 100.0),
|
|||
|
|
fltr: options.fltr || options.fltr === false ? options.fltr : true,
|
|||
|
|
is2D: options.is2D ? true : false,
|
|||
|
|
isTranslucent: options.isTranslucent || options.isTranslucent === false ? options.isTranslucent : true,
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.code = ``
|
|||
|
|
if (options.repeats) {
|
|||
|
|
let repeats = Cesium.Property.getValueOrDefault(options.repeats);
|
|||
|
|
for (let i = 0; i < repeats.length; i++) {
|
|||
|
|
if (i !== 0) {
|
|||
|
|
this.code += `else `
|
|||
|
|
}
|
|||
|
|
uniforms['repeat' + (i + 1)] = new Cesium.Cartesian2(repeats[i][1] * (repeats.length + ((repeats.length - 1) * 3)), repeats[i][2])
|
|||
|
|
this.code += `if(materialInput.st.s < ${repeats[i][0]}) {
|
|||
|
|
repeat0 = repeat${i + 1};
|
|||
|
|
}`
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 创建自定义动态材质对象
|
|||
|
|
function PolylineCustomMaterialProperty(options = {}) {
|
|||
|
|
|
|||
|
|
options = defaultValue(options, defaultValue.EMPTY_OBJECT);
|
|||
|
|
// 定义内置属性
|
|||
|
|
this._definitionChanged = new Event();
|
|||
|
|
this._color = undefined;
|
|||
|
|
this._colorSubscription = undefined;
|
|||
|
|
this._repeat = undefined;
|
|||
|
|
this._repeats = undefined;
|
|||
|
|
this._repeatSubscription = undefined;
|
|||
|
|
this.image = options.image;
|
|||
|
|
this.is2D = options.is2D ? true : false;
|
|||
|
|
this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(4,253,231,0.87)");
|
|||
|
|
this.repeat = options.repeat;
|
|||
|
|
this.repeats = options.repeats;
|
|||
|
|
this.duration = (options.duration || options.duration === 0) ? options.duration : 1000
|
|||
|
|
this.fltr = options.fltr || options.fltr === false ? options.fltr : true
|
|||
|
|
this._time = new Date().getTime();
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 定义材质对象默认属性
|
|||
|
|
defineProperties(PolylineCustomMaterialProperty.prototype, {
|
|||
|
|
isvarant: {
|
|||
|
|
get: function () {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
definitionChanged: {
|
|||
|
|
get: function () {
|
|||
|
|
return this._definitionChanged;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
repeat: Cesium.createPropertyDescriptor('repeat'),
|
|||
|
|
color: createPropertyDescriptor('color')
|
|||
|
|
});
|
|||
|
|
// 材质对象需要有type函数 value函数 equals函数
|
|||
|
|
PolylineCustomMaterialProperty.prototype.getType = function (time) {
|
|||
|
|
return MaterialType;
|
|||
|
|
};
|
|||
|
|
PolylineCustomMaterialProperty.prototype.getValue = function (time, result) {
|
|||
|
|
if (!Cesium.defined(result)) {
|
|||
|
|
result = {};
|
|||
|
|
}
|
|||
|
|
result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
|
|||
|
|
result.time = this.duration ? (Cesium.getTimestamp() % this.duration) / this.duration : 0;
|
|||
|
|
result.image = this.image;
|
|||
|
|
result.is2D = this.is2D ? true : false;
|
|||
|
|
if (this.repeat) {
|
|||
|
|
result.repeat = Cesium.Property.getValueOrDefault(this.repeat);
|
|||
|
|
}
|
|||
|
|
if (this.repeats) {
|
|||
|
|
let repeats = Cesium.Property.getValueOrDefault(this.repeats);
|
|||
|
|
for (let i = 0; i < repeats.length; i++) {
|
|||
|
|
result['repeat' + (i + 1)] = new Cesium.Cartesian2(repeats[i][1] * (repeats.length + ((repeats.length - 1) * 3)), repeats[i][2])
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return result;
|
|||
|
|
};
|
|||
|
|
PolylineCustomMaterialProperty.prototype.equals = function (other) {
|
|||
|
|
return this === other || //
|
|||
|
|
(other instanceof PolylineCustomMaterialProperty &&
|
|||
|
|
Property.equals(this._color, other._color)) &&
|
|||
|
|
Property.equals(this.repeat, other._repeat) &&
|
|||
|
|
Property.equals(this.repeats, other._repeats)
|
|||
|
|
};
|
|||
|
|
// 将定义的材质对象添加到cesium的材质队列中
|
|||
|
|
Material._materialCache.addMaterial(MaterialType, {
|
|||
|
|
fabric: {
|
|||
|
|
type: MaterialType,
|
|||
|
|
uniforms: uniforms,
|
|||
|
|
// 动态材质shader
|
|||
|
|
source: `czm_material czm_getMaterial(czm_materialInput materialInput)
|
|||
|
|
{
|
|||
|
|
czm_material material = czm_getDefaultMaterial(materialInput);
|
|||
|
|
// vec2 repeat1 = materialInput.st.s < 0.5 ? vec2(100.0, 1.0) : vec2(200.0, 1.0);
|
|||
|
|
vec2 repeat0 = repeat;
|
|||
|
|
`+ this.code + `;
|
|||
|
|
vec2 st = repeat0 * materialInput.st;
|
|||
|
|
float f = -1.0;
|
|||
|
|
if(fltr==true) { f = 1.0; }
|
|||
|
|
vec4 colorImage = texture(image, vec2(fract(st.s - (time * f)), st.t));
|
|||
|
|
if(isTranslucent) {
|
|||
|
|
material.alpha = colorImage.a * color.a;
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
material.alpha = 1.0;
|
|||
|
|
}
|
|||
|
|
material.diffuse = colorImage.rgb*color.rgb*0.0;
|
|||
|
|
material.emission = colorImage.rgb*color.rgb * 1.4;
|
|||
|
|
return material;
|
|||
|
|
}`,
|
|||
|
|
components: {
|
|||
|
|
specular: 10.0,
|
|||
|
|
diffuse: "vec3(1.0)"
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
// 透明
|
|||
|
|
translucent: function (material) {
|
|||
|
|
return material.uniforms.isTranslucent
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
return new PolylineCustomMaterialProperty(options);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Cesium.CustomMaterialSource = CustomMaterialSource;
|
|||
|
|
})(Cesium);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function create_gradient(color = "#fa2020") {
|
|||
|
|
let width = 512
|
|||
|
|
let height = 32
|
|||
|
|
let canvas = new fabric.Canvas('canvas', {
|
|||
|
|
width,
|
|||
|
|
height
|
|||
|
|
});
|
|||
|
|
let rect1 = new fabric.Rect({
|
|||
|
|
width,
|
|||
|
|
height,
|
|||
|
|
});
|
|||
|
|
// 线性渐变
|
|||
|
|
let gradient = new fabric.Gradient({
|
|||
|
|
type: 'linear', // linear or radial
|
|||
|
|
gradientUnits: 'pixels', // pixels or pencentage 像素 或者 百分比
|
|||
|
|
coords: { x1: 0, y1: 0, x2: width, y2: 0 }, // 至少2个坐标对（x1，y1和x2，y2）将定义渐变在对象上的扩展方式
|
|||
|
|
colorStops: [ // 定义渐变颜色的数组
|
|||
|
|
{ offset: 0.01, color: "rgba(246,241,241,0)" },
|
|||
|
|
{ offset: 1, color }
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
rect1.set('fill', gradient)
|
|||
|
|
canvas.add(rect1)
|
|||
|
|
return canvas.toDataURL()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export { StreamWall1, StreamWall2, create_gradient }
|