cesium添加流动线

最新推荐文章于 2024-07-30 22:36:34 发布

李富贵~

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量131

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/iouytrep/article/details/140772980

版权

1：新建Spriteline1MaterialProperty.js文件

import * as Cesium from 'cesium';

export function Spriteline1MaterialProperty(duration, image) {
  this._definitionChanged = new Cesium.Event();
  this.duration = duration;
  this.image = image;
  this._time = performance.now();
}
Object.defineProperties(Spriteline1MaterialProperty.prototype, {
  isConstant: {
    get: function () {
      return false;
    },
  },
  definitionChanged: {
    get: function () {
      return this._definitionChanged;
    },
  },
  color: Cesium.createPropertyDescriptor('color'),
  duration: Cesium.createPropertyDescriptor('duration'),
});
Spriteline1MaterialProperty.prototype.getType = function (time) {
  return 'Spriteline1';
};
Spriteline1MaterialProperty.prototype.getValue = function (time, result) {
  if (!Cesium.defined(result)) {
    result = {};
  }
  result.image = this.image;
  result.time = ((performance.now() - this._time) % this.duration) / this.duration;
  return result;
};
Spriteline1MaterialProperty.prototype.equals = function (e) {
  return this === e || (e instanceof Spriteline1MaterialProperty && this.duration === e.duration);
};
Cesium.Spriteline1MaterialProperty = Spriteline1MaterialProperty;
Cesium.Material.Spriteline1Type = 'Spriteline1';
Cesium.Material.Spriteline1Source = `
czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st;
vec4 colorImage = texture(image, vec2(fract(st.s - time), st.t));
material.alpha = colorImage.a;
material.diffuse = colorImage.rgb * 1.5 ;
return material;
}
`;
// st :二维纹理坐标
// czm_material：保存可用于照明的材质信息
Cesium.Material._materialCache.addMaterial(Cesium.Material.Spriteline1Type, {
  fabric: {
    type: Cesium.Material.Spriteline1Type,
    uniforms: {
      color: new Cesium.Color(1, 0, 0, 0.5),
      image: '',
      transparent: true,
      time: 20,
    },
    source: Cesium.Material.Spriteline1Source,
  },
  translucent: function (material) {
    return true;
  },
});

2：vue组件引用

import './js/Spriteline1MaterialProperty';

 var dataSource = new Cesium.CzmlDataSource();
    window.viewer.dataSources.add(dataSource);   
 dataSource.load('SampleData/Scenario4.czml').then(function (res) {
   
      res.entities.values.forEach((item) => {
       if (item.id == 'Satellite/Geoeye1-to-Satellite/ISS') {
 
          item.polyline.material = new Cesium.Spriteline1MaterialProperty(
            10000,
            '/gltfModel/images/line-tarans.png',
          );

        }
      });
    });