基于cesium 动态墙

<template>
  <div id="app" class="app">
    <div id="cesiumContainer" />
  </div>
</template>
<script>
import dreawprimitiv from "@/assets/DreawPrimitive";
let viewer = null;
export default {
  name: "App",
  components: {},
  data() {
    return {};
  },
  computed: {},
  mounted() {
    Cesium.Ion.defaultAccessToken =
      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYTQ2ZjdjNS1jM2E0LTQ1M2EtOWM0My1mODMzNzY3YjYzY2YiLCJpZCI6MjkzMjcsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTE5NDIzNjB9.RzKlVTVDTQ9r7cqCo-PDydgUh8Frgw0Erul_BVxiS9c";
    viewer = new Cesium.Viewer("cesiumContainer", {
      baseLayerPicker: false, // 是否显示图层选择控件
      geocoder: false, // 是否显示地名查找控件
      sceneModePicker: false, // 是否显示投影方式控件
      navigationHelpButton: false, // 是否显示帮助信息控件
      shouldAnimate: true,
      selectionIndicator: false,
      homeButton: false,
      timeline: false,
      animation: false,
      fullscreenButton: false,
      showRenderLoopErrors: false,
      scene3DOnly: true, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
      infoBox: false // 是否显示点击要素之后显示的信息
    });
    this.getprimtive();
  },
  methods: {
    getprimtive() {
      var wallInstance = new Cesium.GeometryInstance({
        geometry: Cesium.WallGeometry.fromConstantHeights({
          positions: Cesium.Cartesian3.fromDegreesArrayHeights([
            -107.0,
            43.0,
            100000.0,
            -97.0,
            43.0,
            100000.0,
            -97.0,
            40.0,
            100000.0,
            -107.0,
            40.0,
            100000.0,
            -107.0,
            43.0,
            100000.0
          ]),
          maximumHeight: 100000.0,
          vertexFormat: Cesium.MaterialAppearance.VERTEX_FORMAT
        })
      });

      let image =
        "https://img-blog.csdnimg.cn/img_convert/e14ce92acfdbd8fa7deda63e4a780400.png"; //选择自己的动态材质图片
      let color = new Cesium.Color.fromCssColorString("rgba(0, 255, 255, 1)");
      let speed = 1.5;
      //头是内置方法头 默认状况下，材质的默认值会被返回：
      let source = `czm_material czm_getMaterial(czm_materialInput materialInput)\n\
{\n\
   //头是内置方 定义一个mater对象
    czm_material material = czm_getDefaultMaterial(materialInput);\n\
    //二维坐标
    vec2 st = materialInput.st;\n\
    //配置问2D纹理(抽取纹素颜色,纹理单元编号（从纹理坐标获取像素颜色），纹理坐标)
    vec4 colorImage = texture2D(image, vec2(fract((st.t - speed*czm_frameNumber*0.005)), 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\
}`;
      let material = new Cesium.Material({
        fabric: {
          type: "PolylineOutline",
          uniforms: {
            color: color,
            image: image,
            speed: speed
          },

          source: source
        },
        translucent: function() {
          return true;
        }
      });

      viewer.scene.primitives.add(
        new Cesium.Primitive({
          geometryInstances: [wallInstance],
          appearance: new Cesium.MaterialAppearance({
            material: material
          })
        })
      );
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body,
html,
#cesiumContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: absolute;
}

.app {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
}
</style>