From 6c17299e2b123a55423e01933654a10d94be616b Mon Sep 17 00:00:00 2001
From: lixuliang <lixuliang_hd@126.com>
Date: 星期日, 28 四月 2024 22:19:29 +0800
Subject: [PATCH] 模型库 军标库
---
src/components/MapDiv.vue | 223 ++++++++++++++++++++++++++++---------------------------
1 files changed, 113 insertions(+), 110 deletions(-)
diff --git a/src/components/MapDiv.vue b/src/components/MapDiv.vue
index e55ced2..55c35e4 100644
--- a/src/components/MapDiv.vue
+++ b/src/components/MapDiv.vue
@@ -9,11 +9,10 @@
:class="[isShowCeMap ? 'sdkMapTwo' : 'sdkMapOne']"
>
<mapsdk></mapsdk>
+ <militarymark></militarymark>
+ <modelplotting></modelplotting>
</div>
- <div
- id="ds"
- v-show="isShowDs"
- ></div>
+ <div id="ds" v-show="isShowDs"></div>
<!--openLayers鏄剧ず鐣岄潰-->
<div
v-show="isOlMapFlag"
@@ -29,22 +28,25 @@
</template>
<script>
-
-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'
+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
+ AddOnlineOlMap,
},
data() {
return {
@@ -59,210 +61,211 @@
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()
- window.map.getView().setCenter([val[0], val[1]])
- window.map.getView().setZoom(val[2])
- }, 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
+ 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;
+ this.$store.state.setChangeBaseMap = true;
window.Viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(val[0], val[1], val[2]),
- })
+ });
- break
+ 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]
+ 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]
+ 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
+ var that = this;
$("#mapView")
.off()
.on("mousemove", function () {
if (that.isSplitFlag == 1) {
- window.Viewer.camera.changed.addEventListener(that.sdktool())
+ window.Viewer.camera.changed.addEventListener(that.sdktool());
}
})
.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")
.off()
.on("mousemove", function () {
if (that.isSplitFlag == 1) {
- that.olzoomAndMove(mapZoomAndMove)
+ that.olzoomAndMove(mapZoomAndMove);
}
})
.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
+ 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];
},
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);
+ 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();
+ 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 => {
+ this.showBaseMapLayer(res);
+ });
+ //
+ this.$bus.$on("changemap", (e) => {
if (this.isSplitFlag == 1) {
- this.changeMap(3)
+ this.changeMap(3);
} else {
- this.changeMap(e)
+ this.changeMap(e);
}
-
- })
+ });
},
-}
+};
</script>
<style scoped>
--
Gitblit v1.9.3