<script>
import commonMixin from '@/base/mixins/common.js'
import OverviewMap from '@/controls/OverviewMap.js'
export default {
  name: 'bs-staticlayer',
  render () { },
  mixins: [commonMixin('layer')],
  props: {
    url: {
      type: String
    },
    extent: {
      type: Array,
      default: function() {
        return []
      }
    },
    showOverView: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    url(val) {
      this.reload()
    },
    extent(val) {
      this.reload()
    }
  },
  methods: {
    load () {
      const {ol, $rootComponent, map, url, showOverView} = this
      var projection = $rootComponent.projection
      var extent = this.extent
      if (extent && extent.length === 0) {
        extent = $rootComponent.extent
      }
      if (this.originInstance) {
        map.removeLayer(this.originInstance)
      }
      const layer = new ol.layer.Image({
        source: new ol.source.ImageStatic({
          url, // 静态地图图片地址
          imageExtent: extent, // 映射到地图的范围
          projection
        })
      })
      this.originInstance = layer
      map.addLayer(layer)
      map.getView().fit(extent, { constrainResolution: false })
      if (showOverView) {
        const overview = new OverviewMap({
          collapsible: true,
          collapsed: false,
          view: new ol.View({
            projection,
            zoomFactor: $rootComponent.zoomFactor,
            center: $rootComponent.center,
            zoom: 2
          })
        })
        $rootComponent.addControl(overview)
      }
    }
  }
}
</script>
