From d805339695bf1d25a333977445e1821508654d13 Mon Sep 17 00:00:00 2001
From: TreeWish <1131093754@qq.com>
Date: 星期二, 28 二月 2023 10:09:30 +0800
Subject: [PATCH] 解决分屏切换2D显示不全
---
src/components/MapDiv.vue | 163 ++++++++++++++++++++++++++----------------------------
1 files changed, 79 insertions(+), 84 deletions(-)
diff --git a/src/components/MapDiv.vue b/src/components/MapDiv.vue
index f57f2e6..b5149b3 100644
--- a/src/components/MapDiv.vue
+++ b/src/components/MapDiv.vue
@@ -10,10 +10,7 @@
>
<mapsdk></mapsdk>
</div>
- <div
- id="ds"
- v-show="isShowDs"
- ></div>
+ <div id="ds" v-show="isShowDs"></div>
<!--openLayers鏄剧ず鐣岄潰-->
<div
v-show="isOlMapFlag"
@@ -27,13 +24,13 @@
</template>
<script>
-import mapsdk from './mapsdk';
-import mapol from './mapol';
-import { transform } from 'ol/proj';
-import ol from 'ol';
-import $ from 'jquery';
+import mapsdk from "./mapsdk"
+import mapol from "./mapol"
+import { transform } from "ol/proj"
+import ol from "ol"
+import $ from "jquery"
export default {
- name: '',
+ name: "",
components: {
mapsdk,
mapol,
@@ -51,156 +48,154 @@
250000, 200000, 100000, 50000, 17000, 9000, 5000, 2000, 1000, 500, 200,
100, 50, 25, 10, 0,
],
- };
+ }
},
methods: {
changeMap(res) {
- this.isSplitFlag = 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;
+ 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);
+ window.map.updateSize()
+ that.showSplitMap()
+ }, 500)
- break;
+ break
case 2:
- this.isSdkMapFlag = false;
- this.isShowDs = false;
- this.isShowOlMap = false;
- this.isOlMapFlag = true;
+ this.isSdkMapFlag = false
+ this.isShowDs = false
+ this.isShowOlMap = false
+ this.isOlMapFlag = true
setTimeout(function () {
- window.map.updateSize();
- }, 300);
- break;
+ window.map.updateSize()
+ }, 300)
+ break
case 3:
- this.isSdkMapFlag = true;
- this.isShowDs = false;
- this.isShowOlMap = false;
- this.isOlMapFlag = false;
- this.isShowCeMap = false;
- break;
+ this.isSdkMapFlag = true
+ this.isShowDs = false
+ this.isShowOlMap = false
+ this.isOlMapFlag = false
+ this.isShowCeMap = false
+ break
}
},
showSplitMap() {
- var that = this;
- $('#mapView')
+ var that = this
+ $("#mapView")
.off()
- .on('mousemove', function () {
+ .on("mousemove", function () {
if (that.isSplitFlag == 1) {
- window.Viewer.camera.changed.addEventListener(that.sdktool());
+ window.Viewer.camera.changed.addEventListener(that.sdktool())
}
})
- .on('mouseout', function () {
+ .on("mouseout", function () {
if (that.isSplitFlag == 1) {
- window.Viewer.camera.changed.removeEventListener(that.sdktool());
+ window.Viewer.camera.changed.removeEventListener(that.sdktool())
}
- });
+ })
let mapZoomAndMove = function (event) {
- var position = window.map.getView().getCenter();
+ 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()));
+ 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')
+ })
+ }
+ $("#map")
.off()
- .on('mousemove', function () {
+ .on("mousemove", function () {
if (that.isSplitFlag == 1) {
- that.olzoomAndMove(mapZoomAndMove);
+ that.olzoomAndMove(mapZoomAndMove)
}
})
- .on('mouseout', function () {
+ .on("mouseout", function () {
if (that.isSplitFlag == 1) {
- that.clearolzoomAndMove();
+ that.clearolzoomAndMove()
}
- });
+ })
},
clearolzoomAndMove() {
- let registerOnZoomArr = window.map.get('registerOnZoom');
+ 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]);
+ window.map.un("moveend", registerOnZoomArr[i])
}
}
},
olzoomAndMove(eventListen, notListenMove) {
// 璁板綍鍦板浘缂╂斁锛岀敤浜庡垽鏂嫋鍔�
window.map.lastZoom =
- window.map.lastZoom || window.map.getView().getZoom();
+ window.map.lastZoom || window.map.getView().getZoom()
// 鍦板浘缂╂斁浜嬩欢
let registerOnZoom = function (e) {
// 涓嶇洃鍚湴鍥炬嫋鍔ㄤ簨浠�
if (notListenMove) {
if (window.map.lastZoom != window.map.getView().getZoom()) {
- eventListen && eventListen(e);
+ eventListen && eventListen(e)
}
} else {
- eventListen && eventListen(e);
+ eventListen && eventListen(e)
}
- window.map.lastZoom = window.map.getView().getZoom();
- };
+ window.map.lastZoom = window.map.getView().getZoom()
+ }
// 淇濆瓨缂╂斁鍜屾嫋鍔ㄤ簨浠跺璞★紝鐢ㄤ簬鍚庢湡绉婚櫎
- let registerOnZoomArr = map.get('registerOnZoom') || [];
+ let registerOnZoomArr = map.get("registerOnZoom") || []
- registerOnZoomArr.push(registerOnZoom);
+ registerOnZoomArr.push(registerOnZoom)
// 浣跨敤鍦板浘 set 鏂规硶淇濆瓨浜嬩欢瀵硅薄
- window.map.set('registerOnZoom', registerOnZoomArr);
+ window.map.set("registerOnZoom", registerOnZoomArr)
// 鐩戝惉鍦板浘绉诲姩缁撴潫浜嬩欢
- window.map.on('moveend', registerOnZoom);
+ window.map.on("moveend", registerOnZoom)
- return eventListen;
+ 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);
+ 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);
+ 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 i
}
}
- return this.levelArray.length - 1;
+ return this.levelArray.length - 1
},
getHeight(level) {
if (level > 0 && level < 23) {
- return this.levelArray[level];
+ return this.levelArray[level]
}
- return this.levelArray[this.levelArray.length - 1];
+ return this.levelArray[this.levelArray.length - 1]
},
},
mounted() {
- this.$bus.$on('changemap', (e) => {
- this.changeMap(e);
- });
+ this.$bus.$on("changemap", e => {
+ this.changeMap(e)
+ })
},
-};
+}
</script>
<style scoped>
--
Gitblit v1.9.3