动态材质

---

import {
  Viewer,
  GradualLightRingMaterialProperty,
  DynamicMaterial,
  DynamicMaterialProperty
} from "joDVF";
import {
  Cartesian3,
  Color,
  GeometryInstance,
  GroundPolylineGeometry,
  Cartesian2,
  GroundPolylinePrimitive,
  Appearance,
  RenderState
} from "joCesium";

const { mapContainer, uiContainer } = createContainer();

const viewer = new Viewer(mapContainer);

// 动态墙
const entity = viewer.entities.add({
  name: "DynamicWall",
  wall: {
    positions: Cartesian3.fromDegreesArray([
      113.41517, 23.18128, 113.41695, 23.17999, 113.4184, 23.18195, 113.4165,
      23.18332
    ]),
    maximumHeights: [100, 100, 100, 100],
    minimumHeights: [38.9, 44, 34.7, 34.4],
    material: new GradualLightRingMaterialProperty({
      color: new Color(0.23, 0.67, 0.9, 1.0),
      rate: 1,
      repeatNum: 5
    })
  }
});

viewer.flyTo(entity);
const geometryInstances = new GeometryInstance({
  geometry: new GroundPolylineGeometry({
    positions: Cartesian3.fromDegreesArray([
      113.41581, 23.1772, 113.41735, 23.17996, 113.41927, 23.18273, 113.41988,
      23.1875
    ]),
    width: 20
  }),
  id: "GroundPolylineGeometry"
});

const dynamicMaterial = new DynamicMaterial({
  image: "./images/img/arrow.png",
  speed: 5,
  repeat: new Cartesian2(20, 1),
  color: Color.GREEN
});

viewer.scene.groundPrimitives.add(
  new GroundPolylinePrimitive({
    geometryInstances: geometryInstances,
    appearance: new Appearance({
      material: dynamicMaterial,
      renderState: new RenderState()
    })
  })
);

// 动态墙
viewer.entities.add({
  name: "DynamicWall",
  wall: {
    positions: Cartesian3.fromDegreesArrayHeights([
      113.4144, 23.1797, 10.1, 113.4168, 23.1797, 4, 113.41936, 23.18086, 22,
      113.4202, 23.1834, 14, 113.4175, 23.18406, 8, 113.4156, 23.18321, 9
    ]),
    maximumHeights: [100, 100, 100, 100, 100, 100],
    minimumHeights: [38.9, 44, 34.7, 34.4, 34.7, 34.4],
    material: new DynamicMaterialProperty({
      color: Color.YELLOW,
      duration: 2000,
      image: "./images/img/flowLine.png",
      repeat: new Cartesian2(1, 1)
    })
  }
});
function createContainer() {
  const container = document.createElement("div");
  container.style.width = "100%";
  container.style.height = "100%";

  const uiContainer = document.createElement("div");
  uiContainer.style.position = "fixed";
  uiContainer.style.top = "5px";
  uiContainer.style.left = "5px";
  document.body.appendChild(container);
  document.body.appendChild(uiContainer);

  return {
    mapContainer: container,
    uiContainer
  };
}