multiView.vue
<template>
<div class="main">
<div id="map1"></div>
<div id="map2"></div>
</div>
</template>
<script>
import {Map,View} from 'ol'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
export default {
data() {
return {
};
},
mounted() {
var map1= new Map({
target: "map1",
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
projection: "EPSG:4326", //使用这个坐标系
center: [104.704968,31.540962], //西南科技大学
zoom: 15
})
});
var map2=new Map({
target: "map2",
layers: [
new TileLayer({
source: new OSM()
})
],
view:map1.getView()
});
}
};
</script>
<style lang='scss'>
.main{
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
// border: 1px solid red;
#map1{
border: 1px solid rgb(122, 116, 116);
display: flex;
width: 50%;
background-color: rgb(121, 119, 119);
margin-right: 10px;
}
#map2{
border: 1px solid rgb(122, 116, 116);
display: flex;
flex: auto;
background-color: rgb(121, 119, 119);
}
}
</style>
运行效果