<template>
|
<!--总界面-->
|
<div class="myDiv">
|
<!--Cesium显示界面-->
|
<div
|
v-show="isSdkMapFlag"
|
id="mapView"
|
class="sdkMap"
|
:class="[isShowCeMap ? 'sdkMapTwo' : 'sdkMapOne']"
|
>
|
<mapsdk></mapsdk>
|
</div>
|
<div
|
id="ds"
|
v-show="isShowDs"
|
></div>
|
<!--openLayers显示界面-->
|
<div
|
v-show="isOlMapFlag"
|
id="map"
|
class="olMap"
|
:class="[isShowOlMap ? 'olMapTwo' : 'olMapOne']"
|
>
|
<mapol></mapol>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import mapsdk from './mapsdk';
|
import mapol from './mapol';
|
import { transform } from 'ol/proj';
|
import ol from 'ol';
|
import $ from 'jquery';
|
export default {
|
name: '',
|
components: {
|
mapsdk,
|
mapol,
|
},
|
data() {
|
return {
|
isShowCeMap: false, //3维宽度
|
isShowOlMap: false, //2维宽度
|
isShowDs: false, //ds
|
isOlMapFlag: false, //2维显隐
|
isSdkMapFlag: true, //3维显隐
|
isSplitFlag: 0,
|
levelArray: [
|
0, 40000000, 20000000, 10000000, 5000000, 2000000, 1000000, 500000,
|
250000, 200000, 100000, 50000, 17000, 9000, 5000, 2000, 1000, 500, 200,
|
100, 50, 25, 10, 0,
|
],
|
};
|
},
|
methods: {
|
changeMap(res) {
|
this.isSplitFlag = res;
|
switch (res) {
|
case 1:
|
this.isShowCeMap = true;
|
this.isShowDs = true;
|
this.isOlMapFlag = true;
|
this.isShowOlMap = true;
|
this.isSdkMapFlag = true;
|
var that = this;
|
|
setTimeout(function () {
|
window.map.updateSize();
|
that.showSplitMap();
|
}, 500);
|
|
break;
|
case 2:
|
this.isSdkMapFlag = false;
|
this.isShowDs = false;
|
this.isShowOlMap = false;
|
this.isOlMapFlag = true;
|
setTimeout(function () {
|
window.map.updateSize();
|
}, 300);
|
break;
|
case 3:
|
this.isSdkMapFlag = true;
|
this.isShowDs = false;
|
this.isShowOlMap = false;
|
this.isOlMapFlag = false;
|
this.isShowCeMap = false;
|
break;
|
}
|
},
|
showSplitMap() {
|
var that = this;
|
$('#mapView')
|
.off()
|
.on('mousemove', function () {
|
if (that.isSplitFlag == 1) {
|
window.Viewer.camera.changed.addEventListener(that.sdktool());
|
}
|
})
|
.on('mouseout', function () {
|
if (that.isSplitFlag == 1) {
|
window.Viewer.camera.changed.removeEventListener(that.sdktool());
|
}
|
});
|
let mapZoomAndMove = function (event) {
|
var position = window.map.getView().getCenter();
|
|
// var pos = transform(position, 'EPSG:3857', 'EPSG:4326');
|
var pos = position;
|
var level = that.getHeight(parseInt(window.map.getView().getZoom()));
|
window.Viewer.camera.setView({
|
destination: Cesium.Cartesian3.fromDegrees(pos[0], pos[1], level),
|
});
|
};
|
$('#map')
|
.off()
|
.on('mousemove', function () {
|
if (that.isSplitFlag == 1) {
|
that.olzoomAndMove(mapZoomAndMove);
|
}
|
})
|
.on('mouseout', function () {
|
if (that.isSplitFlag == 1) {
|
that.clearolzoomAndMove();
|
}
|
});
|
},
|
clearolzoomAndMove() {
|
let registerOnZoomArr = window.map.get('registerOnZoom');
|
if (registerOnZoomArr && registerOnZoomArr.length > 0) {
|
for (let i = 0; i < registerOnZoomArr.length; i++) {
|
window.map.un('moveend', registerOnZoomArr[i]);
|
}
|
}
|
},
|
olzoomAndMove(eventListen, notListenMove) {
|
// 记录地图缩放，用于判断拖动
|
window.map.lastZoom =
|
window.map.lastZoom || window.map.getView().getZoom();
|
// 地图缩放事件
|
let registerOnZoom = function (e) {
|
// 不监听地图拖动事件
|
if (notListenMove) {
|
if (window.map.lastZoom != window.map.getView().getZoom()) {
|
eventListen && eventListen(e);
|
}
|
} else {
|
eventListen && eventListen(e);
|
}
|
window.map.lastZoom = window.map.getView().getZoom();
|
};
|
// 保存缩放和拖动事件对象，用于后期移除
|
let registerOnZoomArr = map.get('registerOnZoom') || [];
|
|
registerOnZoomArr.push(registerOnZoom);
|
|
// 使用地图 set 方法保存事件对象
|
window.map.set('registerOnZoom', registerOnZoomArr);
|
|
// 监听地图移动结束事件
|
window.map.on('moveend', registerOnZoom);
|
|
return eventListen;
|
},
|
sdktool() {
|
if (this.isSplitFlag != 1) return;
|
var position = window.Viewer.camera.position;
|
var ellipsoid = window.Viewer.scene.globe.ellipsoid;
|
var cartographic = ellipsoid.cartesianToCartographic(position);
|
var lat = Cesium.Math.toDegrees(cartographic.latitude);
|
var lng = Cesium.Math.toDegrees(cartographic.longitude);
|
var level = this.getLevel(cartographic.height);
|
var value
|
// window.map
|
// .getView()
|
// .setCenter(transform([lng, lat], 'EPSG:4326', 'EPSG:3857'));
|
window.map
|
.getView()
|
.setCenter([lng, lat]);
|
window.map.getView().setZoom(level);
|
},
|
getLevel(height) {
|
for (var i = 1, len = this.levelArray.length; i < len - 1; i++) {
|
if (height >= (this.levelArray[i] + this.levelArray[i + 1]) / 2) {
|
return i;
|
}
|
}
|
return this.levelArray.length - 1;
|
},
|
getHeight(level) {
|
if (level > 0 && level < 23) {
|
return this.levelArray[level];
|
}
|
return this.levelArray[this.levelArray.length - 1];
|
},
|
},
|
mounted() {
|
this.$bus.$on('changemap', (e) => {
|
this.changeMap(e);
|
});
|
},
|
};
|
</script>
|
|
<style scoped>
|
.myDiv {
|
width: 100%;
|
height: 100%;
|
padding: 0;
|
margin: 0;
|
position: absolute;
|
float: left;
|
}
|
.sdkMap {
|
height: 100%;
|
padding: 0;
|
margin: 0;
|
float: left;
|
}
|
.sdkMapOne {
|
width: 100%;
|
}
|
.sdkMapTwo {
|
width: calc(50% - 1px);
|
}
|
.olMap {
|
height: 100%;
|
padding: 0;
|
margin: 0;
|
float: right;
|
}
|
.olMapOne {
|
width: 100%;
|
}
|
.olMapTwo {
|
width: calc(50% - 1px);
|
}
|
#ds {
|
height: 100%;
|
width: 2px;
|
background: #d6d6d6;
|
float: left;
|
}
|
</style>
|
