From 7c60e0fe106b053bfb7f9bc889677f2a5ff35608 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期二, 21 三月 2023 14:14:28 +0800
Subject: [PATCH] 添加地形切换效果，底图切换功能，在线制图，服务发布页面优化，转孔柱状图更新
---
src/components/mapsdk.vue | 103 +++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 90 insertions(+), 13 deletions(-)
diff --git a/src/components/mapsdk.vue b/src/components/mapsdk.vue
index 2ae02a8..ebf0113 100644
--- a/src/components/mapsdk.vue
+++ b/src/components/mapsdk.vue
@@ -299,20 +299,32 @@
</div>
<div style="display: flex">
<div
- @click="changeMenulayer"
- class="center CenDiv"
- :class="{ center1: centerFlag }"
+ class="changeTerrain"
+ @click="changeTerrainLayer"
>
<div
+ title="鍦板舰鍒囨崲"
id="cenBg"
- v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
+ class="mapTerrain"
></div>
</div>
+ <div
+ @click="changeMenulayer"
+ class="center CenDiv"
+ >
+ <div
+ title="搴曞浘鍒囨崲"
+ id="cenBg"
+ class="mapBaseMap"
+ ></div>
+ </div>
+
<div
@click="changeMapType"
class="changeMapType"
>
<div
+ title="2/3缁村垏鎹�"
id="cenBg"
:class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"
></div>
@@ -700,7 +712,8 @@
attributeList: [],
valueZ: 0,
valueX: 0,
- valueY: 0
+ valueY: 0,
+ terrainflag: false,
};
},
mounted() {
@@ -826,14 +839,47 @@
layerName: window.sceneConfig.mptName,
requestVertexNormals: true,
};
- sgworld.Creator.sfsterrainprovider("", option, "", true, "");
+ window.terrainLayer = sgworld.Creator.sfsterrainprovider("", option, "", true, "");
window.elevationTool = new SmartEarth.ElevationTool(window.sgworld);
elevationTool.setContourColor("#F1D487");
},
+ //dem鍒囨崲
+ changeTerrainLayer() {
+ if (this.terrainflag) {
+ Viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider();
+ var option = {
+ url: window.sceneConfig.SGUrl,
+ layerName: window.sceneConfig.mptName,
+ requestVertexNormals: true,
+ };
+ window.terrainLayer = sgworld.Creator.sfsterrainprovider("", option, "", true, "");
+ Viewer.camera.flyTo({
+ destination: Cesium.Cartesian3.fromDegrees(110, 33, 8000000),
+ });
+ } else {
+ window.terrainLayer.deleteObject();
+ window.terrainLayer = null;
+
+ window.terrainLayer = new Cesium.CesiumTerrainProvider({
+ url: LFData + '/3d/terrain/dem20230321'
+ });
+ Viewer.terrainProvider = window.terrainLayer
+ Viewer.camera.flyTo({
+ destination: Cesium.Cartesian3.fromDegrees(113.229279, 31.215949, 1000),
+ orientation: {
+ heading: 6.08434611923462,
+ pitch: Cesium.Math.toRadians(-45.0),
+ roll: 0.0
+ }
+ });
+
+ }
+ this.terrainflag = !this.terrainflag
+ },
changeMenulayer() {
this.$bus.$emit("setChangeBaseMapLayer", true)
// this.$refs && this.$refs.addOnlineMap && this.$refs.addOnlineMap.open("鍦颁笅妯″紡", null,);
@@ -1717,15 +1763,15 @@
.CenDiv {
position: absolute;
bottom: 1%;
- left: 1%;
+ left: calc(1% + 75px);
height: 40px;
width: 60px;
z-index: 101;
display: flex;
flex-direction: column;
justify-content: space-between;
- box-shadow: 3px 3px 6px #666;
- border: 1px solid rgba(204, 204, 204, 0.76);
+ // box-shadow: 3px 3px 6px #666;
+ // border: 1px solid rgba(204, 204, 204, 0.76);
border-radius: 5px;
cursor: pointer;
}
@@ -1743,9 +1789,9 @@
flex-direction: column;
justify-content: space-between;
}
-.CenDiv:hover {
- border: 1px solid #409eff;
-}
+// .CenDiv:hover {
+// border: 1px solid #409eff;
+// }
.active {
width: 100%;
height: 100%;
@@ -1763,10 +1809,18 @@
border-radius: 5px;
}
+.mapBaseMap {
+ width: 100%;
+ height: 100%;
+ margin-left: 10px;
+ background-image: url("../assets/img/synthesis/搴曞浘.png");
+ background-repeat: no-repeat;
+ background-size: contain;
+}
.changeMapType {
position: absolute;
bottom: 1%;
- left: calc(1% + 75px);
+ left: calc(1% + 150px);
height: 40px;
width: 60px;
z-index: 101;
@@ -1779,6 +1833,21 @@
cursor: pointer;
}
+.changeTerrain {
+ position: absolute;
+ bottom: 1%;
+ left: 1%;
+ height: 40px;
+ width: 60px;
+ z-index: 101;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ border-radius: 5px;
+ cursor: pointer;
+}
+
.mapTypeTwo {
width: 100%;
height: 100%;
@@ -1787,6 +1856,14 @@
background-repeat: no-repeat;
background-size: contain;
}
+.mapTerrain {
+ width: 100%;
+ height: 100%;
+ margin-left: 10px;
+ background-image: url("../assets/img/synthesis/鍦板舰.png");
+ background-repeat: no-repeat;
+ background-size: contain;
+}
.mapTypeThree {
width: 100%;
height: 100%;
--
Gitblit v1.9.3