<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 v-show="$store.state.isNaviget" class="sindagis-map-compass">
|
<span
|
class="left"
|
@click="leftClick"
|
></span>
|
<span
|
class="center"
|
@click="recoveryClick"
|
:style="{transform: `rotate(${rotate}deg)`}"
|
></span>
|
<span
|
class="right"
|
@click="rightClick"
|
></span>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
import { easeOut } from 'ol/easing'
|
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,
|
rotate: 0,
|
currentDir: ''
|
}
|
},
|
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: [105.02, 34.9] ,
|
zoom: 4,
|
projection: "EPSG:4326",
|
}),
|
controls: defaultControls().extend([
|
new FullScreen(),
|
|
]),
|
interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
|
})
|
// var scaleLine = new ScaleLine({
|
// units: "metric"
|
// });
|
// map.addControl(scaleLine);
|
|
map.on("moveend", function (e) {
|
console.log(($(window).width() - $(".ol-scale-line-inner").width()) + "px");
|
// $(".ol-scale-line").css("left", ($(window).width() - $(".ol-scale-line").width() - 25) + "px");
|
});
|
|
},
|
|
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)
|
}
|
},
|
leftClick() {
|
var view = map.getView();
|
var center = map.getView().getCenter();
|
var rotation = map.getView().getRotation();
|
rotation = rotation - Math.PI / 2
|
this.rotate -= 90
|
view.animate({
|
center: center, //旋转中心点
|
rotation: rotation,
|
easing: easeOut //旋转速度
|
})
|
this.currentDir = 'left'
|
},
|
recoveryClick() {
|
var view = map.getView();
|
var center = map.getView().getCenter();
|
let a = this.rotate % 360 // -270
|
if (a != 0) { // 复位
|
let dis = 360 - Math.abs(a)
|
let dis1 = Math.abs(a)
|
dis = dis > dis1 ? dis1 : dis
|
if (dis == 180) dis = -180
|
this.rotate = (this.rotate + dis) % 360 == 0 ? this.rotate + dis : this.rotate - dis
|
}
|
view.animate({
|
center: center,
|
rotation: 0,
|
easing: easeOut
|
})
|
},
|
rightClick() {
|
var view = map.getView();
|
var center = map.getView().getCenter();
|
var rotation = map.getView().getRotation();
|
rotation = rotation + Math.PI / 2
|
this.rotate += 90
|
view.animate({
|
center: center,
|
rotation: rotation,
|
easing: easeOut
|
})
|
this.currentDir = 'right'
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" 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;
|
}
|
.ol-scale-line {
|
bottom: 55px !important;
|
}
|
|
.sindagis-map-compass {
|
position: absolute;
|
right: 50px;
|
bottom: 90px;
|
z-index: 5;
|
right: 25px;
|
width: 52px;
|
height: 54px;
|
background: url("../assets/img/compass.png") 0% 0% / 266px no-repeat;
|
}
|
|
.sindagis-map-compass .left,
|
.sindagis-map-compass .center,
|
.sindagis-map-compass .right {
|
position: absolute;
|
outline: none;
|
border: none;
|
cursor: pointer;
|
opacity: 1;
|
}
|
|
.sindagis-map-compass .left {
|
background: url("../assets/img/compass.png") -75px -5px / 266px no-repeat;
|
left: 2px;
|
top: 5px;
|
z-index: 1;
|
width: 15px;
|
height: 42px;
|
}
|
|
.sindagis-map-compass .left:hover {
|
background: url("../assets/img/compass.png") -89px -5px / 266px no-repeat;
|
}
|
|
.sindagis-map-compass .center {
|
background: url("../assets/img/compass.png") -56px -4px / 266px no-repeat;
|
left: 19px;
|
top: 4px;
|
width: 14px;
|
height: 44px;
|
transform: rotate(0deg);
|
transition: 1s;
|
}
|
.sindagis-map-compass .right {
|
background: url("../assets/img/compass.png") -75px -5px / 266px no-repeat;
|
right: 2px;
|
top: 5px;
|
z-index: 1;
|
width: 15px;
|
height: 42px;
|
transform: scaleX(-1);
|
}
|
.sindagis-map-compass .right:hover {
|
background: url("../assets/img/compass.png") -89px -5px / 266px no-repeat;
|
}
|
|
</style>
|
