MapGIS Client for JavaScript API

/**
 * 设置图层可见性
 * @param {LayerView} layerView 图层视图对象
 * */
function setVisible(layerView) {
  // 获取矢量瓦片中的所有图层
  const layers = layerView.layer.style.layers
  // 获取地图视图对象
  const innerView = layerView.innerView
  // 循环设置图层可见性
  for (let i = 0; i < layers.length; i++) {
    // 取图层可见性
    const visible = layerView._getLayerViewVisible()
    // 设置图层可见性
    innerView.setLayoutProperty(
      layers[i].id,
      'visibility',
      visible ? 'visible' : 'none'
    )
  }
}

/**
 * 删除图层
 * @param {LayerView} layerView 图层视图对象
 * */
function removeLayer(layerView) {
  // 获取矢量瓦片中的所有图层
  const layers = layerView.layer.style.layers
  // 获取矢量瓦片中的所有Source
  const sources = layerView.layer.style.sources
  // 获取地图视图对象
  const innerView = layerView.innerView
  // 先删除图层
  for (let i = 0; i < layers.length; i++) {
    if (innerView.getLayer(layers[i].id)) {
      innerView.removeLayer(layers[i].id)
    }
  }
  // 最后删除Source
  Object.keys(sources).forEach((key) => {
    if (innerView.getSource(key)) {
      innerView.removeSource(key)
    }
  })
}

/**
 * 设置图层透明度
 * @param {LayerView} layerView 图层视图对象
 * */
function setOpacity(layerView) {
  // 基础图层对象
  const commonLayer = layerView.layer
  // 获取矢量瓦片中的所有图层
  const layers = layerView.layer.style.layers
  // 获取地图视图对象
  const innerView = layerView.innerView
  // 循环设置图层透明度
  for (let i = 0; i < layers.length; i++) {
    // 根据mapbox图层类型设置透明度
    switch (layers[i].type) {
      case 'background':
        innerView.setPaintProperty(
          layers[i].id,
          'background-opacity',
          commonLayer.opacity
        )
        break
      case 'fill':
      default:
        innerView.setPaintProperty(
          layers[i].id,
          'fill-opacity',
          commonLayer.opacity
        )
        break
      case 'line':
        innerView.setPaintProperty(
          layers[i].id,
          'line-opacity',
          commonLayer.opacity
        )
        break
      case 'symbol':
        innerView.setPaintProperty(
          layers[i].id,
          'icon-opacity',
          commonLayer.opacity
        )
        innerView.setPaintProperty(
          layers[i].id,
          'text-opacity',
          commonLayer.opacity
        )
        break
      case 'circle':
        innerView.setPaintProperty(
          layers[i].id,
          'circle-opacity',
          commonLayer.opacity
        )
        break
      case 'sky':
        innerView.setPaintProperty(
          layers[i].id,
          'sky-opacity',
          commonLayer.opacity
        )
        break
    }
  }
}

/**
 * 获取绘制参数
 * @param {Object} updateContent 事件内容对象
 * @return {Object} 绘制参数
 * */
function getPaintOptions(updateContent) {
  const args = updateContent.params
  return {
    layerId: args[0],
    paints: args[1]
  }
}

/**
 * 设置图层的绘制样式属性
 * @param {LayerView} layerView 图层视图对象
 * @param {String} layerId 图层ID
 * @param {Object} options 要改变的样式对象
 * */
function setPaintProperties(layerView, layerId, options) {
  // 获取地图视图对象
  const innerView = layerView.innerView
  // 图层要存在
  if (innerView.getLayer(layerId) && options instanceof Object) {
    Object.keys(options).forEach((key) => {
      innerView.setPaintProperty(layerId, key, options[key])
    })
  }
}

/**
 * 设置图层的布局样式属性
 * @param {LayerView} layerView 图层视图对象
 * @param {String} layerId 图层ID
 * @param {Object} options 要改变的样式对象
 * */
function setLayoutProperties(layerView, layerId, options) {
  // 获取地图视图对象
  const innerView = layerView.innerView
  // 图层要存在
  if (innerView.getLayer(layerId) && options instanceof Object) {
    Object.keys(options).forEach((key) => {
      innerView.setLayoutProperty(layerId, key, options[key])
    })
  }
}

/**
 * 设置图层的过滤条件
 * @param {IGSTileLayerView} layerView 图层视图对象
 * @param {String} layerId 图层id
 * @param {String} filter 过滤条件
 * */
function setFilter(layerView, layerId, filter) {
  // 获取地图视图对象
  const innerView = layerView.innerView
  // 设置过滤条件
  if (innerView.getLayer(layerId)) {
    innerView.setFilter(layerId, filter)
  }
}

/**
 * 设置图层显示范围
 * @param {IGSTileLayerView} layerView 图层视图对象
 * @param {String} layerId 图层id
 * @param {Number} minZoom 最小显示范围
 * @param {Number} maxZoom 最大显示范围
 * */
function setLayerZoomRange(layerView, layerId, minZoom, maxZoom) {
  // 获取地图视图对象
  const innerView = layerView.innerView
  // 设置显示范围
  if (innerView.getLayer(layerId)) {
    innerView.setLayerZoomRange(layerId, minZoom, maxZoom)
  }
}

/**
 * 添加矢量瓦片的Source
 * @param {IGSTileLayerView} layerView 图层视图对象
 * */
function addSources(layerView) {
  // 添加矢量瓦片的Source
  const sources = layerView.layer.style.sources
  Object.keys(sources).forEach((key) => {
    // 添加Source
    layerView.innerView.addSource(
      // SourceID
      key,
      // Source参数
      sources[key]
    )
  })
}

/**
 * 添加矢量瓦片的Layer
 * @param {IGSTileLayerView} layerView 图层视图对象
 */
function addLayers(layerView) {
  // 添加矢量瓦片的Layer
  const layers = layerView.layer.style.layers
  for (let i = 0; i < layers.length; i++) {
    // 取图层可见性
    const visible = layerView._getLayerViewVisible()
    // 设置全图层可见性
    if (layers[i] && layers[i].layout && layers[i].layout instanceof Object) {
      layers[i].layout.visibility = visible ? 'visible' : 'none'
    }
    // 设置全图层透明度
    if (layers[i] && layers[i].paint && layers[i].paint instanceof Object) {
      // 根据mapbox图层类型设置透明度，可能有多个字段名
      const _opacityKeys = []
      switch (layers[i].type) {
        case 'background':
          _opacityKeys.push('background-opacity')
          break
        case 'fill':
        default:
          _opacityKeys.push('fill-opacity')
          break
        case 'line':
          _opacityKeys.push('line-opacity')
          break
        case 'symbol':
          _opacityKeys.push('icon-opacity')
          _opacityKeys.push('text-opacity')
          break
        case 'circle':
          _opacityKeys.push('circle-opacity')
          break
        case 'sky':
          _opacityKeys.push('sky-opacity')
          break
      }
      for (let j = 0; j < _opacityKeys.length; j++) {
        layers[i].paint[_opacityKeys[j]] = layerView.layer.opacity
      }
    }
    layerView.innerView.addLayer(layers[i])
  }
}

/**
 * 获取矢量瓦片的所有子图层
 * @param {IGSTileLayerView} layerView 图层视图对象
 * @return {Array<Object>} 矢量瓦片的子图层
 * */
function getLayers(layerView) {
  const layers = layerView.layer.style.layers
  const subLayers = []
  for (let i = 0; i < layers.length; i++) {
    subLayers.push(layerView.innerView.getLayer(layers[i].id))
  }
  return subLayers
}

/**
 * 更新所有矢量瓦片子图层
 * @param {IGSTileLayerView} layerView 图层视图对象
 * */
function updateStyleLayer(layerView) {
  // 先获取地图视图的样式
  const mapStyle = layerView.innerView.getStyle()
  // 真实的图层对象
  const innerLayer = layerView.innerLayer
  // 更新后的图层对象
  const layers = layerView.layer.style.layers
  // 获取改变前的第一个矢量瓦片子图层的位置
  let beganIndex = undefined
  for (let i = 0; i < mapStyle.layers.length; i++) {
    if (mapStyle.layers[i].id === innerLayer[0].id) {
      beganIndex = i
      break
    }
  }
  // 获取改变前的最后一个矢量瓦片子图层的位置
  let endIndex = undefined
  for (let i = 0; i < mapStyle.layers.length; i++) {
    if (mapStyle.layers[i].id === innerLayer[innerLayer.length - 1].id) {
      endIndex = i
      break
    }
  }
  // 截取之前的数组
  const layersBefore = mapStyle.layers.slice(0, beganIndex)
  // 截取之后的数组
  const layersAfter = mapStyle.layers.slice(
    endIndex,
    mapStyle.layers.length - 1
  )
  // 开始替换数组
  mapStyle.layers = layersBefore.concat(layers).concat(layersAfter)
  // 强制更新地图视图
  if (layerView.innerView._update) {
    layerView.innerView._update()
  } else if (layerView.innerView.update) {
    layerView.innerView.update()
  }
}

export {
  setVisible,
  removeLayer,
  setOpacity,
  getPaintOptions,
  setPaintProperties,
  setLayoutProperties,
  setFilter,
  setLayerZoomRange,
  addSources,
  addLayers,
  getLayers,
  updateStyleLayer
}