<script>
import commonMixin from '@/base/mixins/common.js'
export default {
  name: 'bs-overview-map',
  mixins: [commonMixin('control')],
  render () { },
  props: {
  },
  watch: {
  },
  methods: {
    load () {
      const { ol, $rootComponent } = this
      this.originInstance = new ol.control.OverviewMap({
        className: 'ol-overviewmap ol-custom-overviewmap', // 鹰眼控件样式（see in overviewmap-custom.html to see the custom CSS used）
        // 鹰眼中加载同坐标系下不同数据源的图层
        layers: [
          $rootComponent.layer
        ],
        collapseLabel: '\u00BB', // 鹰眼控件展开时功能按钮上的标识（网页的JS的字符编码）
        label: '\u00AB', // 鹰眼控件折叠时功能按钮上的标识（网页的JS的字符编码）
        collapsed: false // 初始为展开显示方式
      })
      $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>
