cesium 鼠标动态绘制墙及墙动效

实现在cesium中基于鼠标动态绘制墙功能

1. 基本架构设计

绘制墙的交互与绘制线的交互几乎一模一样，只是一些生成wall实体的计算方法不一样，所以可以看这篇文章 cesium 鼠标动态绘制线及线动效 juejin.cn/post/728826... 了解相关的架构设计

2. 关键代码实现

2.1 绘制线交互相关事件

事件绑定相关与动态绘制线一样，这里不再重复代码

绘制形状代码有区别： 为了实现墙贴地，要实时计算minimumHeights，maximumHeights的值，min中算出地形高度，max中再地形高度的基础上再加上墙的高度

  /**
   * 绘制形状，用于内部临时画墙
   * @param positionData 位置数据
   * @param config 墙的配置项
   * @returns
   */
  private drawShape(positionData: Cartesian3[], config?: WallConfig) {
    const wallConfig = config || new WallConfig();
    const material = this.createMaterial(wallConfig);
    // @ts-ignore
    const pArray = positionData._callback();

    const shape = this.app.viewerCesium.entities.add({
      wall: {
        positions: positionData,
        material: material,
        maximumHeights: new CallbackProperty(() => {
          let heights: number[] = [];
          for (let i = 0; i < pArray.length; i++) {
            const cartographic = Cartographic.fromCartesian(pArray[i]);
            const height = cartographic.height;
            heights.push(height);
          }
          const data = Array.from(heights, (x) => x + wallConfig.height);
          return data;
        }, false),
        minimumHeights: new CallbackProperty(() => {
          let heights: number[] = [];
          for (let i = 0; i < pArray.length; i++) {
            const cartographic = Cartographic.fromCartesian(pArray[i]);
            const height = cartographic.height;
            heights.push(height);
          }
          const data = Array.from(heights);
          return data;
        }, false)
      }
    });
    return shape;
  }

2.2 创建材质相关

  /**
   * 创建材质
   * @param config 墙的配置项
   * @returns
   */
  private createMaterial(config: WallConfig) {
    let material = new ColorMaterialProperty(Color.fromCssColorString(config.style.color));
    if (config.style.particle.used) {
      material = new WallFlowMaterialProperty({
        image: config.style.particle.image,
        forward: config.style.particle.forward ? 1.0 : -1.0,
        horizontal: config.style.particle.horizontal,
        speed: config.style.particle.speed,
        repeat: new Cartesian2(config.style.particle.repeat, 1.0)
      });
    }

    return material;
  }

创建WallFlowMaterialProperty.js（具体为何如此请看这篇文章，cesium自定义材质 juejin.cn/post/728795...

import { Color, defaultValue, defined, Property, createPropertyDescriptor, Material, Event, Cartesian2 } from 'cesium';

const defaultColor = Color.TRANSPARENT;
import defaultImage from '../../../assets/images/effect/line-color-yellow.png';
const defaultForward = 1;
const defaultHorizontal = false;
const defaultSpeed = 1;
const defaultRepeat = new Cartesian2(1.0, 1.0);

class WallFlowMaterialProperty {
  constructor(options) {
    options = defaultValue(options, defaultValue.EMPTY_OBJECT);

    this._definitionChanged = new Event();
    // 定义材质变量
    this._color = undefined;
    this._colorSubscription = undefined;
    this._image = undefined;
    this._imageSubscription = undefined;
    this._forward = undefined;
    this._forwardSubscription = undefined;
    this._horizontal = undefined;
    this._horizontalSubscription = undefined;
    this._speed = undefined;
    this._speedSubscription = undefined;
    this._repeat = undefined;
    this._repeatSubscription = undefined;
    // 变量初始化
    this.color = options.color || defaultColor; //颜色
    this.image = options.image || defaultImage; //材质图片
    this.forward = options.forward || defaultForward;
    this.horizontal = options.horizontal || defaultHorizontal;
    this.speed = options.speed || defaultSpeed;
    this.repeat = options.repeat || defaultRepeat;
  }

  // 材质类型
  getType() {
    return 'WallFlow';
  }

  // 这个方法在每次渲染时被调用，result的参数会传入glsl中。
  getValue(time, result) {
    if (!defined(result)) {
      result = {};
    }

    result.color = Property.getValueOrClonedDefault(this._color, time, defaultColor, result.color);
    result.image = Property.getValueOrClonedDefault(this._image, time, defaultImage, result.image);
    result.forward = Property.getValueOrClonedDefault(this._forward, time, defaultForward, result.forward);
    result.horizontal = Property.getValueOrClonedDefault(this._horizontal, time, defaultHorizontal, result.horizontal);
    result.speed = Property.getValueOrClonedDefault(this._speed, time, defaultSpeed, result.speed);
    result.repeat = Property.getValueOrClonedDefault(this._repeat, time, defaultRepeat, result.repeat);

    return result;
  }

  equals(other) {
    return (
      this === other ||
      (other instanceof WallFlowMaterialProperty &&
        Property.equals(this._color, other._color) &&
        Property.equals(this._image, other._image) &&
        Property.equals(this._forward, other._forward) &&
        Property.equals(this._horizontal, other._horizontal) &&
        Property.equals(this._speed, other._speed) &&
        Property.equals(this._repeat, other._repeat))
    );
  }
}

Object.defineProperties(WallFlowMaterialProperty.prototype, {
  isConstant: {
    get: function get() {
      return (
        Property.isConstant(this._color) &&
        Property.isConstant(this._image) &&
        Property.isConstant(this._forward) &&
        Property.isConstant(this._horizontal) &&
        Property.isConstant(this._speed) &&
        Property.isConstant(this._repeat)
      );
    }
  },

  definitionChanged: {
    get: function get() {
      return this._definitionChanged;
    }
  },

  color: createPropertyDescriptor('color'),
  image: createPropertyDescriptor('image'),
  forward: createPropertyDescriptor('forward'),
  horizontal: createPropertyDescriptor('horizontal'),
  speed: createPropertyDescriptor('speed'),
  repeat: createPropertyDescriptor('repeat')
});

Material.WallFlowType = 'WallFlow';
Material._materialCache.addMaterial(Material.WallFlowType, {
  fabric: {
    type: Material.WallFlowType,
    uniforms: {
      // uniforms参数跟我们上面定义的参数以及getValue方法中返回的result对应，这里值是默认值
      color: defaultColor,
      image: defaultImage,
      forward: defaultForward,
      horizontal: defaultHorizontal,
      speed: defaultSpeed,
      repeat: defaultRepeat
    },
    // source编写glsl，可以使用uniforms参数，值来自getValue方法的result
    source: `czm_material czm_getMaterial(czm_materialInput materialInput)
    {
      czm_material material = czm_getDefaultMaterial(materialInput);

      vec2 st = materialInput.st;
      vec4 fragColor;
      if (horizontal) {
        fragColor = texture(image, fract(vec2(st.s - speed*czm_frameNumber*0.005*forward, st.t)*repeat));
      } else {
        fragColor = texture(image, fract(vec2(st.t - speed*czm_frameNumber*0.005*forward, st.t)*repeat));
      }

      material.emission = fragColor.rgb;
      material.alpha = fragColor.a;

      return material;
    }`
  },
  translucent: true
});

export { WallFlowMaterialProperty };

2.3 添加wall实体

  /**
   * 根据已知数据添加一个墙
   * @param config 墙的配置项
   */
  add(config: WallConfig) {
    const configCopy = cloneDeep(config);

    const positions = configCopy.positions;

    const material = this.createMaterial(configCopy);

    let distance = new DistanceDisplayCondition();
    if (configCopy.distanceDisplayCondition) {
      distance = new DistanceDisplayCondition(
        configCopy.distanceDisplayCondition.near,
        configCopy.distanceDisplayCondition.far
      );
    }

    let heights: number[] = [];
    for (let i = 0; i < positions.length; i++) {
      const cartographic = Cartographic.fromCartesian(positions[i]);
      const height = cartographic.height;
      heights.push(height);
    }

    this.app.viewerCesium.entities.add({
      id: 'wallEntity_' + configCopy.id,
      wall: {
        positions: positions,
        maximumHeights: Array.from(heights, (x) => x + configCopy.height),
        minimumHeights: Array.from(heights),
        material: material,
        distanceDisplayCondition: distance
      }
    });

    this._wallConfigList.set('wallEntity_' + configCopy.id, config);
  }

3. 业务端调用

调用方式与动态绘制线一样，是同一种架构设计，这里不再重复代码

4. 效果