<template>
|
<div id="mapol">
|
<div style="display: flex">
|
<!-- <div
|
@click="changeMenulayer"
|
class="changeLayer"
|
style=" position: absolute;
|
bottom: 84px;
|
right: 46px;
|
height: 30px;
|
width: 30px;
|
z-index: 101;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
cursor: pointer;
|
border: 1px solid rgba(255, 255, 255, 0.5);"
|
>
|
<div
|
title="底图切换"
|
id="cenBg"
|
class="mapBaseMap"
|
></div>
|
|
</div> -->
|
<div @click="changeMapType" class="changeMapType" v-if="$store.state.setChangeBaseMap" style=" position: absolute;
|
|
bottom: 84px;
|
right: 46px;
|
height: 30px;
|
width: 30px;
|
z-index: 101;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
cursor: pointer;
|
border: 1px solid rgba(255, 255, 255, 0.5);">
|
<div title="2/3维切换" id="cenBg" :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"></div>
|
</div>
|
</div>
|
<!-- <div-->
|
<!-- @click="changeMenulayer"-->
|
<!-- class="center CenDiv"-->
|
<!-- :class="{ center1: centerFlag }"-->
|
<!-- >-->
|
<!-- <div-->
|
<!-- id="cenBg"-->
|
<!-- v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"-->
|
<!-- ></div>-->
|
|
<!-- </div>-->
|
<div class="sindagis-map-compass" style=" bottom: 130px; right: 40px;">
|
<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: '',
|
show2DMap: false,
|
}
|
},
|
mounted() {
|
this.init2DMap();
|
this.$bus.$on('changemapType', (e) => {
|
this.show2DMap = e;
|
});
|
},
|
methods: {
|
|
init2DMap() {
|
var layerBase = [];
|
// if (!is_production) {
|
// 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}",
|
// }),
|
// })
|
// layerBase = [vectorLayer, imageLayer]
|
// }
|
window.map = new Map({
|
target: "mapol",
|
// layers: layerBase,
|
view: new View({
|
center: [105.02, 34.9],
|
zoom: 4,
|
projection: "EPSG:4326",
|
minZoom: 5,
|
}),
|
controls: defaultControls().extend([
|
new FullScreen(),
|
|
]),
|
interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
|
})
|
|
|
if (is_production) {
|
var base_ulr = window.sceneConfig.baseUrl;
|
if (base_ulr.indexOf('{host}') > -1) {
|
base_ulr = base_ulr.replace("{host}", iisHost)
|
}
|
window.olBaseMapLayer = new TileLayer({
|
title: "高德地图",
|
source: new XYZ({
|
url: base_ulr,
|
wrapX: false
|
})
|
});
|
window.map.addLayer(window.olBaseMapLayer);
|
} else {
|
window.olBaseMapLayer = 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.addLayer(window.olBaseMapLayer);
|
}
|
|
|
|
|
|
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");
|
});
|
|
},
|
|
//二维/三维地图切换
|
changeMapType() {
|
//
|
this.show2DMap = !this.show2DMap;
|
//二维
|
if (this.show2DMap) {
|
this.$bus.$emit("changemap", 2);
|
}
|
//三维
|
else {
|
this.$bus.$emit("changemap", 3);
|
}
|
this.$bus.$emit("changemapType", this.show2DMap);
|
},
|
|
changeMenulayer() {
|
this.$bus.$emit("setChangeBaseMapLayer", { type: 'ol', boolen: true })
|
// 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;
|
right: 130px !important;
|
}
|
|
.sindagis-map-compass {
|
position: absolute;
|
|
z-index: 5;
|
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;
|
}
|
|
.mapBaseMap {
|
width: 100%;
|
height: 100%;
|
//margin-left: 10px;
|
background-image: url("../assets/img/basemap.png");
|
//background-image: url("../assets/img/synthesis/底图.png");
|
background-repeat: no-repeat;
|
background-size: contain;
|
}
|
|
.changeMapType {}
|
|
.mapTypeTwo {
|
width: 100%;
|
height: 100%;
|
//margin-left: 10px;
|
background-image: url("../assets/img/3D.png");
|
//background-image: url("../assets/img/synthesis/3D.png");
|
background-repeat: no-repeat;
|
background-size: contain;
|
}
|
|
.mapTypeThree {
|
width: 100%;
|
height: 100%;
|
//margin-left: 10px;
|
background-image: url("../assets/img/2D.png");
|
//background-image: url("../assets/img/synthesis/2D 拷贝 2.png");
|
background-repeat: no-repeat;
|
background-size: contain;
|
}
|
|
.changeLayer {}
|
</style>
|
