<template>
|
<div id="mapol">
|
<div
|
@click="changeMenulayer"
|
class="center CenDiv"
|
:class="{ center1: centerFlag }"
|
>
|
<div
|
id="cenBg"
|
v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
|
></div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import TileLayer from 'ol/layer/Tile';
|
import XYZ from 'ol/source/XYZ';
|
import Map from 'ol/Map';
|
import View from 'ol/View';
|
import { transform } from 'ol/proj';
|
export default {
|
name: '',
|
data() {
|
return {
|
isActive: true,
|
isMenuLayer: false,
|
};
|
},
|
mounted() {
|
this.init2DMap();
|
},
|
methods: {
|
init2DMap() {
|
var vectorLayer = new TileLayer({
|
source: new XYZ({
|
url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
|
}),
|
});
|
var imageLayer = new TileLayer({
|
source: new XYZ({
|
url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}',
|
}),
|
});
|
window.map = new Map({
|
target: 'mapol',
|
layers: [imageLayer, vectorLayer],
|
view: new View({
|
center: transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'),
|
zoom: 4,
|
projection: 'EPSG:3857',
|
}),
|
});
|
},
|
changeMenulayer() {
|
this.isActive = !this.isActive;
|
this.isMenuLayer = !this.isMenuLayer;
|
this.setLayerVisible();
|
},
|
setLayerVisible() {
|
if (this.isActive == true) {
|
map.getLayers().item(0).setVisible(false);
|
map.getLayers().item(1).setVisible(true);
|
} else {
|
map.getLayers().item(0).setVisible(true);
|
map.getLayers().item(1).setVisible(false);
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
#mapol {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
margin: 0;
|
padding: 0;
|
position: relative;
|
}
|
.center {
|
left: 1%;
|
}
|
.CenDiv {
|
position: absolute;
|
bottom: 1%;
|
height: 40px;
|
width: 60px;
|
z-index: 101;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
box-shadow: 3px 3px 6px #666;
|
border: 1px solid rgba(204, 204, 204, 0.76);
|
border-radius: 5px;
|
cursor: pointer;
|
}
|
.center1 {
|
right: 1%;
|
}
|
.right {
|
position: absolute;
|
top: 50px;
|
right: 0;
|
width: 20%;
|
height: calc(100% - 50px);
|
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
.CenDiv:hover {
|
border: 1px solid #409eff;
|
}
|
.active {
|
width: 100%;
|
height: 100%;
|
background: url('../assets/img/Layer/imgLayer2.png') no-repeat center;
|
position: absolute;
|
background-size: 100% 100%;
|
border-radius: 5px;
|
}
|
.menuLayer {
|
width: 100%;
|
height: 100%;
|
background: url('../assets/img/Layer/imgLayer1.png') no-repeat center;
|
position: absolute;
|
background-size: 100% 100%;
|
border-radius: 5px;
|
}
|
</style>
|
