From 2364c314288f26a4d29b7d22e9baa1e45f43aaeb Mon Sep 17 00:00:00 2001
From: 584911253@qq.com <584911253@qq.com>
Date: 星期日, 26 二月 2023 17:44:45 +0800
Subject: [PATCH] 综合展示样式修改
---
src/components/mapsdk.vue | 167 ++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 134 insertions(+), 33 deletions(-)
diff --git a/src/components/mapsdk.vue b/src/components/mapsdk.vue
index 220c225..ccab4d6 100644
--- a/src/components/mapsdk.vue
+++ b/src/components/mapsdk.vue
@@ -117,11 +117,10 @@
<el-form
:model="comprehensive"
:inline="true"
- label-width="50px"
>
<el-form-item label="鍦板悕:">
<el-input
- style="width: 200px"
+ style="width: 160px"
v-model="comprehensive.name"
></el-input>
</el-form-item>
@@ -141,27 +140,34 @@
align="center"
type="index"
label="搴忓彿"
- width="70px"
/>
- <el-table-column
- prop="name"
- align="center"
- label="瀹氫綅"
- >
+ <el-table-column prop="name" align="center" label="鍦板悕">
<template slot-scope="scope">
<el-button
- @click="handleLocation(scope.$index, scope.row)"
- size="small"
- icon="el-icon-place"
- ></el-button>
+ @click="handleLocation(scope.$index, scope.row)"
+ size="small"
+ >{{scope.row.name}}<i class="el-icon-place" style="padding-left: 5px"></i></el-button>
</template>
</el-table-column>
- <el-table-column
- prop="name"
- align="center"
- label="鍦板悕"
- >
- </el-table-column>
+<!-- <el-table-column-->
+<!-- prop="name"-->
+<!-- align="center"-->
+<!-- label="瀹氫綅"-->
+<!-- >-->
+<!-- <template slot-scope="scope">-->
+<!-- <el-button-->
+<!-- @click="handleLocation(scope.$index, scope.row)"-->
+<!-- size="small"-->
+<!-- icon="el-icon-place"-->
+<!-- ></el-button>-->
+<!-- </template>-->
+<!-- </el-table-column>-->
+<!-- <el-table-column-->
+<!-- prop="name"-->
+<!-- align="center"-->
+<!-- label="鍦板悕"-->
+<!-- >-->
+<!-- </el-table-column>-->
</el-table>
<div class="pagination_box">
<el-pagination
@@ -169,8 +175,9 @@
@current-change="handleCurrentChange"
:current-page="listData.pageIndex"
:page-sizes="[10, 20, 50, 100]"
+ :pager-count = "3"
:page-size="listData.pageSize"
- layout="total, sizes, prev, pager, next, jumper"
+ layout="total, prev, pager, next"
:total="count"
>
</el-pagination>
@@ -242,16 +249,31 @@
</div>
</el-card>
</div>
- <div
- @click="changeMenulayer"
- class="center CenDiv"
- :class="{ center1: centerFlag }"
- >
+ <div style="display: flex">
<div
- id="cenBg"
- v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
- ></div>
+ @click="changeMenulayer"
+ class="center CenDiv"
+ :class="{ center1: centerFlag }"
+ >
+ <div
+ id="cenBg"
+ v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
+ ></div>
+ </div>
+ <div @click="changeMapType" class="changeMapType">
+ <div id="cenBg" :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"></div>
+ </div>
</div>
+<!-- <div-->
+<!-- @click="changeMenulayer"-->
+<!-- class="center CenDiv"-->
+<!-- :class="{ center1: centerFlag }"-->
+<!-- >-->
+<!-- <div-->
+<!-- id="cenBg"-->
+<!-- v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"-->
+<!-- ></div>-->
+<!-- </div>-->
</div>
</div>
</template>
@@ -359,12 +381,16 @@
children: "children",
label: "label",
}, //鏍戠粦瀹氬璞�
+ show2DMap:false,
};
},
mounted() {
this.init3DMap();
this.$bus.$on("mapChangeBox", (res) => {
this.showChangeBox(res);
+ });
+ this.$bus.$on('changemapType', (e) => {
+ this.show2DMap = e;
});
},
methods: {
@@ -503,8 +529,10 @@
} else if (res.name == "Coord") {
if (res.id == "1") {
this.showCoordLocalBoxDialog = true;
+ this.showToponymicLocalBoxDialog = false;
} else if (res.id == "2") {
this.showToponymicLocalBoxDialog = true;
+ this.showCoordLocalBoxDialog = false;
this.getToponymicData();
}
} else if (res.name == "Analysis") {
@@ -609,10 +637,35 @@
var lon = parseFloat(this.coordFrom.lon);
var lat = parseFloat(this.coordFrom.lat);
var height = parseFloat(this.coordFrom.height);
+ var position = {
+ X: lon,
+ Y: lat,
+ Altitude: 2000,
+ };
+ this.imagePoint = sgworld.Creator.CreateLabel(
+ position,
+ "",
+ SmartEarthRootUrl + "Workers/image/mark.png",
+ {
+ disableDepthTestDistance: Infinity,
+ scale: 0.8,
+ },
+ 0,
+ "宸℃鐐�"
+ );
+
sgworld.Navigate.jumpTo({
//璺宠浆瑙嗚
- destination: new Cesium.Cartesian3.fromDegrees(lon, lat, height),
+ destination: new Cesium.Cartesian3.fromDegrees(
+ lon,
+ lat,
+ height
+ ),
});
+ // sgworld.Navigate.jumpTo({
+ // //璺宠浆瑙嗚
+ // destination: new Cesium.Cartesian3.fromDegrees(lon, lat, height),
+ // });
},
//缂撳啿鍖哄垎鏋�
clearBuffer() {
@@ -856,6 +909,20 @@
}
}
},
+ //浜岀淮/涓夌淮鍦板浘鍒囨崲
+ changeMapType(){
+ // debugger
+ this.show2DMap = !this.show2DMap;
+ //浜岀淮
+ if (this.show2DMap){
+ this.$bus.$emit("changemap", 2);
+ }
+ //涓夌淮
+ else {
+ this.$bus.$emit("changemap", 3);
+ }
+ this.$bus.$emit("changemapType", this.show2DMap);
+ },
},
};
</script>
@@ -872,11 +939,12 @@
overflow: hidden;
position: relative;
.toponymicLocalBox {
- width: 750px;
+ width: 350px;
+ //width: 750px;
height: 450x;
z-index: 40;
position: absolute;
- right: 1%;
+ right: 6%;
bottom: 1%;
}
.bufferBox {
@@ -884,7 +952,7 @@
height: 230px;
z-index: 40;
position: absolute;
- right: 1%;
+ right: 6%;
bottom: 1%;
}
.coordLocalBox {
@@ -892,7 +960,7 @@
height: 370px;
z-index: 40;
position: absolute;
- right: 1%;
+ right: 6%;
bottom: 1%;
}
.pathAnalysisBox {
@@ -900,7 +968,7 @@
z-index: 40;
position: absolute;
- right: 1%;
+ right: 6%;
bottom: 1%;
}
@@ -1026,6 +1094,39 @@
border-radius: 5px;
}
+.changeMapType{
+ position: absolute;
+ bottom: 1%;
+ left: calc(1% + 75px);
+ height: 40px;
+ width: 60px;
+ z-index: 101;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ box-shadow: 3px 3px 6px #666;
+ //border: 1px solid rgba(204, 204, 204, 0.76);
+ border-radius: 5px;
+ background: #fff;
+ cursor: pointer;
+}
+.mapTypeTwo{
+ width: 100%;
+ height: 100%;
+ margin-left: 10px;
+ background-image: url("../assets/img/3dmap.png");
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+.mapTypeThree{
+ width: 100%;
+ height: 100%;
+ margin-left: 10px;
+ background-image: url("../assets/img/2dmap.png");
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+
// .menuSelect .el-input__inner {
// background: rgba(255, 255, 255, 0.2) !important;
// color: white !important;
--
Gitblit v1.9.3