<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"
|
import {
|
OverviewMap,
|
defaults as defaultControls,
|
FullScreen,
|
ScaleLine,
|
Rotate,
|
} from "ol/control.js"
|
import {
|
DragRotateAndZoom,
|
defaults as defaultInteractions,
|
} from 'ol/interaction.js';
|
export default {
|
name: "",
|
data() {
|
return {
|
centerFlag: false,
|
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",
|
}),
|
controls: defaultControls().extend([
|
new FullScreen(),
|
new ScaleLine(),
|
]),
|
interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
|
})
|
},
|
|
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>
|
