<template>
|
<!--总界面-->
|
<div class="myDiv">
|
<!--Cesium显示界面-->
|
<div
|
v-show="isSdkMapFlag"
|
id="mapView"
|
class="sdkMap"
|
:class="[isShowCeMap ? 'sdkMapTwo' : 'sdkMapOne']"
|
>
|
<mapsdk></mapsdk>
|
<militarymark></militarymark>
|
<modelplotting></modelplotting>
|
</div>
|
<div id="ds" v-show="isShowDs"></div>
|
<!--openLayers显示界面-->
|
<div
|
v-show="isOlMapFlag"
|
id="map"
|
class="olMap"
|
:class="[isShowOlMap ? 'olMapTwo' : 'olMapOne']"
|
>
|
<mapol></mapol>
|
</div>
|
<add-online-map ref="addOnlineMap" />
|
<add-online-ol-map ref="addOnlineOlMap"></add-online-ol-map>
|
</div>
|
</template>
|
|
<script>
|
import mapsdk from "./mapsdk";
|
import militarymark from "./h11militaryMark.vue";
|
import modelplotting from "./h12modelPlotting.vue";
|
import mapol from "./mapol";
|
import { transform } from "ol/proj";
|
import ol from "ol";
|
import $ from "jquery";
|
import AddOnlineMap from "../views/Tools/AddOnlineMap.vue";
|
import AddOnlineOlMap from "../views/Tools/AddOnlineOLMap.vue";
|
export default {
|
name: "",
|
|
components: {
|
mapsdk,
|
mapol,
|
militarymark,
|
modelplotting,
|
AddOnlineMap,
|
AddOnlineOlMap,
|
},
|
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;
|
this.getMapViewCenter(this.isSplitFlag);
|
|
switch (res) {
|
case 1:
|
this.isShowCeMap = true;
|
this.isShowDs = true;
|
this.isOlMapFlag = true;
|
this.isShowOlMap = true;
|
this.isSdkMapFlag = true;
|
var that = this;
|
this.$store.state.setChangeBaseMap = false;
|
setTimeout(function () {
|
window.map.updateSize();
|
that.showSplitMap();
|
}, 500);
|
|
break;
|
case 2:
|
this.isSdkMapFlag = false;
|
this.isShowDs = false;
|
this.isShowOlMap = false;
|
this.isOlMapFlag = true;
|
var val = this.$store.state.Map3;
|
setTimeout(function () {
|
window.map.updateSize();
|
window.map.getView().setCenter([val[0], val[1]]);
|
window.map.getView().setZoom(val[2]);
|
}, 300);
|
break;
|
case 3:
|
this.isSdkMapFlag = true;
|
this.isShowDs = false;
|
this.isShowOlMap = false;
|
this.isOlMapFlag = false;
|
this.isShowCeMap = false;
|
var val = this.$store.state.Map3;
|
this.$store.state.setChangeBaseMap = true;
|
window.Viewer.camera.setView({
|
destination: Cesium.Cartesian3.fromDegrees(val[0], val[1], val[2]),
|
});
|
|
break;
|
}
|
},
|
getMapViewCenter(res) {
|
switch (res) {
|
case 2:
|
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);
|
this.$store.state.Map3 = [lng, lat, level];
|
break;
|
case 3:
|
var position = window.map.getView().getCenter();
|
var level = this.getHeight(parseInt(window.map.getView().getZoom()));
|
this.$store.state.Map3 = [position[0], position[1], level];
|
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];
|
},
|
showBaseMapLayer(res) {
|
this.closeAllBaseMapLayer();
|
if (res.type == "ol") {
|
this.$refs &&
|
this.$refs.addOnlineOlMap &&
|
this.$refs.addOnlineOlMap.open("2D在线地图", null);
|
} else {
|
this.$refs &&
|
this.$refs.addOnlineMap &&
|
this.$refs.addOnlineMap.open("3D在线地图", null);
|
}
|
},
|
closeAllBaseMapLayer() {
|
this.$refs &&
|
this.$refs.addOnlineOlMap &&
|
this.$refs.addOnlineOlMap.close();
|
this.$refs && this.$refs.addOnlineMap && this.$refs.addOnlineMap.close();
|
},
|
},
|
mounted() {
|
this.$bus.$on("setChangeBaseMapLayer", (res) => {
|
this.showBaseMapLayer(res);
|
});
|
//
|
this.$bus.$on("changemap", (e) => {
|
if (this.isSplitFlag == 1) {
|
this.changeMap(3);
|
} else {
|
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% - 2px);
|
}
|
.olMap {
|
height: 100%;
|
padding: 0;
|
margin: 0;
|
float: right;
|
}
|
.olMapOne {
|
width: 100%;
|
}
|
.olMapTwo {
|
width: calc(50% - 2px);
|
}
|
#ds {
|
height: 100%;
|
width: 2px;
|
background: #d6d6d6;
|
float: left;
|
}
|
</style>
|
