From 97277a2c41d80bbf375f88a47e242f1b17602b2b Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期三, 29 十一月 2023 16:53:10 +0800
Subject: [PATCH] 发布管理修改
---
src/components/MapDiv.vue | 239 ++++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 155 insertions(+), 84 deletions(-)
diff --git a/src/components/MapDiv.vue b/src/components/MapDiv.vue
index 8c76f52..e55ced2 100644
--- a/src/components/MapDiv.vue
+++ b/src/components/MapDiv.vue
@@ -10,7 +10,10 @@
>
<mapsdk></mapsdk>
</div>
- <div id="ds" v-show="isShowDs"></div>
+ <div
+ id="ds"
+ v-show="isShowDs"
+ ></div>
<!--openLayers鏄剧ず鐣岄潰-->
<div
v-show="isOlMapFlag"
@@ -20,20 +23,28 @@
>
<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 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"
+import AddOnlineMap from '../views/Tools/AddOnlineMap.vue'
+import AddOnlineOlMap from '../views/Tools/AddOnlineOLMap.vue'
export default {
- name: '',
+ name: "",
+
components: {
mapsdk,
mapol,
+ AddOnlineMap,
+ AddOnlineOlMap
},
data() {
return {
@@ -48,150 +59,210 @@
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
+ 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.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);
+
+ 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
+ var val = this.$store.state.Map3;
setTimeout(function () {
- window.map.updateSize();
- }, 300);
- break;
+ 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;
- break;
+ 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')
+ 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 pos = transform(position, 'EPSG:3857', 'EPSG:4326');
- var level = that.getHeight(parseInt(window.map.getView().getZoom()));
+ 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')
+ })
+ }
+ $("#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);
- window.map
- .getView()
- .setCenter(transform([lng, lat], 'EPSG:4326', 'EPSG:3857'));
- window.map.getView().setZoom(level);
+ 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 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]
+ },
+ 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('changemap', (e) => {
- this.changeMap(e);
- });
+ 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>
@@ -213,7 +284,7 @@
width: 100%;
}
.sdkMapTwo {
- width: calc(50% - 1px);
+ width: calc(50% - 2px);
}
.olMap {
height: 100%;
@@ -225,7 +296,7 @@
width: 100%;
}
.olMapTwo {
- width: calc(50% - 1px);
+ width: calc(50% - 2px);
}
#ds {
height: 100%;
--
Gitblit v1.9.3