MapGIS Client for JavaScript API

import {
  BaseFeatureLayerView,
  Log,
  RendererType
} from '@mapgis/webclient-common'
import * as L from '@mapgis/leaflet'
import { reorderGraphicLayer } from './Utils'
import LeafletPlugin from '../../util/LeafletPlugin'
import ThemeRenderUtil from './ThemeRenderUtil'

// 要素渲染基类封装
class FeatureRenderView extends BaseFeatureLayerView {
  /**
   * 添加图层视图
   * @param {LayerEvent} event 图层事件
   * @return {Promise<LayerView>} 图层视图
   */
  onAdd(event) {
    return this._addInnerLayer()
  }

  /**
   * @description: 解析矢量数据
   * @return {FeatureSet}
   */
  _processData() {
    return new Promise((resolve) => {})
  }

  /**
   * 移除图层视图
   * @param {LayerEvent} event 图层事件
   * @return {Promise<LayerView>} 图层视图
   */
  onRemove(event) {
    super.onRemove(event)
    this.innerView.removeLayer(this.innerLayer)
    this.innerLayer = null
    return Promise.resolve(this)
  }

  /**
   * 更新图层视图
   * @param {LayerViewUpdateEvent} event 图层事件
   * @return {Promise<LayerView>} 图层视图
   */
  onUpdate(event) {
    const layer = this.layer
    const innerLayer = this.innerLayer
    if (event.updateContent && innerLayer) {
      event.updateContent.forEach((layerUpdateCotent) => {
        if (
          layerUpdateCotent &&
          layerUpdateCotent.operationType === 'property'
        ) {
          switch (layerUpdateCotent.name) {
            case 'opacity': {
              LeafletPlugin.setVisibleOpacity(
                this.innerLayer,
                layer._opacity,
                layer._visible
              )
              break
            }
            case 'visible': {
              const flag = layerUpdateCotent.params[0]
              LeafletPlugin.setVisibleOpacity(
                this.innerLayer,
                layer._opacity,
                flag
              )
              break
            }
            default: {
              break
            }
          }
        }
        if (layerUpdateCotent && layerUpdateCotent.operationType === 'method') {
          switch (layerUpdateCotent.name) {
            case 'refresh': {
              this.innerView.removeLayer(this.innerLayer)
              this._addInnerLayer()
              break
            }
            default: {
              break
            }
          }
        }
      })
    }
    return Promise.resolve(this)
  }

  _addInnerLayer() {
    return this._processData().then((featureSet) => {
      const layer = this.layer
      const self = this
      const innerView = this.innerView
      const renderer = layer.renderer
      return new Promise((reslove) => {
        reorderGraphicLayer(this, function () {
          // 初始化图层
          self._initInnerLayer(layer, innerView, featureSet, renderer)
          // 添加到视图
          self.innerLayer.addTo(innerView)
        })
        reslove(self)
      })
    })
  }

  /**
   * @description: 初始化innnerLayer
   * @param {Layer} 初始化图层
   * @param {Object} innerView 地图
   * @param {FeatureSet} 预渲染要素
   * @param {Renderer} renderer
   * @return {L.Layer | null}
   */
  _initInnerLayer(layer, innerView, featureSet, renderer) {
    renderer = renderer || {}
    let innerLayer
    // 是否是common renderer
    let isCommonRenderer = false
    if (this._isCommonRenderer(renderer)) {
      isCommonRenderer = true
      // 创建图层
      innerLayer = L.featureGroup()
    } else {
      switch (renderer.type) {
        case RendererType.cluster: {
          innerLayer = L.markerClusterGroup()
          ThemeRenderUtil.renderCluster(
            innerLayer,
            layer,
            innerView,
            featureSet.features
          )
          break
        }
        default: {
          Log.error('无法解析renderer信息')
        }
      }
    }
    // 初始化透明度
    LeafletPlugin.setVisibleOpacity(innerLayer, layer._opacity, layer._visible)
    // 设置排序id 和 图层 id
    innerLayer.commonLayerId = layer.id
    innerLayer._realIndex = layer._realIndex
    // 设置innerLayer
    this.innerLayer = innerLayer
    // common层渲染,目前仅支持统一/单值/分段
    if (isCommonRenderer) {
      // 初始化FeatureCollection
      this._initFeatures(featureSet.features, renderer)
    }
    return innerLayer
  }

  /**
   * @description: 重载基类方法，监听renderer变化
   * @param {*} event
   * @return {*}
   */
  _rendererChangeAction(event) {
    // 源事件
    const { sourceEventData = {} } = event
    // 切换renderer
    if (sourceEventData.key === 'renderer') {
      const lastRenderer = sourceEventData.oldValue
      const currentRenderer = sourceEventData.value
      if (
        !(
          this._isCommonRenderer(lastRenderer) &&
          this._isCommonRenderer(currentRenderer)
        )
      ) {
        // 重载图层渲染
        this.innerView.removeLayer(this.innerLayer)
        this._addInnerLayer()
        return
      }
    }
    const renderer = this.layer.renderer
    if (this._isCommonRenderer(renderer)) {
      // 非common层渲染
      super._rendererChangeAction(event)
    } else {
      ThemeRenderUtil.updateCluster(this.innerLayer, this.layer, this.view)
    }
  }

  /**
   * @description: 是否为common层渲染图层
   * @param {*} renderer
   * @return {*}
   */
  _isCommonRenderer(renderer) {
    return (
      renderer &&
      [
        RendererType.classBreak,
        RendererType.simple,
        RendererType.uniqueValue,
        RendererType.random,
        RendererType.rank
      ].some((v) => v === renderer.type)
    )
  }
}
export default FeatureRenderView