Cesium流动线纹理注：流动效果使⽤的图⽚是渐进⾊ colors.png
colors1.png
Cesium流动线效果.gif
1.扩展类PolylineTrailMaterialProperty (Cesium 1.67-1.68)
import Cesium from "cesium/Cesium";
export class PolylineTrailMaterialProperty {
constructor(options) {
options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT); this._definitionChanged = new Cesium.Event();
this._color = undefined;
this._colorSubscription = undefined;span80
this.duration = options.duration;
}
Cesium.defineProperties(PolylineTrailMaterialProperty.prototype, {
isConstant: {
get: function() {
return false;
}
},
definitionChanged: {
get: function() {
return this._definitionChanged;
}
},
color: atePropertyDescriptor('color')
});
Type = function(time) {
return 'PolylineTrail';
}
Value = function(time, result) {
if (!Cesium.defined(result)) {
result = {};
}
result.image = ailImage;
result.time = ((w() - this._time) % this.duration) / this.duration;
return result;
}
(other instanceof PolylineTrailMaterialProperty &&
Cesium.Property.equals(this._color, other._color))
}
Cesium.Material.PolylineTrailType = 'PolylineTrail';
Cesium.Material.PolylineTrailImage = "images/colors.png";
Cesium.Material.PolylineTrailSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
{\n\
czm_material material = czm_getDefaultMaterial(materialInput);\n\
速记机vec2 st = materialInput.st;\n\
vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\ material.alpha = colorImage.a * color.a;\n\
material.diffuse = (b)/2.0;\n\
return material;\n\
}";
Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailType, {
fabric: {
type: Cesium.Material.PolylineTrailType,51ra
uniforms: {氢氧切割机
color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
image: Cesium.Material.PolylineTrailImage,
time: 0
},
source: Cesium.Material.PolylineTrailSource
},
translucent: function(material) {
}
2.使⽤
<template>
<div class="fullSize" id="cesiumContainer"></div>
</template>
<script>
import "cesium/Widgets/widgets.css";
import Cesium from "cesium/Cesium";
import CesiumFactory from "@/js/cesium/CesiumFactory";
import PolylineTrailMaterialProperty from "@/js/cesium/overlay/PolylineTrailMaterialProperty"; export default {
name: "CesiumDynamicLine1",
data() {
return {
viewer: null
};
},
mounted() {
const factory = new CesiumFactory();
this.viewer = Viewer();
},
methods: {
create() {
var data = {
center: {
id: 0,
size: 20,
color: Cesium.Color.PURPLE
},
points: [
{
id: 1,
lon: 115.028495718,
lat: 30.200814617,
color: Cesium.Color.YELLOW, size: 15
},
{
id: 2,
lon: 110.795000473,
lat: 32.638540762,
color: Cesium.Color.RED,
size: 15
},
{
id: 3,
lon: 111.267729446,
lat: 30.698151246,
color: Cesium.Color.BLUE,
size: 15
},
{
id: 4,
