From 50f52beb0ed100105166f62027cd0b15e6b596dc Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期六, 12 十一月 2022 15:02:01 +0800
Subject: [PATCH] 重新
---
src/components/mapsdk.vue | 647 ++++++++++++++++++++++++++++++----------------------------
1 files changed, 333 insertions(+), 314 deletions(-)
diff --git a/src/components/mapsdk.vue b/src/components/mapsdk.vue
index 682e776..3dfee35 100644
--- a/src/components/mapsdk.vue
+++ b/src/components/mapsdk.vue
@@ -1,170 +1,162 @@
<template>
- <div class="mapBox">
- <div id="mapdiv">
- <div class="menu_Top" v-if="$store.state.mapMenuBoolean">
- <map-menu-top v-if="$store.state.mapMenuBoxFlag == '1'" />
- <map-space-top v-if="$store.state.mapMenuBoxFlag == '2'" />
- </div>
- <div class="menu_Popup" v-if="$store.state.mapPopBoolean">
- <map-menu-pop v-if="$store.state.mapPopBoxFlag == '1'" />
- <map-space-pop v-if="$store.state.mapPopBoxFlag == '2'" />
- </div>
- <div class="bufferBox" v-if="showBufferBoxDialog">
- <el-card class="box-card">
- <div slot="header" class="clearfix">
- <span>缂撳啿鍖哄垎鏋�</span>
- <div style="float: right; cursor: pointer">
- <i class="el-icon-close" @click="closeBufferBox(1)"></i>
- </div>
+ <div id="mapdiv">
+ <div class="menu_Top" v-if="$store.state.mapMenuBoolean">
+ <map-menu-top v-if="$store.state.mapMenuBoxFlag == '1'" />
+ <map-space-top v-if="$store.state.mapMenuBoxFlag == '2'" />
+ </div>
+ <div class="menu_Popup" v-if="$store.state.mapPopBoolean">
+ <map-menu-pop v-if="$store.state.mapPopBoxFlag == '1'" />
+ <map-space-pop v-if="$store.state.mapPopBoxFlag == '2'" />
+ </div>
+ <div class="bufferBox" v-if="showBufferBoxDialog">
+ <el-card class="box-card">
+ <div slot="header" class="clearfix">
+ <span>缂撳啿鍖哄垎鏋�</span>
+ <div style="float: right; cursor: pointer">
+ <i class="el-icon-close" @click="closeBufferBox(1)"></i>
</div>
- <div class="box-body">
- <el-form ref="form" :model="bufFrom" label-width="100px">
- <el-form-item label="缂撳啿鍗婂緞(绫�):">
- <el-input v-model="bufFrom.val"></el-input>
- </el-form-item>
- <el-form-item>
- <el-button @click="addBuffer(1)" type="info">鐐�</el-button>
- <el-button @click="addBuffer(2)" type="info">绾�</el-button>
- <el-button @click="addBuffer(3)" type="info">闈�</el-button>
- <el-button @click="clearBuffer" type="info">娓呴櫎</el-button>
- </el-form-item>
- </el-form>
+ </div>
+ <div class="box-body">
+ <el-form ref="form" :model="bufFrom" label-width="100px">
+ <el-form-item label="缂撳啿鍗婂緞(绫�):">
+ <el-input v-model="bufFrom.val"></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button @click="addBuffer(1)" type="info">鐐�</el-button>
+ <el-button @click="addBuffer(2)" type="info">绾�</el-button>
+ <el-button @click="addBuffer(3)" type="info">闈�</el-button>
+ <el-button @click="clearBuffer" type="info">娓呴櫎</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+ </el-card>
+ </div>
+ <div class="coordLocalBox" v-if="showCoordLocalBoxDialog">
+ <el-card class="box-card">
+ <div slot="header" class="clearfix">
+ <span>鍧愭爣瀹氫綅</span>
+ <div style="float: right; cursor: pointer">
+ <i class="el-icon-close" @click="closeBufferBox(2)"></i>
</div>
- </el-card>
- </div>
- <div class="coordLocalBox" v-if="showCoordLocalBoxDialog">
- <el-card class="box-card">
- <div slot="header" class="clearfix">
- <span>鍧愭爣瀹氫綅</span>
- <div style="float: right; cursor: pointer">
- <i class="el-icon-close" @click="closeBufferBox(2)"></i>
- </div>
+ </div>
+ <div class="box-body">
+ <el-form ref="form" :model="coordFrom" label-width="50px">
+ <el-form-item label="缁忓害:">
+ <el-input v-model="coordFrom.lon"></el-input>
+ </el-form-item>
+ <el-form-item label="绾害:">
+ <el-input v-model="coordFrom.lat"></el-input>
+ </el-form-item>
+ <el-form-item label="楂樺害:">
+ <el-input v-model="coordFrom.height"></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button @click="setCoordLocal" type="info">瀹氫綅</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+ </el-card>
+ </div>
+ <div class="toponymicLocalBox" v-if="showToponymicLocalBoxDialog">
+ <el-card class="box-card">
+ <div slot="header" class="clearfix">
+ <span>鍦板悕瀹氫綅</span>
+ <div style="float: right; cursor: pointer">
+ <i class="el-icon-close" @click="closeBufferBox(3)"></i>
</div>
- <div class="box-body">
- <el-form ref="form" :model="coordFrom" label-width="50px">
- <el-form-item label="缁忓害:">
- <el-input v-model="coordFrom.lon"></el-input>
- </el-form-item>
- <el-form-item label="绾害:">
- <el-input v-model="coordFrom.lat"></el-input>
- </el-form-item>
- <el-form-item label="楂樺害:">
- <el-input v-model="coordFrom.height"></el-input>
- </el-form-item>
- <el-form-item>
- <el-button @click="setCoordLocal" type="info">瀹氫綅</el-button>
- </el-form-item>
- </el-form>
+ </div>
+ <div class="box-body">
+ <el-form :model="comprehensive" :inline="true" label-width="50px">
+ <el-form-item label="鍦板悕:">
+ <el-input
+ style="width: 200px"
+ v-model="comprehensive.name"
+ ></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="info">鏌ヨ</el-button>
+ </el-form-item>
+ </el-form>
+ <el-table :data="tableData" height="200px" style="width: 100%">
+ <el-table-column
+ align="center"
+ type="index"
+ label="搴忓彿"
+ width="70px"
+ />
+ <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 style="margin-top: 10px" class="pagination_box">
+ <el-pagination
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page="listData.pageIndex"
+ :page-sizes="[10, 20, 30, 40]"
+ :page-size="listData.pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="count"
+ >
+ </el-pagination>
</div>
- </el-card>
- </div>
- <div class="toponymicLocalBox" v-if="showToponymicLocalBoxDialog">
- <el-card class="box-card">
- <div slot="header" class="clearfix">
- <span>鍦板悕瀹氫綅</span>
- <div style="float: right; cursor: pointer">
- <i class="el-icon-close" @click="closeBufferBox(3)"></i>
- </div>
+ </div>
+ </el-card>
+ </div>
+ <div class="pathAnalysisBox" v-if="showPathAnalysisBoxDialog">
+ <el-card class="box-card">
+ <div slot="header" class="clearfix">
+ <span>璺緞鍒嗘瀽</span>
+ <div style="float: right; cursor: pointer">
+ <i class="el-icon-close" @click="closeBufferBox(4)"></i>
</div>
- <div class="box-body">
- <el-form :model="comprehensive" :inline="true" label-width="50px">
- <el-form-item label="鍦板悕:">
- <el-input
- style="width: 200px"
- v-model="comprehensive.name"
- ></el-input>
- </el-form-item>
- <el-form-item>
- <el-button type="info">鏌ヨ</el-button>
- </el-form-item>
- </el-form>
- <el-table :data="tableData" height="200px" style="width: 100%">
- <el-table-column
- align="center"
- type="index"
- label="搴忓彿"
- width="70px"
- />
- <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 style="margin-top: 10px" class="pagination_box">
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="listData.pageIndex"
- :page-sizes="[10, 20, 30, 40]"
- :page-size="listData.pageSize"
- layout="total, sizes, prev, pager, next, jumper"
- :total="count"
+ </div>
+ <div class="box-body">
+ <el-form ref="form" :model="pathFrom" label-width="50px">
+ <el-form-item label="缁忓害:">
+ <el-input style="width: 300px" v-model="pathFrom.lon"></el-input>
+ <el-link
+ :underline="false"
+ @click="showMouseLeftClick(1)"
+ style="margin-left: 10px"
+ ><i style="color: white" class="el-icon-plus"></i
+ ></el-link>
+ </el-form-item>
+ <el-form-item label="绾害:">
+ <el-input style="width: 300px" v-model="pathFrom.lat"></el-input>
+ <el-link
+ :underline="false"
+ @click="showMouseLeftClick(2)"
+ style="margin-left: 10px"
+ ><i style="color: white" class="el-icon-plus"></i
+ ></el-link>
+ </el-form-item>
+ <el-form-item>
+ <el-button @click="showMouseLeftClick(3)" type="info"
+ >鏌ヨ</el-button
>
- </el-pagination>
- </div>
- </div>
- </el-card>
- </div>
- <div class="pathAnalysisBox" v-if="showPathAnalysisBoxDialog">
- <el-card class="box-card">
- <div slot="header" class="clearfix">
- <span>璺緞鍒嗘瀽</span>
- <div style="float: right; cursor: pointer">
- <i class="el-icon-close" @click="closeBufferBox(4)"></i>
- </div>
- </div>
- <div class="box-body">
- <el-form ref="form" :model="pathFrom" label-width="50px">
- <el-form-item label="缁忓害:">
- <el-input
- style="width: 300px"
- v-model="pathFrom.lon"
- ></el-input>
- <el-link
- :underline="false"
- @click="showMouseLeftClick(1)"
- style="margin-left: 10px"
- ><i style="color: white" class="el-icon-plus"></i
- ></el-link>
- </el-form-item>
- <el-form-item label="绾害:">
- <el-input
- style="width: 300px"
- v-model="pathFrom.lat"
- ></el-input>
- <el-link
- :underline="false"
- @click="showMouseLeftClick(2)"
- style="margin-left: 10px"
- ><i style="color: white" class="el-icon-plus"></i
- ></el-link>
- </el-form-item>
- <el-form-item>
- <el-button @click="showMouseLeftClick(3)" type="info"
- >鏌ヨ</el-button
- >
- </el-form-item>
- </el-form>
- </div>
- </el-card>
- </div>
+ </el-form-item>
+ </el-form>
+ </div>
+ </el-card>
+ </div>
+ <div
+ @click="changeMenulayer"
+ class="center CenDiv"
+ :class="{ center1: centerFlag }"
+ >
<div
- @click="changeMenulayer"
- class="center CenDiv"
- :class="{ center1: centerFlag }"
- >
- <div
- id="cenBg"
- v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
- ></div>
- </div>
+ id="cenBg"
+ v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
+ ></div>
</div>
</div>
</template>
@@ -175,6 +167,7 @@
import mapMenuPop from './MapView/mapMenuPop.vue';
import mapSpaceTop from './MapView/mapSpaceTop.vue';
import mapSpacePop from './MapView/mapSpacePop.vue';
+
import {
select_Comprehensive_ByPageAndCount,
select_Comprehensive_SelectWktById,
@@ -403,24 +396,38 @@
},
//鏄剧ず寮圭獥
showChangeBox(res) {
- if (res.name == 'Query') {
- if (res.id == '6') {
- } else if (res.id == '7') {
- } else {
- this.showBufferBoxDialog = true;
- }
- } else if (res.name == 'Coord') {
- if (res.id == '1') {
- this.showCoordLocalBoxDialog = true;
- } else if (res.id == '2') {
- this.showToponymicLocalBoxDialog = true;
- this.getToponymicData();
- }
- } else if (res.name == 'Analysis') {
- if (res.id == '3') {
- this.showPathAnalysisBoxDialog = true;
- }
+ switch (res.name) {
+ case 'Query':
+ if (res.id == '6') {
+ } else if (res.id == '7') {
+ } else {
+ this.showBufferBoxDialog = true;
+ }
+ break;
+ case 'Coord':
+ if (res.id == '1') {
+ this.showCoordLocalBoxDialog = true;
+ } else if (res.id == '2') {
+ this.showToponymicLocalBoxDialog = true;
+ this.getToponymicData();
+ }
+ break;
+ case 'Analysis':
+ if (res.id == '3') {
+ this.showPathAnalysisBoxDialog = true;
+ }
+ break;
+ case 'exportLayer':
+ if (res.id == 1) {
+ } else if (res.id == 2) {
+ this.changeMenulayer();
+ }
+ break;
}
+ // if (res.name == 'Query') {
+ // } else if (res.name == 'Coord') {
+ // } else if (res.name == 'Analysis') {
+ // }
},
handleSizeChange(val) {
this.listData.pageSize = val;
@@ -731,127 +738,139 @@
</script>
<style scoped lang="less">
-.mapBox {
+// .mapBox {
+// width: 100%;
+// height: 100%;
+// overflow: hidden;
+// margin: 0;
+// padding: 0;
+
+#mapdiv {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
+ position: relative;
- #mapdiv {
- width: 100%;
- height: 100%;
- overflow: hidden;
- margin: 0;
- padding: 0;
+ .toponymicLocalBox {
+ width: 750px;
+ height: 450x;
+ z-index: 40;
position: absolute;
-
- .toponymicLocalBox {
- width: 750px;
- height: 450x;
- z-index: 40;
- position: absolute;
- right: 1%;
- bottom: 1%;
+ right: 1%;
+ bottom: 1%;
+ }
+ .bufferBox {
+ width: 412px;
+ height: 230px;
+ z-index: 40;
+ position: absolute;
+ right: 1%;
+ bottom: 1%;
+ }
+ .coordLocalBox {
+ width: 350px;
+ height: 370px;
+ z-index: 40;
+ position: absolute;
+ right: 1%;
+ bottom: 1%;
+ }
+ .pathAnalysisBox {
+ width: 412px;
+ z-index: 40;
+ position: absolute;
+ right: 1%;
+ bottom: 1%;
+ }
+ .exportBoxLayer {
+ z-index: 40;
+ position: absolute;
+ top: 3%;
+ left: 20%;
+ }
+ .exportMenuLayer {
+ z-index: 40;
+ position: absolute;
+ top: 15%;
+ left: 2%;
+ width: 15%;
+ }
+ .box-body {
+ padding: 18px;
+ /deep/ .el-form-item__label {
+ color: white !important;
}
- .bufferBox {
- width: 412px;
- height: 230px;
- z-index: 40;
- position: absolute;
- right: 1%;
- bottom: 1%;
- }
- .coordLocalBox {
- width: 350px;
- height: 370px;
- z-index: 40;
- position: absolute;
- right: 1%;
- bottom: 1%;
- }
- .pathAnalysisBox {
- width: 412px;
-
- z-index: 40;
- position: absolute;
- right: 1%;
- bottom: 1%;
- }
- .box-body {
- padding: 18px;
- /deep/ .el-form-item__label {
- color: white !important;
- }
- /deep/ .el-input__inner {
- background: rgba(255, 255, 255, 0.2) !important;
- color: white !important;
- }
-
- /deep/.el-table,
- .el-table__expanded-cell {
- background-color: transparent;
- color: white;
- }
-
- /deep/ .el-table tr {
- background-color: transparent !important;
- }
- /deep/ .el-table tbody tr:hover > td {
- background-color: rgba(255, 255, 255, 0.2) !important;
- }
- /deep/.el-table鈥揺nable-row-transition .el-table__body td,
- .el-table .cell {
- background-color: transparent !important;
- }
- /deep/ .el-table th.el-table__cell {
- background-color: transparent !important;
- color: white;
- }
- /deep/.el-pager li {
- background-color: transparent !important;
- color: white;
- }
- /deep/ .btn-prev {
- background-color: transparent !important;
- }
- /deep/ .btn-next {
- background-color: transparent !important;
- color: white !important;
- }
- /deep/ .el-pagination__total {
- color: white;
- }
- /deep/ .el-pagination__jump {
- color: white;
- }
+ /deep/ .el-input__inner {
+ background: rgba(255, 255, 255, 0.2) !important;
+ color: white !important;
}
- .box-card {
- background-color: rgba(0, 0, 0, 0.6);
- border: 1px solid rgba(32, 160, 255, 0.6);
+ /deep/.el-table,
+ .el-table__expanded-cell {
+ background-color: transparent;
color: white;
}
- .menu_Top {
- background: rgba(0, 0, 0, 0.5);
- width: 100%;
- height: 6%;
- padding: 1%;
- position: absolute;
- z-index: 40;
- }
- .menu_Popup {
- background: rgba(0, 0, 0, 0.6);
- width: 60%;
- height: 45%;
- left: 20%;
- bottom: 5%;
- position: absolute;
- z-index: 40;
+ /deep/ .el-table tr {
+ background-color: transparent !important;
+ }
+ /deep/ .el-table tbody tr:hover > td {
+ background-color: rgba(255, 255, 255, 0.2) !important;
+ }
+ /deep/.el-table鈥揺nable-row-transition .el-table__body td,
+ .el-table .cell {
+ background-color: transparent !important;
+ }
+ /deep/ .el-table th.el-table__cell {
+ background-color: transparent !important;
+ color: white;
+ }
+ /deep/.el-pager li {
+ background-color: transparent !important;
+ color: white;
+ }
+ /deep/ .btn-prev {
+ background-color: transparent !important;
+ }
+ /deep/ .btn-next {
+ background-color: transparent !important;
+ color: white !important;
+ }
+ /deep/ .el-pagination__total {
+ color: white;
+ }
+ /deep/ .el-pagination__jump {
+ color: white;
}
}
+
+ .box-card {
+ background-color: rgba(0, 0, 0, 0.6);
+ border: 1px solid rgba(32, 160, 255, 0.6);
+ color: white;
+ }
+ .menu_Top {
+ background: rgba(0, 0, 0, 0.5);
+ width: 100%;
+ height: 6%;
+ padding: 1%;
+ position: absolute;
+ z-index: 40;
+ }
+ .menu_Popup {
+ background: rgba(0, 0, 0, 0.6);
+ width: 60%;
+ height: 45%;
+
+ left: 20%;
+ bottom: 5%;
+ position: absolute;
+ z-index: 40;
+ }
}
+// }
// /deep/
// /deep/ .el-input__inner {
@@ -896,23 +915,23 @@
// ::v-deep .el-pagination__jump {
// color: white;
// }
-// .center {
-// left: 1%;
-// }
-// .CenDiv {
-// position: absolute;
-// bottom: 1%;
-// 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);
-// border-radius: 5px;
-// cursor: pointer;
-// }
+.center {
+ left: 1%;
+}
+.CenDiv {
+ position: absolute;
+ bottom: 1%;
+ 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);
+ border-radius: 5px;
+ cursor: pointer;
+}
// .center1 {
// right: 1%;
// }
@@ -930,22 +949,22 @@
// .CenDiv:hover {
// border: 1px solid #409eff;
// }
-// .active {
-// width: 100%;
-// height: 100%;
-// background: url('../assets/img/Layer/imgLayer2.png') no-repeat center;
-// position: absolute;
-// background-size: 100% 100%;
-// border-radius: 5px;
-// }
-// .menuLayer {
-// width: 100%;
-// height: 100%;
-// background: url('../assets/img/Layer/imgLayer1.png') no-repeat center;
-// position: absolute;
-// background-size: 100% 100%;
-// border-radius: 5px;
-// }
+.active {
+ width: 100%;
+ height: 100%;
+ background: url('../assets/img/Layer/imgLayer2.png') no-repeat center;
+ position: absolute;
+ background-size: 100% 100%;
+ border-radius: 5px;
+}
+.menuLayer {
+ width: 100%;
+ height: 100%;
+ background: url('../assets/img/Layer/imgLayer1.png') no-repeat center;
+ position: absolute;
+ background-size: 100% 100%;
+ border-radius: 5px;
+}
// .menuSelect .el-input__inner {
// background: rgba(255, 255, 255, 0.2) !important;
--
Gitblit v1.9.3