<script>
import commonMixin from '@/base/mixins/common.js'
import { TileSuperMapRest } from '@/supermap/openlayers'
export default {
  name: 'bs-overview-map',
  mixins: [commonMixin('control')],
  render () { },
  props: {
    url: {
      type: String
    }
  },
  watch: {
    url(val) {
      this.reload()
    }
  },
  methods: {
    load () {
      var layer = null
      const { ol, $rootComponent, url } = this
      if (this.url.indexOf('geoserver') > 0) {
      }
      if (this.url.indexOf('iserver') > 0) {
        const pro = new ol.proj.Projection({// 地图投影类型
          code: $rootComponent.projection,
          units: 'degrees',
          extent: $rootComponent.extent
        })
        layer = new ol.layer.Tile({
          source: new TileSuperMapRest({
            url: url,
            wrapX: true
          }),
          projection: pro
        })
      }
      this.originInstance = new ol.control.OverviewMap({
        className: 'ol-overviewmap ol-custom-overviewmap', // 鹰眼控件样式（see in overviewmap-custom.html to see the custom CSS used）
        // 鹰眼中加载同坐标系下不同数据源的图层
        layers: [
          layer
        ],
        collapseLabel: '\u00BB', // 鹰眼控件展开时功能按钮上的标识（网页的JS的字符编码）
        label: '\u00AB', // 鹰眼控件折叠时功能按钮上的标识（网页的JS的字符编码）
        collapsed: false, // 初始为展开显示方式
        view: new ol.View({
          projection: 'EPSG:4326'
        })
      })
      $rootComponent.addControl(this.originInstance)
    }
  }
}
</script>
<style scoped>
.ol-custom-overviewmap,
.ol-custom-overviewmap.ol-uncollapsible {
  bottom: auto;
  left: auto;
  right: 0;
  /* 右侧显示 */
  bottom: 0;
  /* 顶部显示 */
}





/* 鹰眼控件展开时控件外框的样式 */

.ol-custom-overviewmap:not(.ol-collapsed) {
  border: 1px solid black;
}





/* 鹰眼控件中地图容器样式 */

.ol-custom-overviewmap .ol-overviewmap-map {
  border: none;
  width: 300px;
}





/* 鹰眼控件中显示当前窗口中主图区域的边框 */

.ol-custom-overviewmap .ol-overviewmap-box {
  border: 2px solid red;
}





/* 鹰眼控件展开时其控件按钮图标的样式 */

.ol-custom-overviewmap:not(.ol-collapsed) button {
  bottom: auto;
  left: auto;
  right: 1px;
  top: 1px;
}
</style>
