openlayer加载各种小控件

<template>
    <div id="map"></div>
</template>
 
<script>
import {Map,View} from 'ol'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import {defaults as defaultControls,OverviewMap,FullScreen,ScaleLine,ZoomSlider,MousePosition,ZoomToExtent} from 'ol/control'

export default {
  data(){
    return{
    }
  },
  mounted() {
    //鹰眼控件
    var overviewMapControl=new OverviewMap({
      className: 'ol-overviewmap ol-custom-overviewmap', //鹰眼控件样式
            layer:[
                    new TileLayer({
                        source:new OSM()
                    })
            ],
            collapseLabel:"\u00BB",//鹰眼展开时功能按钮上的标识
            label:"\u00AB",//鹰眼折叠时功能按钮上的标识
            collapsed:false//初始为展开显示方式
        });

     var map=new Map({
      target: "map",
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        projection: "EPSG:4326",    //使用这个坐标系
        center: [104.704968,31.540962],  //西南科技大学
        zoom: 15
      }),
      controls: defaultControls({ attribution: false, zoom: true}).extend([
          overviewMapControl,  //鹰眼控件
          new FullScreen(),  //地图全屏控件
          new ScaleLine(),  //比例尺控件
          new ZoomSlider(),  //滑块缩放控件
          new MousePosition(),  //鼠标位置控件
          new ZoomToExtent({  //导航控件
                    extent: [                   
                        813079.7791264898, 5929220.284081122,
                        848966.9639063801, 5936863.986909639
                      ]
                  })
       ]),
    });
  }
}
</script>
 
<style lang='scss'>
    #map{
      
      height:100%;
      width:100%;
      background-color: rgb(121, 119, 119);
      display: flex;

        // 鹰眼控件相对视图的位置
        .ol-custom-overviewmap, .ol-custom-overviewmap.ol-uncollapsible {
            top: auto;
            right: auto;
            // right: 0; /*右侧显示*/
            // bottom: 0; /*底部显示*/
            // margin-bottom: 10px;
            // margin-left: 10px;
        }

        /* 鹰眼控件展开时控件外框的样式 */
        .ol-custom-overviewmap:not(.ol-collapsed) {
            border: 1px solid black;
        }

        /* 鹰眼控件中地图容器的样式 */
        .ol-custom-overviewmap .ol-overviewmap-map {
            border: none;
            width: 150px; //控件的宽度
        }

        /* 在鹰眼控件中显示当前窗口中主图区域的边框 */
        // .ol-custom-overviewmap .ol-overviewmap-box {
        //     border: 2px solid red;
        // }

        /* 在鹰眼控件张开时其控件按钮图标的样式 */
        .ol-custom-overviewmap:not(.ol-collapsed) button {
            top: auto;
            right: auto;
            right: 1px;
            bottom: 1px;
        }

          //比例尺控件位置
         .ol-scale-line {
            right:10px;
            left: auto;
            bottom: 10px;
            top: auto;
          }

          //鼠标控件位置
          .ol-mouse-position{
            width: 350px;
            bottom: 10px;
            top: auto;
            right: 150px;
            left: auto;
        }
          
          //全屏控件
          .ol-full-screen{
              top: 10px;
              right: 10px;
              left: auto;
              bottom: auto;
          }

          //缩放控件位置
          .ol-zoom{
              // top: 50px;
              top: 37px;
              right: 10px;
              left: auto;
              bottom: auto;
              .ol-zoom-out {
                   margin-top: 3px;
                 }
          }

          
      }
</style>

运行效果