vue openlayer 实现加载底图

vue页面 Demo1

<template>
   <div id="mapDiv" class="map">
           <button  class="qxb" style="">ssssss</button>
   </div>
</template>
<script>

import 'ol/ol.css';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
export default {
  mounted() {
      //视图
      var view = new View({
        projection: "EPSG:4326" ,    //使用这个坐标系
        center: [116.401969,39.91737],
        zoom: 8,
        //extent 是约束底图范围的
        // extent: [-572513.341856, 5211017.966314, 916327.095083, 6636950.728974],
        });
        //底图
        new Map({
        layers: [
            new TileLayer({
            source: new OSM(),
            }) ],
        // keyboardEventTarget: document,
        target: 'mapDiv',
        view: view,
        // 自带展示放大缩小插件  
        // controls: defaultControls().extend([new ZoomSlider()]),
        });

    
  },

}
    
</script>

<style scoped>
   body,#mapDiv {
  height: 100vh;
  width: 100vw;
  padding: 0px;
  margin: 0px;
   position: relative; z-index:1; 
}
.qxb{
    position: fixed;
    left: 20px;
    top:20px;
    z-index:2;
    position: relative; z-index:1; 
}

</style>

路由跳转 index.js

import Demo2 from '@/Demo2/index'  //  跳转 vue页面
// import Demo5 from '@/Demo5/index'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
     component: HelloWorld
    },
    {
        path: '/demo1',
        name: 'demo1',
        component: Demo1   //页面输入这个地址
    },
    {
        path: '/demo2',
        name: 'demo2',
        component: Demo2   //页面输入这个地址
    },
  ]
})