类名 view/utils/IGSVectorTileLayerUtil.js
import { defaultValue } from '@mapgis/webclient-common'
import {
  removeLayer,
  setOpacity,
  setVisible,
  getPaintOptions,
  setPaintProperties,
  setLayoutProperties,
  setFilter,
  setLayerZoomRange,
  addSources,
  addLayers,
  getLayers,
  updateStyleLayer
} from './support/vectorLayerUtil'

/**
 * 实际加载图层的工具类
 * @private
 * */
class IGSVectorTileLayerUtil {}

/**
 * 添加地图图片图层
 * @param {IGSTileLayerView} layerView 图层视图对象
 * @param {Object} options 额外参数
 * @return {Object} 实际的图层对象
 * */
IGSVectorTileLayerUtil.addIGSVectorTileLayer = function (layerView, options) {
  options = defaultValue(options, {})
  const layer = layerView.layer
  const innerView = layerView.innerView

  // 先获取地图视图的样式
  const mapStyle = innerView.getStyle()

  // 判断是否设置了样式
  let isSetStyle = false

  // 设置字体
  if (mapStyle.glyphs !== layer.style.glyphs) {
    mapStyle.glyphs = layer.style.glyphs
    isSetStyle = true
  }

  // 设置雪碧图
  if (mapStyle.sprite !== layer.style.sprite) {
    mapStyle.sprite = layer.style.sprite
    isSetStyle = true
  }

  // 更新样式
  if (isSetStyle) {
    innerView.setStyle(mapStyle)
    // 更新样式后设置图层
    innerView.on('style.load', function () {
      // 添加矢量瓦片的Source
      addSources(layerView)
      // 添加矢量瓦片的Layer
      addLayers(layerView)
      // 执行回调函数
      if (options.callback && options.callback instanceof Function) {
        options.callback(getLayers(layerView))
      }
    })
  }
  // 不用更新样式,直接添加图层
  else {
    // 添加矢量瓦片的Source
    addSources(layerView)
    // 添加矢量瓦片的Layer
    addLayers(layerView)
    // 执行回调函数
    if (options.callback && options.callback instanceof Function) {
      options.callback(getLayers(layerView))
    }
  }
}

/**
 * 根据服务基地址和图层初始化参数,构造最终的URL地址
 * @param {String} url 服务基地址
 * @param {Object} options 图层初始化参数
 * @return {String} 最终的URL地址
 * */
IGSVectorTileLayerUtil.initLayerUrl = function (url, options) {
  const igsVersion = options.igsVersion
  if (igsVersion === '1.0') {
    url += '/{z}/{y}/{x}'
    if (options.tokenKey && options.tokenValue) {
      url += `?${options.tokenKey}=${options.tokenValue}`
    }
  } else {
    url = `${url}/tileImage/{z}/{y}/{x}?f=image`
    if (options.tokenKey && options.tokenValue) {
      url += `&${options.tokenKey}=${options.tokenValue}`
    }
  }
  return url
}

/**
 * 设置图层可见性
 * @param {IGSTileLayerView} layerView 图层视图对象
 * */
IGSVectorTileLayerUtil.setVisible = function (layerView) {
  setVisible(layerView)
}

/**
 * 设置图层透明度
 * @param {IGSTileLayerView} layerView 图层视图对象
 * */
IGSVectorTileLayerUtil.setOpacity = function (layerView) {
  setOpacity(layerView)
}

/**
 * 刷新图层
 * @param {IGSTileLayerView} layerView 图层视图对象
 * */
IGSVectorTileLayerUtil.refresh = function (layerView) {
  // 删除图层
  layerView.innerView.removeLayer(layerView.innerLayer.id)
  // 删除source
  layerView.innerView.removeSource(layerView.innerLayer.sourceID)
  // 重新添加layer和source
  layerView.innerLayer = IGSVectorTileLayerUtil.addIGSVectorTileLayer(
    layerView,
    {}
  )
}

/**
 * 删除图层
 * @param {IGSTileLayerView} layerView 图层视图对象
 * */
IGSVectorTileLayerUtil.removeLayer = function (layerView) {
  removeLayer(layerView)
}

/**
 * 设置图层的绘制属性
 * @param {IGSTileLayerView} layerView 图层视图对象
 * @param {Object} updateContent 事件内容
 * */
IGSVectorTileLayerUtil.setPaintProperties = function (
  layerView,
  updateContent
) {
  const paintOptions = getPaintOptions(updateContent)
  setPaintProperties(layerView, paintOptions.layerId, paintOptions.paints)
}

/**
 * 设置图层的布局属性
 * @param {IGSTileLayerView} layerView 图层视图对象
 * @param {Object} updateContent 事件内容
 * */
IGSVectorTileLayerUtil.setLayoutProperties = function (
  layerView,
  updateContent
) {
  const paintOptions = getPaintOptions(updateContent)
  setLayoutProperties(layerView, paintOptions.layerId, paintOptions.paints)
}

/**
 * 设置图层的过滤条件
 * @param {IGSTileLayerView} layerView 图层视图对象
 * @param {String} layerId 图层id
 * @param {String} filter 过滤条件
 * */
IGSVectorTileLayerUtil.setStyleLayerFilter = function (
  layerView,
  layerId,
  filter
) {
  setFilter(layerView, layerId, filter)
}

/**
 * 设置图层的显示范围
 * @param {IGSTileLayerView} layerView 图层视图对象
 * @param {String} layerId 图层id
 * @param {Number} minZoom 最小显示范围
 * @param {Number} maxZoom 最大显示范围
 * */
IGSVectorTileLayerUtil.setStyleLayerZoomRange = function (
  layerView,
  layerId,
  minZoom,
  maxZoom
) {
  setLayerZoomRange(layerView, layerId, minZoom, maxZoom)
}

/**
 * 更新所有矢量瓦片子图层
 * @param {IGSTileLayerView} layerView 图层视图对象
 * */
IGSVectorTileLayerUtil.updateStyleLayer = function (layerView) {
  updateStyleLayer(layerView)
}

export default IGSVectorTileLayerUtil
构造函数
成员变量
方法
事件