From d3208016fbb567fb55186e0275fdd1b421ee3e0d Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期五, 04 十一月 2022 09:45:57 +0800
Subject: [PATCH] 综合展示空间查询
---
src/components/MapView/mapSpaceTop.vue | 123 +++
src/api/api.js | 69 +
public/config/rollups.js | 0
src/views/Synthesis/inquire.vue | 48
public/index.html | 1
src/main.js | 2
src/store/index.js | 6
src/components/MapView/mapMenuTop.vue | 341 ++++++++++
package.json | 2
src/components/MapView/mapMenuPop.vue | 294 ++++++++
src/components/mapsdk.vue | 715 ++++++++++++--------
src/components/MapView/mapSpacePop.vue | 386 +++++++++++
12 files changed, 1,655 insertions(+), 332 deletions(-)
diff --git a/package.json b/package.json
index dddb33a..65e9657 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit"
},
"dependencies": {
+ "@turf/turf": "^6.5.0",
"aws-sdk": "^2.963.0",
"axios": "^0.21.1",
"cesium": "^1.84.0",
@@ -24,6 +25,7 @@
"ol": "^6.15.1",
"sql.js": "^1.5.0",
"sqlite3": "^5.0.2",
+ "terraformer-wkt-parser": "^1.2.1",
"vant": "^2.12.25",
"vue": "^2.6.11",
"vue-i18n": "^8.27.2",
diff --git a/src/api/rollups.js b/public/config/rollups.js
similarity index 100%
rename from src/api/rollups.js
rename to public/config/rollups.js
diff --git a/public/index.html b/public/index.html
index 7c4d7db..4833245 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,6 +13,7 @@
<script src="./SmartEarthSDK/Workers/TreeTool.js"></script>
<script src="./config/config.js"></script>
<script src="./config/rsa.min.js"></script>
+ <script src="./config/rollups.js"></script>
<style>
.esriControlsBR {
display: none;
diff --git a/src/api/api.js b/src/api/api.js
index 0a26a90..c3146c0 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -8,7 +8,7 @@
*/
import request from '@/utils/request';
import axios from 'axios';
-import './rollups';
+
//鍏徃鍚庡彴
const service = axios.create({
// baseURL: '/api', // api鐨刡ase_url
@@ -425,20 +425,43 @@
export function select_Comprehensive_SelectWktById(params) {
return request.get('/comprehensive/selectWktById', { params: params });
}
+//涓婁紶Shp鏂囦欢璇诲彇绗竴鏉¤褰曠殑WKT;
+export function inquiry_uploadShp(params) {
+ return request.post('/inquiry/uploadShp', params);
+}
-export function comprehensive_uploadShp(params) {
- return request.post('/comprehensive/uploadShp', params);
+//鏁版嵁绠＄悊=>鏁版嵁妫�绱�=>鍒楄〃鑾峰彇
+export function dataQuerySelectByPage(params) {
+ return request.get('/dataQuery/selectByPage', { params: params });
+}
+
+//鏁版嵁绠＄悊=>鏁版嵁妫�绱�=>鏍规嵁ID鏌ヨWKT
+export function dataQuerySelectWktById(params) {
+ return request.get('/inquiry/selectWktById', { params: params });
+}
+//鏁版嵁绠＄悊=>鏁版嵁妫�绱�=>鏌ヨ瀛楁淇℃伅
+export function inquiry_selectFields(params) {
+ return request.get('/inquiry/selectFields', { params: params });
+}
+//鏁版嵁绠＄悊=>鏁版嵁妫�绱�=>鏌ヨ鍊煎煙淇℃伅
+export function inquiry_selectDomains(params) {
+ return request.get('/inquiry/selectDomains', { params: params });
+}
+
+//缁煎悎灞曠ず=>鍒楄〃鏌ヨ=>鏌ヨ鎵�鏈夎〃
+export function inquiry_SelectTabs(params) {
+ return request.get('/inquiry/selectTabs', { params: params });
}
//璇锋眰绔欏満鐐瑰唴瀹�
export function querySitePoint(size, index, name) {
return service.get(
'/LFServer/SitePoint/Query?pageSize=' +
- size +
- '&pageIndex=' +
- (index - 1) +
- '&name=' +
- name
+ size +
+ '&pageIndex=' +
+ (index - 1) +
+ '&name=' +
+ name
);
}
//璇锋眰绔欏満鐐规暟閲�
@@ -449,11 +472,11 @@
export function queryStationSeries(size, index, name) {
return service.get(
'/LFServer/StationSeries/Query?pageSize=' +
- size +
- '&pageIndex=' +
- (index - 1) +
- '&name=' +
- name
+ size +
+ '&pageIndex=' +
+ (index - 1) +
+ '&name=' +
+ name
);
}
//璇锋眰绠￠亾涓績绾挎暟閲�
@@ -465,11 +488,11 @@
export function queryMarker(size, index, name) {
return service.get(
'/LFServer/Marker/Query?pageSize=' +
- size +
- '&pageIndex=' +
- (index - 1) +
- '&name=' +
- name
+ size +
+ '&pageIndex=' +
+ (index - 1) +
+ '&name=' +
+ name
);
}
//璇锋眰鏍囨々鏁伴噺
@@ -516,10 +539,12 @@
).toString();
}
export function decr(word) {
- return CryptoJS.AES.encrypt(
- CryptoJS.enc.Utf8.parse(word),
- CryptoJS.enc.Utf8.parse(base64Decode('QSNzX2xGX3NFcnZlX2sueQ==')),
- { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }
+ return CryptoJS.enc.Utf8.stringify(
+ CryptoJS.AES.decrypt(
+ word,
+ CryptoJS.enc.Utf8.parse(base64Decode('QSNzX2xGX3NFcnZlX2sueQ==')),
+ { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }
+ )
).toString();
}
diff --git a/src/components/MapView/mapMenuPop.vue b/src/components/MapView/mapMenuPop.vue
new file mode 100644
index 0000000..63e3749
--- /dev/null
+++ b/src/components/MapView/mapMenuPop.vue
@@ -0,0 +1,294 @@
+<template>
+ <div class="menuPop">
+ <div class="leftBox">
+ <ul>
+ <li
+ v-for="(item, index) in option"
+ @click="setTableChange(item)"
+ class="leftBoxLi"
+ >
+ {{ item.tabDesc }}
+ </li>
+ </ul>
+ </div>
+ <div class="rightBox">
+ <div class="rightTitle">
+ <span>绠￠亾</span>
+ <el-link :underline="false" class="boxClose"
+ ><i class="el-icon-close"></i>
+ </el-link>
+ </div>
+ <el-table :data="tableData" height="220">
+ <el-table-column align="center" type="index" label="搴忓彿" width="50" />
+ <el-table-column label="瀹氫綅" width="100" align="center">
+ <template slot-scope="scope">
+ <el-button
+ icon="el-icon-map-location"
+ size="mini"
+ @click="spaceLocation(scope.$index, scope.row)"
+ ></el-button>
+ </template>
+ </el-table-column>
+ <el-table-column
+ v-for="(item, index) in attributeData"
+ :key="index"
+ :label="item.alias"
+ :prop="item.field"
+ show-overflow-tooltip
+ align="center"
+ ></el-table-column>
+ </el-table>
+ <div class="rightPage">
+ <!-- <el-pagination
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page="listPage.pageIndex"
+ :page-sizes="[10, 20, 30, 40]"
+ :page-size="listPage.pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="listPage.pageCount"
+ >
+ </el-pagination> -->
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import {
+ dataQuerySelectByPage,
+ inquiry_selectDomains,
+ inquiry_selectFields,
+ dataQuerySelectWktById,
+ decr,
+} from '../../api/api.js';
+export default {
+ data() {
+ return {
+ listPage: {
+ pageSize: 10,
+ pageIndex: 1,
+ pageCount: 0,
+ },
+ attributeData: [],
+ option: [],
+ tableData: [],
+ listdata: {
+ pageIndex: 1,
+ pageSize: 10,
+ name: null,
+ srid: 4326,
+ wkt: null,
+ filter: null,
+ },
+ querylayer: null,
+ queryTable: [],
+ domainsLayer: [],
+ optionx: [],
+ imagePoint: null,
+ };
+ },
+ methods: {
+ startTableMssage() {
+ this.listdata.pageIndex = 1;
+ this.listdata.pageSize = 10;
+ this.listdata.name = null;
+ this.option = [];
+ },
+ setTableAll() {
+ this.startTableMssage();
+ this.listdata.wkt = this.$store.state.mapMenuShpFile;
+ this.querylayer = this.$store.state.mapSpaceQueryLayer;
+ this.option = this.$store.state.mapSpaceQueryLayer;
+ this.listdata.name = this.option[0].entity;
+
+ this.getTableDateHidder();
+ },
+ async getTableDateHidder() {
+ const data = await inquiry_selectFields({ name: this.listdata.name });
+ if (data.code != 200) {
+ this.$message.error('鍒楄〃璋冪敤澶辫触');
+ }
+ const data1 = await inquiry_selectDomains({ name: this.listdata.name });
+ if (data1.code != 200) {
+ this.$message.error('鍒楄〃璋冪敤澶辫触');
+ }
+ this.optionx = [];
+ this.attributeData = [];
+ var valadata = data.result;
+ var laydomain = data1.result;
+
+ for (var i in valadata) {
+ if (valadata[i].showtype == 1) {
+ if (
+ valadata[i].domainNa != null &&
+ valadata[i].domainNa != undefined
+ ) {
+ for (var j in laydomain) {
+ if (laydomain[j].domName == valadata[i].domainNa) {
+ valadata[i].domainNa = laydomain[j].codeDesc;
+ }
+ }
+ }
+ this.optionx.push(valadata[i]);
+ this.attributeData.push(valadata[i]);
+ }
+ }
+ this.getTableData();
+ },
+ async spaceLocation(index, row) {
+ var param = {
+ gid: row.gid,
+ name: this.listdata.name,
+ };
+ const data = await dataQuerySelectWktById(param);
+ if (data.code != 200) {
+ this.$message.error('鍒楄〃璋冪敤澶辫触');
+ }
+
+ var val1 = decr(data.result);
+ if (val1) {
+ if (this.imagePoint != null) {
+ sgworld.Creator.DeleteObject(this.imagePoint);
+ this.imagePoint = null;
+ }
+ var wkt = this.$wkt.parse(val1);
+ this.setMapLoaction(wkt);
+ }
+ },
+ setMapLoaction(res) {
+ var coord = res.coordinates;
+ if (res.type == 'Point') {
+ this.imagePoint = sgworld.Creator.CreateLabel(
+ { X: coord[0], Y: coord[1], Altitude: 2000 },
+ '',
+ SmartEarthRootUrl + 'Workers/image/mark.png',
+ {
+ disableDepthTestDistance: Infinity,
+ scale: 0.8,
+ },
+ 0,
+ '宸℃鐐�'
+ );
+ sgworld.Navigate.flyToObj(this.imagePoint.item);
+ }
+ },
+ setTableChange(res) {
+ this.listdata.pageIndex = 1;
+ this.listdata.pageSize = 10;
+ this.listdata.name = res.entity;
+ this.getTableDateHidder();
+ },
+ async getTableData() {
+ this.tableData = [];
+
+ const data = await dataQuerySelectByPage(this.listdata);
+ if (data.code != 200) {
+ this.$message.error('鍒楄〃璋冪敤澶辫触');
+ }
+ debugger;
+ var val_Data = data.result;
+ for (var i in val_Data) {
+ var valste = val_Data[i];
+ for (var j in this.optionx) {
+ if (
+ this.optionx[j].domainNa != null &&
+ this.optionx[j].domainNa != undefined
+ ) {
+ valste[this.optionx[j].field] = this.optionx[j].domainNa;
+ }
+ }
+ }
+ this.tableData = data.result;
+ },
+ },
+ created() {
+ this.setTableAll();
+ },
+ mounted() {
+ this.$bus.$on('changeMapMenuTop', (res) => {
+ if (res == 'true') {
+ this.setTableAll();
+ }
+ });
+ },
+};
+</script>
+
+<style scoped lang="less">
+.menuPop {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ border: 1px solid gray;
+ float: left;
+ .leftBox {
+ width: 20%;
+ height: 100%;
+ overflow: auto;
+ float: left;
+ border-right: 1px solid gray;
+ li {
+ color: white;
+ line-height: 20px;
+ border-bottom: 1px solid gray;
+ padding: 5px;
+ background: rgba(255, 255, 255, 0.2);
+ }
+ li:hover {
+ color: #409eff;
+ background: rgba(128, 128, 128, 0.2);
+ }
+ }
+
+ .rightBox {
+ width: calc(80% - 1px);
+ height: 100%;
+ float: left;
+ .rightTitle {
+ padding: 5px;
+ color: white;
+ width: 100%;
+ }
+ .rightPage {
+ position: absolute;
+ bottom: 10px;
+ margin-left: 50px;
+ /*涓嶅彲鐐瑰嚮鐨�*/
+ }
+ .boxClose {
+ float: right;
+ margin-right: 20px;
+ color: white;
+ }
+ }
+}
+</style>
+<style lang="less">
+/deep/ .el-table,
+.el-table__expanded-cell {
+ background-color: transparent !important;
+}
+
+/* 琛ㄦ牸鍐呰儗鏅鑹� */
+/deep/ .el-table th,
+.el-table tr,
+.el-table td {
+ background-color: transparent !important;
+ color: white;
+}
+/*鏈�澶栧眰閫忔槑*/
+/deep/ .el-table,
+/deep/ .el-table__expanded-cell {
+ background-color: transparent;
+}
+/* 琛ㄦ牸鍐呰儗鏅鑹� */
+/deep/ .el-table th,
+/deep/ .el-table tr,
+/deep/ .el-table td {
+ background-color: transparent;
+}
+</style>
+<style scoped lang="less"></style>
diff --git a/src/components/MapView/mapMenuTop.vue b/src/components/MapView/mapMenuTop.vue
new file mode 100644
index 0000000..33cfaa7
--- /dev/null
+++ b/src/components/MapView/mapMenuTop.vue
@@ -0,0 +1,341 @@
+<template>
+ <div class="menuBox">
+ <el-form :inline="true" :model="menuTopFrom" class="demo-form-inline">
+ <el-form-item>
+ <el-select
+ v-model="menuTopFrom.queryLayer"
+ :title="treeChange"
+ placeholder="璇烽�夋嫨..."
+ >
+ <el-option
+ :value="menuTopFrom.queryLayer"
+ style="overflow: auto; height: 100%"
+ >
+ <el-tree
+ :data="layerData"
+ show-checkbox
+ node-key="id"
+ ref="tree"
+ accordion
+ highlight-current
+ :props="defaultProps"
+ >
+ </el-tree>
+ <div style="margin-top: 5px">
+ <el-button size="mini" plain @click="getCheckedNodes"
+ >纭</el-button
+ >
+ <el-button
+ size="mini"
+ type="info"
+ plain
+ @click="resetCheckedNodes"
+ >閲嶇疆</el-button
+ >
+ </div>
+ </el-option>
+ </el-select>
+ </el-form-item>
+
+ <el-form-item>
+ <el-select v-model="menuTopFrom.queryType" placeholder="璇烽�夋嫨...">
+ <el-option
+ v-for="item in queryOption"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <input
+ :accept="'.shp, .shx, .dbf, .prj'"
+ style="display: none"
+ type="file"
+ name="file"
+ id="getMenuTopFile"
+ multiple="multiple"
+ @change="setMenuTopFile()"
+ />
+ <el-link @click="getMenuTopFile" :underline="false"
+ >瀵煎叆閫夋嫨鑼冨洿</el-link
+ >
+ </el-form-item>
+ <el-form-item>
+ <el-button plain @click="getAttributeQuery">鏌ヨ</el-button>
+ <el-button type="info" plain>閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+</template>
+
+<script>
+import $ from 'jquery';
+import { inquiry_SelectTabs, inquiry_uploadShp, encr } from '../../api/api.js';
+import { getToken } from '@/utils/auth';
+import * as turf from '@turf/turf';
+export default {
+ data() {
+ return {
+ menuTopFrom: {
+ queryType: '',
+ },
+ treeChange: [],
+ layerData: [
+ {
+ id: 1,
+ tabDesc: '鍩虹鏁版嵁',
+ value: 'BD',
+ children: [],
+ },
+ {
+ id: 2,
+ tabDesc: '涓氬姟鏁版嵁',
+ value: 'BS',
+ children: [],
+ },
+ ],
+
+ queryOption: [
+ {
+ value: 'point',
+ label: '鐐归��',
+ },
+ {
+ value: 'polyline',
+ label: '绾块��',
+ },
+ {
+ value: 'rectangle',
+ label: '鐭╁舰',
+ },
+ {
+ value: 'circle',
+ label: '鍦嗗舰',
+ },
+ {
+ value: 'polygon',
+ label: '澶氳竟褰�',
+ },
+ ],
+ defaultProps: {
+ children: 'children',
+ label: 'tabDesc',
+ },
+ graphicLayer: null,
+ };
+ },
+
+ mounted() {
+ // sgworld.Creator.SimpleGraphic.edit(false, { editProp: false });
+
+ this.menuTopFrom.queryType = 'rectangle';
+ this.getAllTable();
+ },
+ methods: {
+ async getAllTable() {
+ const data = await inquiry_SelectTabs();
+ if (data.code != 200) {
+ this.$message.error('鍒楄〃璋冪敤澶辫触');
+ }
+ var option = data.result;
+
+ for (var i in option) {
+ var val_Data = option[i];
+ val_Data.id = '1' + i;
+ if (option[i].ns == 'bd') {
+ this.layerData[0].children.push(val_Data);
+ } else {
+ this.layerData[1].children.push(val_Data);
+ }
+ }
+ },
+ //鑾峰彇閫夋嫨鏍戠殑鑺傜偣
+ getCheckedNodes() {
+ var valTree = this.$refs.tree.getCheckedNodes();
+ if (valTree.length == 0) return;
+
+ this.menuTopFrom.queryLayer = valTree[0].tabDesc;
+ for (var i = 0; i < valTree.length; i++) {
+ this.treeChange.push(valTree[i]);
+ }
+ },
+ //娓呯┖鏍戦�変腑鐨勮妭鐐�
+ resetCheckedNodes() {
+ this.treeChange = [];
+ this.menuTopFrom.queryLayer = null;
+ this.$refs.tree.setCheckedKeys([]);
+ },
+ //瀵煎叆shp鏂囦欢
+ async setMenuTopFile() {
+ var val = document.getElementById('getMenuTopFile').files;
+ if (!val || !val.length) return;
+ var formData = new FormData();
+ var exts = ['.shp', '.shx', '.dbf', '.prj'];
+ var count = 0;
+ for (var i = 0; i < val.length; i++) {
+ var name = val[i].name.toLocaleLowerCase();
+ var ext = name.substring(name.lastIndexOf('.'));
+ if (exts.indexOf(ext) > -1) {
+ count++;
+ formData.append(val[i].name, val[i]); // fs.files[i].name,file
+ }
+ }
+ if (count != 4) {
+ alert('ShapeFile鏂囦欢閫夋嫨涓嶅叏锛�');
+ return;
+ }
+ $.ajax(BASE_URL + '/inquiry/uploadShp?token=' + getToken(), {
+ type: 'post',
+ data: formData,
+ async: true,
+ cache: false,
+ processData: false,
+ contentType: false,
+ success: (rs) => {
+ if (rs.code !== 200) {
+ return this.$message.error('鐢ㄦ埛瑙掕壊璇锋眰閿欒');
+ }
+ this.$store.state.mapMenuShpFile = rs.result;
+ },
+ error: (e) => {
+ console.log(e);
+ },
+ });
+ },
+ getMenuTopFile() {
+ $('#getMenuTopFile').click();
+ },
+ //鏌ヨ
+ getAttributeQuery() {
+ //娓呯┖鏍囩粯
+ sgworld.Creator.SimpleGraphic.edit(false, { editProp: false });
+ sgworld.Creator.SimpleGraphic.clear();
+ var val = document.getElementById('getMenuTopFile').files;
+ if (!val || !val.length) {
+ sgworld.Creator.createSimpleGraphic(
+ this.menuTopFrom.queryType,
+ {},
+ (entity) => {
+ this.setTurfGeometry(entity);
+ }
+ );
+ } else {
+ this.showMapMenuPop();
+ }
+ },
+ setTurfGeometry(res) {
+ var that = this;
+ switch (this.menuTopFrom.queryType) {
+ case 'point': //鐐�
+ var val = that.setCartesianToEightFour(res.position.getValue());
+ that.setTurfCircle([val.lng, val.lat], 10);
+ break;
+ case 'polyline': //绾�
+ var polyline = res.polyline.positions.getValue();
+
+ that.setTurfPolyOrLine(polyline, 'polyline');
+ break;
+ case 'rectangle': //鐭╁舰
+ let rectangle = res.rectangle.coordinates.getValue();
+ var result = new Cesium.Rectangle.subsample(
+ rectangle,
+ Cesium.Ellipsoid.WGS84,
+ rectangle.height
+ );
+ that.setTurfPolyOrLine(result, 'rectangle');
+
+ break;
+ case 'circle': //鍦�
+ var val = that.setCartesianToEightFour(res.position.getValue());
+ var radius = res.ellipse.semiMajorAxis.getValue();
+ that.setTurfCircle([val.lng, val.lat], radius);
+ break;
+ case 'polygon': //澶氳竟褰�
+ var polygon = res.polygon.hierarchy.getValue().positions;
+ that.setTurfPolyOrLine(polygon, 'polygon');
+ break;
+ }
+ },
+ setTurfCircle(position, radius) {
+ var options = {
+ steps: 10,
+ units: 'miles',
+ properties: { foo: 'bar' },
+ };
+ var circle = turf.circle(position, radius, options);
+ this.setJonToWKT(circle);
+ },
+ setTurfPolyOrLine(res, type) {
+ var restVal,
+ std = [];
+ for (var i in res) {
+ var line_data = this.setCartesianToEightFour(res[i]);
+ std.push([line_data.lng, line_data.lat]);
+ }
+ if (type == 'polyline') {
+ var line = turf.lineString(std, { name: 'polyline' });
+ restVal = turf.buffer(line, 10, { units: 'miles' });
+ console.log('line', restVal);
+ } else if (type == 'rectangle') {
+ var ste = this.setCartesianToEightFour(res[0]);
+ std.push([ste.lng, ste.lat]);
+ restVal = turf.polygon([std], { name: 'rectangle' });
+ } else if (type == 'polygon') {
+ var ste = this.setCartesianToEightFour(res[0]);
+ std.push([ste.lng, ste.lat]);
+ restVal = turf.polygon([std], { name: 'polygon' });
+ }
+ this.setJonToWKT(restVal);
+ },
+
+ setJonToWKT(res) {
+ var jsonToWkt = this.$wkt.convert(res.geometry);
+ this.$store.state.mapMenuShpFile = encr(jsonToWkt);
+ this.showMapMenuPop();
+ },
+ showMapMenuPop() {
+ console.log(this.treeChange);
+ this.$store.state.mapSpaceQueryLayer = this.treeChange;
+ if (
+ this.$store.state.mapPopBoolean != true &&
+ this.$store.state.mapPopBoxFlag != '1'
+ ) {
+ this.$store.state.mapPopBoolean = true;
+ this.$store.state.mapPopBoxFlag = '1';
+ }
+ this.$bus.$emit('changeMapMenuTop', 'true');
+ //娓呯┖inputFile
+ var file = document.getElementById('getMenuTopFile');
+ file.outerHTML = file.outerHTML;
+ },
+ setCartesianToEightFour(res) {
+ var std = {};
+ let ellipsoid = Viewer.scene.globe.ellipsoid;
+ let cartographic = ellipsoid.cartesianToCartographic(res);
+ std.lat = Cesium.Math.toDegrees(cartographic.latitude);
+ std.lng = Cesium.Math.toDegrees(cartographic.longitude);
+ std.alt = cartographic.height;
+ return std;
+ },
+ },
+};
+</script>
+
+<style lang="less">
+.menuBox {
+ width: 98%;
+ height: 100%;
+}
+.unit-option {
+ height: auto;
+ line-height: 1;
+ padding: 0;
+ background-color: #fff;
+}
+.unit-tree {
+ padding: 4px 20px;
+ font-weight: 400;
+}
+</style>
diff --git a/src/components/MapView/mapSpacePop.vue b/src/components/MapView/mapSpacePop.vue
new file mode 100644
index 0000000..610fdd7
--- /dev/null
+++ b/src/components/MapView/mapSpacePop.vue
@@ -0,0 +1,386 @@
+<template>
+ <div class="menuPop">
+ <div class="rightTitle">
+ <span>绠￠亾</span>
+ <el-link @click="closeSpaceBox" :underline="false" class="boxClose"
+ ><i class="el-icon-close"></i>
+ </el-link>
+ </div>
+ <div style="padding: 5px">
+ <el-form :inline="true" :model="formInline" class="demo-form-inline">
+ <el-form-item>
+ <el-select
+ v-model="formInline.name"
+ style="width: 150px"
+ placeholder="...."
+ @change="changeValue($event)"
+ >
+ <el-option
+ v-for="item in optionx"
+ :key="item.field"
+ :label="item.alias"
+ :value="item.field"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-select
+ v-model="formInline.region"
+ style="width: 100px"
+ placeholder="...."
+ >
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-input
+ style="width: 150px"
+ v-model="formInline.input"
+ placeholder="璇疯緭鍏�..."
+ ></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button plain @click="setSpaceTableLayer">鏌ヨ</el-button>
+ <el-button plain @click="restSpacePopLayer">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
+ <div class="centTable">
+ <el-table :data="tableData" height="220" style="width: 100%">
+ <el-table-column
+ align="center"
+ type="index"
+ label="搴忓彿"
+ width="50"
+ />
+ <el-table-column label="瀹氫綅" width="100" align="center">
+ <template slot-scope="scope">
+ <el-button
+ icon="el-icon-map-location"
+ size="mini"
+ @click="spaceLocation(scope.$index, scope.row)"
+ ></el-button>
+ </template>
+ </el-table-column>
+ <el-table-column
+ v-for="(item, index) in attributeData"
+ :key="index"
+ :label="item.alias"
+ :prop="item.field"
+ show-overflow-tooltip
+ align="center"
+ ></el-table-column>
+ </el-table>
+ </div>
+
+ <div class="bottomPage">
+ <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>
+ </div>
+ </div>
+</template>
+
+<script>
+import {
+ dataQuerySelectByPage,
+ dataQuerySelectWktById,
+ inquiry_selectFields,
+ inquiry_selectDomains,
+ decr,
+} from '../../api/api.js';
+export default {
+ computed: {
+ storeTime() {
+ return this.$store.state.mapSpaceQueryLayer;
+ },
+ },
+ data() {
+ return {
+ count: 0,
+ listdata: {
+ pageIndex: 1,
+ pageSize: 10,
+ name: null,
+ srid: 4326,
+ wkt: null,
+ filter: null,
+ },
+ formInline: {
+ name: '',
+ region: '',
+ },
+ attributeData: [],
+ optionx: [],
+ options: [],
+ options1: [
+ {
+ value: '=',
+ label: '=',
+ },
+ {
+ value: 'like',
+ label: 'like',
+ },
+ {
+ value: '<>',
+ label: '<>',
+ },
+ ],
+ options2: [
+ {
+ value: '=',
+ label: '=',
+ },
+ {
+ value: '<>',
+ label: '<>',
+ },
+ {
+ value: '<=',
+ label: '<=',
+ },
+ {
+ value: '<',
+ label: '<',
+ },
+ {
+ value: '>=',
+ label: '>=',
+ },
+ {
+ value: '>',
+ label: '>',
+ },
+ ],
+ value: '',
+ tableData: [],
+ spaceLayer: '',
+ imagePoint: null,
+ domainsLayer: null,
+ };
+ },
+ watch: {
+ async storeTime(index) {
+ this.spaceLayer = index;
+ this.getDomainsLayer();
+ // this.getTableselectFields();
+ // this.restSpacePopLayer();
+ },
+ },
+ created() {
+ this.spaceLayer = this.$store.state.mapSpaceQueryLayer;
+ // this.showSpacePopLayer();
+ // this.getTableselectFields();
+ this.getDomainsLayer();
+ },
+
+ methods: {
+ closeSpaceBox() {
+ if (this.imagePoint != null) {
+ sgworld.Creator.DeleteObject(this.imagePoint);
+ this.imagePoint = null;
+ }
+ this.$store.state.mapPopBoolean = false;
+ this.$store.state.mapPopBoxFlag = null;
+ },
+ setSpaceTableLayer() {
+ this.setListDataStart();
+ this.getSpaceTableLayer();
+ },
+ restSpacePopLayer() {
+ this.formInline.input = null;
+ this.showSpacePopLayer();
+ },
+ changeValue(value) {
+ var obj = {};
+ obj = this.optionx.find(function (item) {
+ return item.value === value;
+ });
+ if (obj.type == 'serial' || obj.type == 'int') {
+ this.options = this.options2;
+ } else {
+ this.options = this.options1;
+ }
+ this.formInline.region = this.options[0].value;
+ },
+ setListDataStart() {
+ this.listdata.pageSize = 10;
+ this.listdata.pageIndex = 1;
+ this.tableData = [];
+ },
+ //鍒濆鍖栨煡璇㈡潯浠�
+ showSpacePopLayer() {
+ let val_date = this.optionx[0];
+ this.formInline.name = val_date.field;
+ if (val_date.type == 'serial' || val_date.type == 'int') {
+ this.options = this.options2;
+ } else {
+ this.options = this.options1;
+ }
+ this.formInline.region = this.options[0].value;
+ this.getSpaceTableLayer();
+ },
+ //鍒濆鍖栨煡璇㈣〃鐨勫瓧娈�
+ async getTableselectFields() {
+ const data = await inquiry_selectFields({ name: this.spaceLayer });
+ if (data.code != 200) {
+ this.$message.error('鍒楄〃璋冪敤澶辫触');
+ }
+ this.optionx = [];
+ var valadata = data.result;
+ for (var i in valadata) {
+ if (valadata[i].showtype == 1) {
+ if (
+ valadata[i].domainNa != null &&
+ valadata[i].domainNa != undefined
+ ) {
+ valadata[i].domainNa = this.getMatchDomainNa(valadata[i].domainNa);
+ }
+ this.optionx.push(valadata[i]);
+ this.attributeData.push(valadata[i]);
+ }
+ }
+ this.showSpacePopLayer();
+ },
+ getMatchDomainNa(res) {
+ var std = null;
+ for (var i in this.domainsLayer) {
+ if (this.domainsLayer[i].domName == res) {
+ return (std = this.domainsLayer[i].codeDesc);
+ }
+ }
+ return std;
+ },
+ //鍒濆鍖栨煡璇㈤槇鍊艰〃
+ async getDomainsLayer() {
+ const data = await inquiry_selectDomains({ name: this.spaceLayer });
+ if (data.code != 200) {
+ this.$message.error('鍒楄〃璋冪敤澶辫触');
+ }
+ this.domainsLayer = data.result;
+ this.setListDataStart();
+ this.getTableselectFields();
+ },
+ //鍒濆鍖栨煡璇㈣〃鏍间俊鎭�
+ async getSpaceTableLayer() {
+ this.listdata.name = this.spaceLayer;
+ if (this.formInline.input == undefined || this.formInline.input == null) {
+ this.listdata.filter = null;
+ } else {
+ this.listdata.filter =
+ this.formInline.name +
+ ' ' +
+ this.formInline.region +
+ ' ' +
+ this.formInline.input;
+ }
+ const data = await dataQuerySelectByPage(this.listdata);
+ if (data.code != 200) {
+ this.$message.error('鍒楄〃璋冪敤澶辫触');
+ }
+ var val_Data = data.result;
+ this.count = data.count;
+
+ for (var i in val_Data) {
+ var valste = val_Data[i];
+ for (var j in this.optionx) {
+ if (
+ this.optionx[j].domainNa != null &&
+ this.optionx[j].domainNa != undefined
+ ) {
+ valste[this.optionx[j].field] = this.optionx[j].domainNa;
+ }
+ }
+ }
+ this.tableData = data.result;
+ },
+ async spaceLocation(index, row) {
+ var param = {
+ gid: row.gid,
+ name: this.spaceLayer,
+ };
+ const data = await dataQuerySelectWktById(param);
+ if (data.code != 200) {
+ this.$message.error('鍒楄〃璋冪敤澶辫触');
+ }
+
+ var val1 = decr(data.result);
+ if (val1) {
+ if (this.imagePoint != null) {
+ sgworld.Creator.DeleteObject(this.imagePoint);
+ this.imagePoint = null;
+ }
+ var wkt = this.$wkt.parse(val1);
+ this.setMapLoaction(wkt);
+ }
+ },
+ handleSizeChange(val) {
+ this.listdata.pageSize = val;
+ this.getSpaceTableLayer();
+ },
+ handleCurrentChange(val) {
+ this.listdata.pageIndex = val;
+ this.getSpaceTableLayer();
+ },
+ setMapLoaction(res) {
+ var coord = res.coordinates;
+ if (res.type == 'Point') {
+ this.imagePoint = sgworld.Creator.CreateLabel(
+ { X: coord[0], Y: coord[1], Altitude: 2000 },
+ '',
+ SmartEarthRootUrl + 'Workers/image/mark.png',
+ {
+ disableDepthTestDistance: Infinity,
+ scale: 0.8,
+ },
+ 0,
+ '宸℃鐐�'
+ );
+ sgworld.Navigate.flyToObj(this.imagePoint.item);
+ }
+ },
+ },
+};
+</script>
+
+<style lang="less">
+.menuPop {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ border: 1px solid gray;
+ float: left;
+ .rightTitle {
+ padding: 5px;
+ color: white;
+ width: 100%;
+ .boxClose {
+ float: right;
+ margin-right: 20px;
+ color: white;
+ }
+ }
+
+ .bottomPage {
+ position: absolute;
+ bottom: 1%;
+ }
+}
+</style>
diff --git a/src/components/MapView/mapSpaceTop.vue b/src/components/MapView/mapSpaceTop.vue
new file mode 100644
index 0000000..60d546f
--- /dev/null
+++ b/src/components/MapView/mapSpaceTop.vue
@@ -0,0 +1,123 @@
+<template>
+ <div class="spaceBox">
+ <el-select v-model="menuTopFrom.queryLayer" placeholder="璇烽�夋嫨...">
+ <el-option
+ :value="menuTopFrom.queryLayer"
+ style="overflow: auto; height: 100%"
+ >
+ <el-tree
+ :data="layerData"
+ :props="defaultProps"
+ :show-checkbox="true"
+ :check-on-click-node="true"
+ :check-strictly="true"
+ node-key="id"
+ @check="menuTreeCheck"
+ ref="treeForm"
+ :default-expanded-keys="[1]"
+ accordion
+ >
+ </el-tree>
+ <div style="margin-top: 5px">
+ <el-button size="mini" plain @click="getCheckedNodes">纭</el-button>
+ <el-button size="mini" type="info" plain @click="resetCheckedNodes"
+ >閲嶇疆</el-button
+ >
+ </div>
+ </el-option>
+ </el-select>
+ </div>
+</template>
+
+<script>
+import { inquiry_SelectTabs } from '../../api/api.js';
+export default {
+ data() {
+ return {
+ menuTopFrom: {
+ queryLayer: '',
+ },
+ layerData: [
+ {
+ id: 1,
+ tabDesc: '鍩虹鏁版嵁',
+ value: 'BD',
+ children: [],
+ },
+ {
+ id: 2,
+ tabDesc: '涓氬姟鏁版嵁',
+ value: 'BS',
+ children: [],
+ },
+ ],
+ defaultProps: {
+ children: 'children',
+ label: 'tabDesc',
+ },
+ mapSpaceQueryLayer: null,
+ };
+ },
+ mounted() {
+ this.getAllTable();
+ },
+ methods: {
+ async getAllTable() {
+ const data = await inquiry_SelectTabs();
+ if (data.code != 200) {
+ this.$message.error('鍒楄〃璋冪敤澶辫触');
+ }
+ var option = data.result;
+
+ for (var i in option) {
+ var val_Data = option[i];
+ val_Data.id = '1' + i;
+ if (option[i].ns == 'bd') {
+ this.layerData[0].children.push(val_Data);
+ } else {
+ this.layerData[1].children.push(val_Data);
+ }
+ }
+ },
+ getCheckedNodes() {
+ this.$store.state.mapSpaceQueryLayer = this.mapSpaceQueryLayer;
+ this.$store.state.mapPopBoolean = true;
+ this.$store.state.mapPopBoxFlag = '2';
+ },
+ resetCheckedNodes() {
+ this.menuTopFrom.queryLayer = null;
+ this.$refs.treeForm.setCheckedKeys([]);
+ },
+ menuTreeCheck(node, list) {
+ if (list.checkedNodes.length > 0) {
+ this.menuTopFrom.queryLayer = node.tabDesc;
+ this.mapSpaceQueryLayer = node.entity;
+ if (list.checkedKeys.length == 2) {
+ //鍗曢�夊疄鐜�
+ this.$refs.treeForm.setCheckedKeys([node.id]);
+ }
+ } else {
+ this.menuid = null;
+ }
+ },
+ },
+};
+</script>
+
+<style scoped lang="less">
+.spaceBox {
+ width: 98%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+}
+</style>
+<style lang="less">
+.el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
+ display: inline-block;
+}
+.el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
+ display: none;
+}
+</style>
diff --git a/src/components/mapsdk.vue b/src/components/mapsdk.vue
index d971275..682e776 100644
--- a/src/components/mapsdk.vue
+++ b/src/components/mapsdk.vue
@@ -1,166 +1,192 @@
<template>
- <div id="mapdiv" class="mapdiv">
- <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 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>
- </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 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>
- <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>
+ </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>
- <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 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>
- </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>
+ </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>
- </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
+ <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-form-item>
- </el-form>
- </div>
- </el-card>
- </div>
- <div
- @click="changeMenulayer"
- class="center CenDiv"
- :class="{ center1: centerFlag }"
- >
+ </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>
<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>
</div>
</template>
<script>
import $ from 'jquery';
+import mapMenuTop from './MapView/mapMenuTop.vue';
+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,
} from '../api/api';
export default {
name: '',
+ components: {
+ mapMenuTop,
+ mapMenuPop,
+ mapSpaceTop,
+ mapSpacePop,
+ },
data() {
return {
centerFlag: false,
@@ -188,6 +214,7 @@
pageSize: 10,
},
count: 0,
+ selFrom: {},
tableData: [],
imagePoint: null,
handler: null,
@@ -197,6 +224,63 @@
isActive: false,
isMenuLayer: true,
+ selFrom: {},
+ selectTree: null,
+
+ menuList: [
+ {
+ id: 1,
+ label: '涓�绾� 1',
+ children: [
+ {
+ id: 4,
+ label: '浜岀骇 1-1',
+ children: [
+ {
+ id: 9,
+ label: '涓夌骇 1-1-1',
+ },
+ {
+ id: 10,
+ label: '涓夌骇 1-1-2',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ id: 2,
+ label: '涓�绾� 2',
+ children: [
+ {
+ id: 5,
+ label: '浜岀骇 2-1',
+ },
+ {
+ id: 6,
+ label: '浜岀骇 2-2',
+ },
+ ],
+ },
+ {
+ id: 3,
+ label: '涓�绾� 3',
+ children: [
+ {
+ id: 7,
+ label: '浜岀骇 3-1',
+ },
+ {
+ id: 8,
+ label: '浜岀骇 3-2',
+ },
+ ],
+ },
+ ],
+ defaultProps: {
+ children: 'children',
+ label: 'label',
+ }, //鏍戠粦瀹氬璞�
};
},
mounted() {
@@ -646,149 +730,226 @@
};
</script>
-<style scoped>
-.mapdiv {
+<style scoped lang="less">
+.mapBox {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
- position: relative;
-}
-.bufferBox {
- width: 412px;
- height: 230px;
- z-index: 40;
- position: absolute;
- right: 1%;
- bottom: 1%;
+
+ #mapdiv {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+
+ .toponymicLocalBox {
+ width: 750px;
+ height: 450x;
+ z-index: 40;
+ position: absolute;
+ 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%;
+ }
+ .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;
+ }
+ }
+
+ .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;
+ }
+ }
}
-.pathAnalysisBox {
- width: 412px;
+// /deep/
+// /deep/ .el-input__inner {
+// background: rgba(255, 255, 255, 0.2) !important;
+// color: white !important;
+// }
- z-index: 40;
- position: absolute;
- right: 1%;
- bottom: 1%;
-}
-.coordLocalBox {
- width: 350px;
- height: 370px;
- z-index: 40;
- position: absolute;
- right: 1%;
- bottom: 1%;
-}
-.toponymicLocalBox {
- width: 750px;
- height: 450x;
- z-index: 40;
- position: absolute;
- right: 1%;
- bottom: 1%;
-}
-.box-card {
- background-color: rgba(0, 0, 0, 0.6);
- border: 1px solid rgba(32, 160, 255, 0.6);
- color: white;
-}
-.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;
-}
+// ::v-deep .el-table,
+// .el-table__expanded-cell {
+// background-color: transparent;
+// color: white;
+// }
-::v-deep .el-table,
-.el-table__expanded-cell {
- background-color: transparent;
- color: white;
-}
+// ::v-deep .el-table tr {
+// background-color: transparent !important;
+// }
+// ::v-deep .el-table tbody tr:hover > td {
+// background-color: rgba(255, 255, 255, 0.2) !important;
+// }
+// ::v-deep .el-table鈥揺nable-row-transition .el-table__body td,
+// .el-table .cell {
+// background-color: transparent !important;
+// }
+// ::v-deep .el-table th.el-table__cell {
+// background-color: transparent !important;
+// color: white;
+// }
+// ::v-deep .el-pager li {
+// background-color: transparent !important;
+// color: white;
+// }
+// ::v-deep .btn-prev {
+// background-color: transparent !important;
+// }
+// ::v-deep .btn-next {
+// background-color: transparent !important;
+// color: white !important;
+// }
+// ::v-deep .el-pagination__total {
+// color: white;
+// }
+// ::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;
+// }
+// .center1 {
+// right: 1%;
+// }
+// .right {
+// position: absolute;
+// top: 50px;
+// right: 0;
+// width: 20%;
+// height: calc(100% - 50px);
-::v-deep .el-table tr {
- background-color: transparent !important;
-}
-::v-deep .el-table tbody tr:hover > td {
- background-color: rgba(255, 255, 255, 0.2) !important;
-}
-::v-deep .el-table鈥揺nable-row-transition .el-table__body td,
-.el-table .cell {
- background-color: transparent !important;
-}
-::v-deep .el-table th.el-table__cell {
- background-color: transparent !important;
- color: white;
-}
-::v-deep .el-pager li {
- background-color: transparent !important;
- color: white;
-}
-::v-deep .btn-prev {
- background-color: transparent !important;
-}
-::v-deep .btn-next {
- background-color: transparent !important;
- color: white !important;
-}
-::v-deep .el-pagination__total {
- color: white;
-}
-::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;
-}
-.center1 {
- right: 1%;
-}
-.right {
- position: absolute;
- top: 50px;
- right: 0;
- width: 20%;
- height: calc(100% - 50px);
+// display: flex;
+// flex-direction: column;
+// justify-content: space-between;
+// }
+// .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;
+// }
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-}
-.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;
-}
+// .menuSelect .el-input__inner {
+// background: rgba(255, 255, 255, 0.2) !important;
+// color: white !important;
+// border: 1px solid rgba(255, 255, 255, 0.2) !important;
+// }
</style>
diff --git a/src/main.js b/src/main.js
index 88695fe..9446029 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,6 +7,7 @@
import axios from './http';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en';
+import WKT from 'terraformer-wkt-parser';
// import locale from 'element-ui/lib/locale/lang/zh-CN'
import 'element-ui/lib/theme-chalk/index.css';
Vue.prototype.$echarts = echarts;
@@ -14,6 +15,7 @@
Vue.use(ElementUI, { locale });
Vue.prototype.$http = axios;
Vue.prototype.$bus = new Vue();
+Vue.prototype.$wkt = WKT;
Vue.config.productionTip = false;
new Vue({
diff --git a/src/store/index.js b/src/store/index.js
index 4e71fed..289c5a0 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -31,6 +31,12 @@
currentPerms: '',
//缁煎悎灞曠ず
syntiesis: {},
+ mapMenuBoolean: false,
+ mapPopBoolean: false,
+ mapPopBoxFlag: null,
+ mapMenuBoxFlag: null,
+ mapSpaceQueryLayer: null,
+ mapMenuShpFile: null,
},
mutations: {
//鑾峰彇鏉冮檺鍚堥泦
diff --git a/src/views/Synthesis/inquire.vue b/src/views/Synthesis/inquire.vue
index fbf04fb..a6734cc 100644
--- a/src/views/Synthesis/inquire.vue
+++ b/src/views/Synthesis/inquire.vue
@@ -1,16 +1,5 @@
<template>
<div class="box">
- <!-- <input type="file" name="file" id="getF" @change="clickF()"></input> -->
- <input
- :accept="'.shp, .shx, .dbf, .prj'"
- style="display: none"
- type="file"
- name="file"
- id="getF"
- multiple="multiple"
- @change="setQueryFile()"
- />
-
<ul>
<li
style="margin-left: 20px"
@@ -21,18 +10,6 @@
<div :class="item.class" class="backimge5"></div>
</div>
<div class="div_li">{{ $t(item.name) }}</div>
- </li>
- <li v-if="analyStatus.upload" style="margin-left: 20px">
- <div class="divli">
- <div class="backimge5"><i class="el-icon-upload2"></i></div>
- </div>
- <div class="div_li">涓婁紶</div>
- </li>
- <li v-if="analyStatus.download" style="margin-left: 20px">
- <div class="divli">
- <div class="backimge5"><i class="el-icon-download"></i></div>
- </div>
- <div class="div_li">涓嬭浇</div>
</li>
</ul>
</div>
@@ -102,7 +79,7 @@
methods: {
showViewMenu(res) {
if (res.cnName != '鏌ヨ') return;
- console.log('鏌ヨ', res.tag);
+
switch (res.tag) {
case '/upload':
this.analyStatus.upload = true;
@@ -113,14 +90,19 @@
}
},
changeIquery(res) {
- if (res.id == '7') {
- this.getQueryFile();
- } else {
- var val = {
- name: 'Query',
- id: res.id,
- };
- this.$bus.$emit('mapChangeBox', val);
+ this.$store.state.mapMenuBoolean = false;
+ this.$store.state.mapMenuBoxFlag = null;
+ this.$store.state.mapPopBoolean = false;
+ this.$store.state.mapPopBoxFlag = null;
+ switch (res.id) {
+ case '6':
+ this.$store.state.mapMenuBoolean = true;
+ this.$store.state.mapMenuBoxFlag = '2';
+ break;
+ case '7':
+ this.$store.state.mapMenuBoolean = true;
+ this.$store.state.mapMenuBoxFlag = '1';
+ break;
}
},
getQueryFile() {
@@ -145,7 +127,7 @@
return;
}
const data = await comprehensive_uploadShp(formData);
- debugger;
+
// $.ajax(BASE_URL + '/comprehensive/uploadShp?token=' + getToken(), {
// type: 'post',
// data: formData,
--
Gitblit v1.9.3