Mars3D开发者中心

外观

自定义矢量对象

约 646 字大约 2 分钟

2025-01-25

继承已有矢量对象，改写部分方法

示例：

class CurveEntity extends mars3d.graphic.PolylineEntity {
  constructor(options = {}) {
    super(options)

    // this._minPointNum = 2 // 至少需要点的个数
    // this._maxPointNum = 999 // 最多允许点的个数
  }

  getShowPositions(positions) {
    if (!positions || positions.length < 2) {
      return positions
    }
    return getBezierCurvePoints(positions, this.style)
  }
}

// 注册下, 可以再graphicLayer.startDraw中使用
mars3d.GraphicUtil.register("curveEntity", CurveEntity)

继承基类，内部自定义构造其他对象

完全自定义矢量对象时，注意 _mountedHook、_addedHook、_removedHook这3个关键钩子方法的复写即可。

示例：

class FloorGraphic extends mars3d.graphic.BasePointEntity {
  /**
   * 对象添加到图层前创建一些对象的钩子方法，
   * 只会调用一次
   * @return {Promise<object>}  无
   * @private
   */
  _mountedHook() {
    this._models = []

    const {point} = this // 楼栋位置
    const floorHeight = this.style.spacing // 每层层高,单位:米
    const floorCount = this.style.count // 总层数（不含楼顶）

    // 增加楼层
    for (let i = 0; i < floorCount; i++) {
      const alt = point.alt + i * floorHeight
      const model = new mars3d.graphic.ModelEntity({
        position: [point.lng, point.lat, alt],
        style: this.style,
        attr: {
          origAlt: alt // 记录原始高度
        }
      })
      this._models.push(model)
    }

    // 增加楼顶
    const topAlt = point.alt + floorCount * floorHeight
    const topModel = new mars3d.graphic.ModelEntity({
      position: [point.lng, point.lat, topAlt],
      style: {
        ...this.style,
        url: this.style.topUrl
      },
      attr: {
        origAlt: topAlt // 记录原始高度
      }
    })
    this._models.push(topModel)
  }

  /**
   * 对象添加到图层上的创建钩子方法，
   * 每次add时都会调用
   * @return {void}  无
   * @private
   */
  _addedHook() {
    this._models.forEach((model) => {
      this._layer.addGraphic(model)
    })
  }

  /**
   * 对象从图层上移除的创建钩子方法，
   * 每次remove时都会调用
   * @return {void}  无
   * @private
   */
  _removedHook() {
    this._models.forEach((model) => {
      this._layer.removeGraphic(model)
    })
  }

  /**
   * 展开所有楼层
   *
   * @param {number} height 展开的每层间隔高度，单位：米
   * @param {number} [time=4] 完全展开时间,单位:秒
   * @return {void}  无
   */
  openAll(height, time = 4) {
    this.reset()

    const {point} = this // 楼栋位置

    for (let i = 0; i < this._models.length; i++) {
      const model = this._models[i]

      const alt = i * height + model.attr.origAlt
      model.moveTo({
        position: [point.lng, point.lat, alt],
        time // 移动的时长(单位 秒)
      })
    }
  }

  /**
   * 合并所有楼层
   *
   * @param {number} [time=4] 完成合并时间,单位:秒
   * @memberof FloorGraphic
   * @returns {void}
   */
  mergeAll(time = 4) {
    const {point} = this // 楼栋位置

    for (let i = 0; i < this._models.length; i++) {
      const model = this._models[i]

      model.show = true
      model.moveTo({
        position: [point.lng, point.lat, model.attr.origAlt],
        time // 移动的时长(单位 秒)
      })
    }
  }

  /**
   * 还原重置所有楼层
   * @return {void}  无
   */
  reset() {
    const {point} = this // 楼栋位置

    for (let i = 0; i < this._models.length; i++) {
      const model = this._models[i]

      model.position = new mars3d.LngLatPoint(point.lng, point.lat, model.attr.origAlt)
      model.show = true
    }
  }

  /**
   * 显示指定楼层
   *
   * @param {Number} floorNum 指定显示的楼层，第1层开始
   * @param {Number} [time=1] 楼层下落需要时间,单位:秒
   * @return {void}  无
   */
  showFloor(floorNum, time = 1) {
    floorNum--

    const {point} = this // 楼栋位置
    const maxHeight = 120 // 顶部落下的高度

    for (let i = floorNum; i < this._models.length; i++) {
      const model = this._models[i]
      model.position = new mars3d.LngLatPoint(point.lng, point.lat, maxHeight)
      model.show = false
    }

    for (let j = 0; j <= floorNum; j++) {
      const model = this._models[j]

      model.show = true
      model.moveTo({
        position: [point.lng, point.lat, model.attr.origAlt],
        time // 移动的时长(单位 秒)
      })
    }
  }
}