From df007d0b7f677240d9ab9b01e6bebdbad0762a0f Mon Sep 17 00:00:00 2001
From: lxl <lixuliang_hd@126.com>
Date: 星期一, 07 十一月 2022 16:22:12 +0800
Subject: [PATCH] 菜单
---
src/components/mapsdk.vue | 941 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 926 insertions(+), 15 deletions(-)
diff --git a/src/components/mapsdk.vue b/src/components/mapsdk.vue
index 8ba7bb7..682e776 100644
--- a/src/components/mapsdk.vue
+++ b/src/components/mapsdk.vue
@@ -1,44 +1,955 @@
<template>
- <div id="mapdiv"></div>
+ <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 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>
+ </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>
+ <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>
+ </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
+ @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: "",
+ name: '',
+ components: {
+ mapMenuTop,
+ mapMenuPop,
+ mapSpaceTop,
+ mapSpacePop,
+ },
data() {
- return {};
+ return {
+ centerFlag: false,
+ buffer: null,
+ showBufferBoxDialog: false,
+ showCoordLocalBoxDialog: false,
+ showToponymicLocalBoxDialog: false,
+ showPathAnalysisBoxDialog: false,
+ comprehensive: {},
+ pathFrom: {
+ lon: '116.086746,39.937314',
+ lat: '116.086000,39.936289',
+ },
+ bufFrom: {
+ val: 50,
+ },
+ coordFrom: {
+ lon: 110,
+ lat: 32,
+ height: 8000000,
+ },
+ listData: {
+ name: null,
+ pageIndex: 1,
+ pageSize: 10,
+ },
+ count: 0,
+ selFrom: {},
+ tableData: [],
+ imagePoint: null,
+ handler: null,
+ pathStart: null,
+ pathEnd: null,
+ pathData: null,
+
+ 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() {
this.init3DMap();
+ this.$bus.$on('mapChangeBox', (res) => {
+ this.showChangeBox(res);
+ });
},
methods: {
init3DMap() {
- window.sgworld = new SmartEarth.SGWorld("mapdiv", {
- url: "/SmartEarthSDK/Workers/image/earth.jpg",
- licenseServer: "http://192.168.20.39/LFServer",
+ var webKey = '94a34772eb88317fcbf8428e10448561';
+
+ //鍦板浘鍒濆鍖�
+ window.sgworld = new SmartEarth.SGWorld('mapdiv', {
+ licenseServer: window.sceneConfig.licenseServer,
});
- window.Viewer = sgworld._Viewer;
- sgworld.Navigate.Stop(); //鍙栨秷椋炶鐘舵��
+
+ window.Viewer = window.sgworld._Viewer;
+
+ //瀹氫綅
sgworld.Navigate.jumpTo({
//璺宠浆瑙嗚
- destination: new Cesium.Cartesian3.fromDegrees(110, 32, 8000000),
+ destination: new Cesium.Cartesian3.fromDegrees(
+ 116.055913,
+ 39.937685,
+ 8000
+ ),
});
+ Viewer.imageryLayers.addImageryProvider(
+ new Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
+ layer: 'tdtVecBasicLayer',
+ style: 'default',
+ format: 'image/jpeg',
+ tileMatrixSetID: 'GoogleMapsCompatible',
+ show: false,
+ })
+ );
+
+ Viewer.imageryLayers.addImageryProvider(
+ new Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
+ layer: 'tdtBasicLayer',
+ style: 'default',
+ format: 'image/jpeg',
+ tileMatrixSetID: 'GoogleMapsCompatible',
+ show: false,
+ })
+ );
+ Viewer.imageryLayers.addImageryProvider(
+ new Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=94a34772eb88317fcbf8428e10448561',
+ layer: 'tdtAnnoLayer',
+ style: 'default',
+ format: 'image/jpeg',
+ tileMatrixSetID: 'GoogleMapsCompatible',
+ })
+ );
+
+ // sgworld.Navigate.jumpTo({
+ // //璺宠浆瑙嗚
+ // destination: {
+ // x: 311837.3471863137,
+ // y: 5628280.936629815,
+ // z: 2992581.921482893,
+ // },
+ // orientation: {
+ // heading: 2.5028896264234364,
+ // pitch: -0.2201285642360813,
+ // roll: 0.0,
+ // },
+ // });
+
+ // Viewer.scene.globe.depthTestAgainstTerrain = true;
+ Viewer._enableInfoOrSelection = false;
//鏄剧ずfps
- sgworld._Viewer.scene.debugShowFramesPerSecond = false;
- sgworld.navControl("enableCompass", false);
- //sgworld.navControl("enableDistanceLegend", false);
+ Viewer.scene.debugShowFramesPerSecond = false;
+ //瀵艰埅鎺т欢
+ window.sgworld.navControl('nav', false);
+ //姣斾緥灏�
+ window.sgworld.navControl('scale', false);
+
+ //褰卞儚瀵规瘮璁剧疆
+ var base = {
+ url: 'https://a.tile.openstreetmap.org/',
+ };
+ window.openStreetMap = sgworld.Creator.createImageryProvider(
+ 'OpenStreetMap',
+ 'OpenStreetMap',
+ base,
+ '0',
+ undefined,
+ true,
+ ''
+ );
+ openStreetMap.item.show = false;
+ //mpt鍔犺浇
+ var option = {
+ url: window.sceneConfig.mpt.url,
+ layerName: window.sceneConfig.mpt.name,
+ requestVertexNormals: true,
+ };
+ // sgworld.Creator.sfsterrainprovider('mpt', option, '', true, '');
+ window.elevationTool = new SmartEarth.ElevationTool(window.sgworld);
+ },
+
+ changeMenulayer() {
+ this.isActive = !this.isActive;
+ this.isMenuLayer = !this.isMenuLayer;
+ this.setLayerVisible();
+ },
+ setLayerVisible() {
+ if (this.isActive == true) {
+ Viewer.imageryLayers.get(1).show = true;
+ Viewer.imageryLayers.get(2).show = false;
+ } else {
+ Viewer.imageryLayers.get(1).show = false;
+ Viewer.imageryLayers.get(2).show = true;
+ }
+ },
+ //鏄剧ず寮圭獥
+ 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;
+ }
+ }
+ },
+ handleSizeChange(val) {
+ this.listData.pageSize = val;
+ this.getToponymicData();
+ },
+ handleCurrentChange(val) {
+ this.listData.pageIndex = val;
+ this.getToponymicData();
+ },
+ async getToponymicData() {
+ if (this.listData.tab == '') {
+ delete this.listData.tab;
+ }
+ this.listData.name = this.comprehensive.name;
+ const data = await select_Comprehensive_ByPageAndCount(this.listData);
+
+ if (data.code != 200) {
+ this.$message.error('鍒楄〃璋冪敤澶辫触');
+ }
+ this.tableData = data.result;
+ this.count = data.count;
+ },
+ async handleLocation(index, row) {
+ const data = await select_Comprehensive_SelectWktById({ id: row.gid });
+ if (data.code != 200) {
+ this.$message.error('鍒楄〃璋冪敤澶辫触');
+ }
+ var val = data.result.slice(6, data.result.length - 1);
+ val = val.split(' ');
+ var position = {
+ X: parseFloat(val[0]),
+ Y: parseFloat(val[1]),
+ Altitude: 2000,
+ };
+ if (this.imagePoint != null) {
+ sgworld.Creator.DeleteObject(this.imagePoint);
+ this.imagePoint = null;
+ }
+ 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(
+ parseFloat(val[0]),
+ parseFloat(val[1]),
+ 10000
+ ),
+ });
+ },
+ closeBufferBox(res) {
+ switch (res) {
+ case 1:
+ this.showBufferBoxDialog = false;
+ this.clearBuffer();
+ break;
+ case 2:
+ this.showCoordLocalBoxDialog = false;
+ break;
+ case 3:
+ this.showToponymicLocalBoxDialog = false;
+ if (this.imagePoint != null) {
+ sgworld.Creator.DeleteObject(this.imagePoint);
+ this.imagePoint = null;
+ }
+ break;
+ case 4:
+ this.showPathAnalysisBoxDialog = false;
+ this.clearPathAll(3);
+
+ break;
+ }
+ },
+ //瀹氫綅
+ setCoordLocal() {
+ var lon = parseFloat(this.coordFrom.lon);
+ var lat = parseFloat(this.coordFrom.lat);
+ var height = parseFloat(this.coordFrom.height);
+ sgworld.Navigate.jumpTo({
+ //璺宠浆瑙嗚
+ destination: new Cesium.Cartesian3.fromDegrees(lon, lat, height),
+ });
+ },
+ //缂撳啿鍖哄垎鏋�
+ clearBuffer() {
+ if (this.buffer == null) return;
+ this.buffer && this.buffer.clearBuff();
+ this.buffer = null;
+ },
+ getBufferTable(type) {
+ const points =
+ this.buffer.this_buff.buff.polygon.hierarchy.getValue().positions;
+ let geometrys = '';
+ let firstPoint;
+ let degrees = '';
+ points.forEach((p, i) => {
+ degrees = window.sgworld.Core.toDegrees(p);
+ geometrys += '[' + degrees.lon + ',' + degrees.lat + '],';
+ i === 0 && (firstPoint = '[' + degrees.lon + ',' + degrees.lat + ']');
+ });
+ geometrys += firstPoint;
+ if (geometrys.length != 0) geometrys.trimEnd(',');
+ geometrys = '{rings:[[' + geometrys + ']]}';
+ },
+ addBuffer(res) {
+ this.clearBuffer();
+ var buffRadius = this.bufFrom.val;
+ switch (res) {
+ case 1:
+ this.buffer = sgworld.Analysis.DrawPointBuffer(
+ buffRadius,
+ (event) => {
+ this.getBufferTable('point');
+ }
+ );
+ break;
+ case 2:
+ this.buffer = sgworld.Analysis.DrawPolylineBuffer(
+ buffRadius,
+ (event) => {
+ this.getBufferTable('line');
+ }
+ );
+ break;
+ case 3:
+ this.buffer = sgworld.Analysis.DrawPolygonBuffer(
+ buffRadius,
+ (event) => {
+ this.getBufferTable('polygon');
+ }
+ );
+ break;
+ }
+ },
+ showMouseLeftClick(res) {
+ if (res == 3) {
+ if (this.linePath != null) {
+ this.clearPathAll(3);
+ }
+
+ var jsonurl =
+ 'http://192.168.20.39:9055/gisserver/wnsserver/beijingdaohang_wns?start=' +
+ this.pathFrom.lon +
+ '&end=' +
+ this.pathFrom.lat +
+ '&propertyName=Shape&tolerance=500&request=FindPath&format=json';
+ $.ajax({
+ url: jsonurl,
+ async: false,
+ type: 'GET',
+ dataType: 'json',
+ contentType: 'application/json;charset=utf-8',
+ success: (data) => {
+ this.executeFly3D(data);
+ },
+ });
+ } else {
+ var that = this;
+ if (this.handler != null) {
+ this.clearLeftClick();
+ }
+ this.handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
+ this.handler.setInputAction(function (event) {
+ let cartesian = Viewer.camera.pickEllipsoid(event.position);
+ let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+ let lng = parseFloat(
+ Cesium.Math.toDegrees(cartographic.longitude)
+ ).toFixed(6); // 缁忓害
+ let lat = parseFloat(
+ Cesium.Math.toDegrees(cartographic.latitude)
+ ).toFixed(6); // 绾害
+ if (that.linePath != null) {
+ that.clearPathAll(3);
+ }
+ if (lng != null && lat != null) {
+ let val = lng + ',' + lat;
+ var position = sgworld.Creator.CreatePosition(lng, lat, 0);
+ if (res == 1) {
+ if (that.pathStart != null) {
+ that.clearPathAll(1);
+ }
+
+ that.pathStart = sgworld.Creator.CreateLabel(
+ position,
+ '',
+ SmartEarthRootUrl + 'Workers/image/start.png',
+ {
+ // 鏂囨湰鍋忕Щ閲�
+ pixelOffset: {
+ x: 0,
+ y: -50,
+ }, // 鏃犺閬尅
+ disableDepthTestDistance: Infinity,
+ scale: 0.8,
+ },
+ 0,
+ '璧峰鐐�'
+ );
+
+ that.pathFrom.lon = val;
+ } else if (res == 2) {
+ if (that.pathEnd != null) {
+ that.clearPathAll(2);
+ }
+
+ that.pathEnd = sgworld.Creator.CreateLabel(
+ position,
+ '',
+ SmartEarthRootUrl + 'Workers/image/end.png',
+ {
+ // 鏂囨湰鍋忕Щ閲�
+ pixelOffset: {
+ x: 0,
+ y: -50,
+ }, // 鏃犺閬尅
+ disableDepthTestDistance: Infinity,
+ scale: 0.8,
+ },
+ 0,
+ '缁撴潫鐐�'
+ );
+ that.pathFrom.lat = val;
+ }
+ that.clearLeftClick();
+ }
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+ }
+ },
+ clearPathAll(res) {
+ switch (res) {
+ case 1:
+ if (this.pathStart != null) {
+ sgworld.Creator.DeleteObject(this.pathStart);
+ this.pathStart = null;
+ }
+ break;
+ case 2:
+ if (this.pathEnd != null) {
+ sgworld.Creator.DeleteObject(this.pathEnd);
+ this.pathEnd = null;
+ }
+ break;
+ case 3:
+ if (this.pathStart != null) {
+ sgworld.Creator.DeleteObject(this.pathStart);
+ this.pathStart = null;
+ }
+
+ if (this.pathEnd != null) {
+ sgworld.Creator.DeleteObject(this.pathEnd);
+ this.pathEnd = null;
+ }
+ if (this.linePath != null) {
+ sgworld.Creator.DeleteObject(this.linePath);
+ this.linePath = null;
+ }
+ break;
+ case 4:
+ if (this.linePath != null) {
+ sgworld.Creator.DeleteObject(this.linePath);
+ this.linePath = null;
+ }
+ break;
+ }
+ },
+ clearLeftClick() {
+ this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); //绉婚櫎浜嬩欢
+ this.handler = null;
+ },
+ executeFly3D(res) {
+ var position = [];
+ if (res) {
+ var positionA = res.features;
+ if (positionA.length > 0) {
+ for (var i = 0; i < positionA.length; i++) {
+ var val = positionA[i];
+ if (val.geometry.type == 'LineString') {
+ var val_data = val.geometry.coordinates;
+ for (var j = 0; j < val_data.length; j++) {
+ position.push({ x: val_data[j][0], y: val_data[j][1] });
+ }
+ }
+ }
+ this.linePath = sgworld.Creator.createPolyline(
+ position,
+ '#ffff00',
+ 1,
+ 0,
+ '绾�'
+ );
+ sgworld.Navigate.flyToObj(this.linePath);
+ } else {
+ return;
+ }
+ }
},
},
};
</script>
-<style scoped>
-#mapdiv {
+<style scoped lang="less">
+.mapBox {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
- position: relative;
+
+ #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;
+ }
+ }
}
+
+// /deep/
+// /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 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;
+// }
+
+// .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>
--
Gitblit v1.9.3