<script>
import commonMixin from '../base/mixins/common.js'
import { convertObjToStyle } from '../base/SymbolUtil.js'
import { GeometryType } from '../base/GeometryType.js'
import SymbolConfig from '../base/SymbolConfig.js'
import { covertObjToGeometry } from '../base/GeometryUtil.js'
import  Feature  from 'ol/Feature'
import GeoJSON from 'ol/format/GeoJSON'
import KML from 'ol/format/KML'
import VectorSource from 'ol/source/Vector'
import VectorLayer from 'ol/layer/Vector'
import Cluster from 'ol/source/Cluster'
import {bbox as bboxStrategy} from 'ol/loadingstrategy'
import {Circle as CircleStyle, Fill, RegularShape, Stroke, Style, Text, Icon, AtlasManager} from 'ol/style'
import {createEmpty, getWidth, getHeight, extend} from 'ol/extent'
export default {
  name: 'sl-clusterurllayer',
  render (h) { },
  mixins: [commonMixin('layer')],
  props: {
    id: {
      type: String,
      require: true
    },
    name: {
      type: String,
      require: true
    },
    visible: {
      type: Boolean,
      default: true
    },
    zIndex: {
      type: Number,
      require: true,
      default: 6
    },
    clusterDistance: {
      type: Number,
      default: 200
    },
    url:{
      type: String
    },
    format:{
      type: String,
      default: "geojson"
    }
  },
  watch: {
    visible (val) {
      this.originInstance.setVisible(val)
    },
    zIndex(val) {
      this.originInstance.setZIndex(val)
    }
  },
  data(){
    return {
    }
  },
  methods: {
    // 初始化图层-----
    load () {
      const { id, name, $rootComponent,  clusterDistance, zIndex, url, format, visible } = this
      if($rootComponent.isLayerExist(id)) {
         $rootComponent.removeLayer(id)
      }
      let featureFormat = new GeoJSON({
            geometryName: 'geom' 
        })
      let style = this.styleFunction
      if (format === "kml") {
          featureFormat = new KML()
      }
      if (url) {
         let param =  {
              format: featureFormat,
              url: function(extent) {
                return url + '&bbox=' + extent.join(',') + ',EPSG:4326'
              },
              strategy: bboxStrategy
          }
         let source = new Cluster({
              source: new VectorSource(param),
              distance: clusterDistance
            })
         this.originInstance = new VectorLayer({
            source,
            id,
            name
         })
      } 
      this.originInstance.setZIndex(zIndex)
      this.originInstance.setStyle(style)
      this.originInstance.setVisible(visible)
      this.map.addLayer(this.originInstance) 
    },
    // 刷新图层（触发change事件）
    refresh () {
      const source = this.originInstance.getSource()
      source.refresh()
    },
    styleFunction(feature, resolution) {
      let atlasManager = new AtlasManager({
        initialSize: 30
       })
      var textFill = new Fill({
          color: '#fff'
        })
      var textStroke = new Stroke({
          color: 'rgba(0, 0, 0, 0.6)',
          width: 3
        })
      var size = feature.get('features').length
      var radius = Math.min(size + 7, 20)
      var style = new Style({
            image: new CircleStyle({
              radius,
              fill: new Fill({
                color: '#1890ff'
              })
            }),
            text: new Text({
              text: size.toString(),
              fill: textFill,
              stroke: textStroke
            }),
            atlasManager: atlasManager
          })
        return style
      }
  }
}
</script>
