js open，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   //頁面輸入這個地址},]
})