<script>
import commonMixin from '@/base/mixins/common.js'
import OverviewMap from '@/controls/OverviewMap.js'
export default {
  name: 'bs-wtmslayer',
  render () { },
  mixins: [commonMixin('layer')],
  props: {
    layerName: {
      type: String,
      default: 'bstar:zhengfadaxue'
    },
    matrixSet: {
      type: String,
      default: 'zhengfadaxue'
    },
    origin: {
      type: Array,
      default: function () {
        return []
      }
    },
    origins:
    {
      type: Array,
      default: function () {
        return []
      }
    },
    url: {
      type: String
    },
    gridNames: {
      type: Array,
      default: function () {
        return ['10000', '5000', '2500', '1250', '625', '312']
      }
    },
    showOverView: {
      type: Boolean,
      default: false
    }
  },
  watch: {
  },
  methods: {
    load () {
      const {ol, $rootComponent, layerName, matrixSet, url, gridNames, map, showOverView} = this
      let {origin, origins} = this
      if (origin.length === 0) {
        origin = undefined
      }
      if (origins.length === 0) {
        origins = undefined
      }
      const source = new ol.source.WMTS({
        url,
        layer: layerName,
        matrixSet: matrixSet,
        format: 'image/png',
        projection: $rootComponent.projection,
        tileGrid: new ol.tilegrid.WMTS({
          tileSize: [256, 256],
          extent: $rootComponent.extent,
          origin,
          origins,
          resolutions: $rootComponent.resolutions,
          matrixIds: gridNames
        }),
        style: '',
        wrapX: true
      })
      const layer = new ol.layer.Tile({
        source: source
      })
      this.originInstance = layer
      map.addLayer(layer)
     // map.getView().fit($rootComponent.extent, { constrainResolution: false })
      if (showOverView) {
        const overview = new OverviewMap({
          collapsible: true,
          collapsed: false,
          view: new ol.View({
            projection: $rootComponent.projection,
            zoomFactor: $rootComponent.zoomFactor,
            center: $rootComponent.center,
            zoom: 2,
            resolutions: $rootComponent.resolutions
          })
        })
        $rootComponent.addControl(overview)
      }
    }
  }
}
</script>
