自定义控件特效等

约 485 字大约 2 分钟

2025-01-25

自定义控件类

类似图层一样，主要是对 _mountedHook、_addedHook、_removedHook这3个关键钩子方法的复写即可。

示例：

class PoiQueryButton extends mars3d.control.BaseControl {
/**
   * 创建_container控件容器对象的方法，
   * 只会调用一次
   * @return {Promise<object>}  无
   * @private
   */
  _mountedHook() {
    // 一般写_container的创建
  }

  /**
   * 对象添加到地图上的创建钩子方法，
   * 每次add时都会调用
   * @return {void}  无
   */
  _addedHook() {
    // 一般里面写初始化对象、绑定事件等处理逻辑
  }

  /**
   * 对象从地图上移除的创建钩子方法，
   * 每次remove时都会调用
   * @return {void}  无
   */
  _removedHook() {
    // 一般里面写相关销毁、释放事件等处理逻辑
  } 
}
// 注册下，可以Map初始化时参数化创建
mars3d.ControlUtil.register("poiQueryBtn", PoiQueryButton)

自定义特效类

主要是对 _mountedHook这个关键钩子方法的复写即可。

示例：

class BlackAndWhiteEffect extends mars3d.effect.BaseEffect {
  /**
   * 渐变
   * @type {number}
   */
  get gradations() {
    return this.options.gradations
  }

  set gradations(value) {
    this.options.gradations = value
    if (this._postProcessStage) {
      this._postProcessStage.uniforms.gradations = value
    }
  }

  /**
   * 创建_postProcessStage效果对象的方法
   * 只会调用一次
   * @return {void}  无
   * @private
   */
  _mountedHook() {
    this._postProcessStage = Cesium.PostProcessStageLibrary.createBlackAndWhiteStage()
    this._postProcessStage.uniforms.gradations = this.options.gradations ?? 4.0
  }
}

// 注册下，可以Map初始化时参数化创建
mars3d.ControlUtil.register("blackAndWhite", BlackAndWhiteEffect)

自定义Thing类

主要是对 _mountedHook、_addedHook、_removedHook这3个关键钩子方法的复写即可。

示例：

class Shadows extends mars3d.thing.BaseThing {
  /**
   * 对象添加到地图前创建一些对象的钩子方法，
   * 只会调用一次
   * @return {void}  无
   * @private
   */
  _mountedHook() {
    //
  }

  /**
   * 对象添加到地图上的创建钩子方法，
   * 每次add时都会调用
   * @return {void}  无
   */
  _addedHook() {
    // 一般里面写初始化对象、绑定事件等处理逻辑
  }

  /**
   * 对象从地图上移除的创建钩子方法，
   * 每次remove时都会调用
   * @return {void}  无
   */
  _removedHook() {
    // 一般里面写相关销毁、释放事件等处理逻辑
  } 
}
// 注册下，可以Map初始化时参数化创建
mars3d.ThingUtil.register("shadows", Shadows)