import axios from 'axios'
import { removeLayer } from './service'

export default {
  sourceId: '',
  layerId: '',
  clusterCountId: '',
  unclusteredId: '',
  /**
  * 加载聚合图层
  * @param map
  * @param url String 传递的后端服务地址
  * @param sourceOption Object 只需传clusterMaxZoom和clusterRadius
  * @param layerOption Object 只需传filter和paint
  * @param clusterLayerOption Object 只需传filter layout paint
  * @param unclusterLayerOption Object 只需传filter paint
  */
  loadAggregationGraph (map, geodata, sourceOption, layerOption, clusterLayerOption, unclusterLayerOption) {
    // axios.get(url).then((res) => {
    //   if (res) {

    const data = geodata
    const sourceId = 'sourceis_1'
    const layerId = 'layerId_1'
    // const sourceId = res.data.crs.properties.name
    // this.sourceId = sourceId
    // const layerId = sourceId + 'layer'
    // this.layerId = layerId
    // const clusterCountId = sourceId + 'clusterCount'
    // this.clusterCountId = clusterCountId
    // const unclusteredId = sourceId + 'unclustered'
    // this.unclusteredId = unclusteredId
    map.addSource(sourceId, {
      type: 'geojson',
      data: data,
      cluster: true,
      clusterMaxZoom: sourceOption.clusterMaxZoom ? sourceOption.clusterMaxZoom : 14, // 最大缩放到群集点
      clusterRadius: sourceOption.clusterRadius ? sourceOption.clusterRadius : 50// 每一组点的半径
    })
    // 外围有数字的图层,加晕染
    map.addLayer({
      id: layerId,
      type: 'circle',
      source: sourceId,
      // filter: ['has', 'poi_id'],
      filter: layerOption.filter,
      paint: layerOption.paint ? layerOption.paint : {
        // 蓝色,当点数小于100时为20px圆
        // 点计数在100到750之间时为黄色,21px圆
        // 点计数大于或等于750时为22像素的粉红色圆圈
        'circle-color': [
          'step',
          ['get', 'poi_id'],
          'rgba(81,187,214,0.8)',
          100,
          'rgba(241,240,117,0.8)',
          750,
          'rgba(242,140,177,0.8)'
        ],
        'circle-radius': [
          'step',
          ['get', 'poi_id'],
          20, // 蓝色,当点数小于100时为20px圆
          100, // 对应上面circle-color数字,意思为100以内
          21, // 点计数在100到750之间为黄色,意思为750以内
          750, // 对应上面circle-color数字,意思为750以内
          22// 点计数大于或等于750时为22像素的粉红色圆圈
        ],
        // 这个是外边框的颜色 circle-stroke-color这个对应了上面circle-color
        'circle-stroke-color': [
          'step',
          ['get', 'poi_id'],
          'rgba(81,187,214,0.2)',
          100,
          'rgba(241,240,117,0.2)',
          750,
          'rgba(242,140,177,0.2)'
        ],
        // 这个是外边框渲染的范围
        'circle-stroke-width': [
          'step',
          ['get', 'poi_id'],
          5, // 蓝色晕染长度,当点数小于100时为5px晕染
          100, // 对应上面circle-color数字,意思为100以内
          6, // 点计数在100到750之间时为黄色,6px晕染
          750, // 对应上面circle-color数字,意思为750以内
          7// 点计数大于或等于750时为7px像素的粉红色晕染
        ]
      }
    })
    // 聚合图圆圈中的数字
    map.addLayer({
      id: 'clusterCountId',
      type: 'symbol',
      source: sourceId,
      // filter: ['has', 'poi_id'],
      filter: clusterLayerOption.filter,
      layout: clusterLayerOption.layout,
      // layout:{
      //   'text-field': '{poi_id}', // 文本内容来源字段
      //   'text-font': ['Microsoft YaHei'],
      //   'text-size': 12
      // }
      paint: clusterLayerOption.paint ? clusterLayerOption.paint : {
        'text-color': 'hsl(0, 0%, 100%)',
        'text-halo-color': '#54c081',
        'text-halo-width': 100
      }
    })
    // 聚合图中没有数字的显示小圆点
    map.addLayer({
      id: 'unclusteredId',
      type: 'circle',
      source: sourceId,
      // filter: ['!', ['has', 'poi_id']],
      filter: unclusterLayerOption.filter,
      paint: unclusterLayerOption.paint ? unclusterLayerOption.paint : {
        'circle-color': '#11b4da',
        'circle-radius': 4,
        'circle-stroke-width': 1,
        'circle-stroke-color': '#fff'
      }
      // paint: {
      //   'circle-color': '#11b4da',
      //   'circle-radius': 4,
      //   'circle-stroke-width': 1,
      //   'circle-stroke-color': '#fff'
      // }
    })
  },
  /**
   * 移除聚合图层
   */
  removeLayer (map) {
    map.removeLayer(this.layerId)
    map.removeLayer(this.clusterCountId)
    map.removeLayer(this.unclusteredId)
    map.removeSource(this.sourceId)
  }
}
