| | |
| | | <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="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 |
| | | @click="setQueryTable" |
| | | 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: 250px" |
| | | v-model="pathFrom.lon" |
| | | :disabled="true" |
| | | ></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: 250px" |
| | | v-model="pathFrom.lat" |
| | | :disabled="true" |
| | | ></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 mapSpaceTop from './MapView/mapSpaceTop.vue'; |
| | | |
| | | import { |
| | | select_Comprehensive_ByPageAndCount, |
| | | select_Comprehensive_SelectWktById, |
| | | } from '../api/api'; |
| | | export default { |
| | | name: '', |
| | | components: { |
| | | mapMenuTop, |
| | | |
| | | mapSpaceTop, |
| | | |
| | | }, |
| | | data() { |
| | | return { |
| | | centerFlag: false, |
| | | buffer: null, |
| | | showBufferBoxDialog: false, |
| | | showCoordLocalBoxDialog: false, |
| | | showToponymicLocalBoxDialog: false, |
| | | showPathAnalysisBoxDialog: false, |
| | | comprehensive: {}, |
| | | pathFrom: { |
| | | lon: ' ', |
| | | lat: ' ', |
| | | }, |
| | | bufFrom: { |
| | | val: 50, |
| | | }, |
| | | coordFrom: { |
| | | lon: 116.3911, |
| | | lat: 39.9115, |
| | | height: 100000, |
| | | }, |
| | | 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: [], |
| | | defaultProps: { |
| | | children: 'children', |
| | | label: 'label', |
| | | }, //树绑定对象 |
| | | }; |
| | | }, |
| | | mounted() { |
| | | this.init3DMap(); |
| | | this.$bus.$on('mapChangeBox', (res) => { |
| | | this.showChangeBox(res); |
| | | }); |
| | | }, |
| | | methods: { |
| | | init3DMap() { |
| | | var webKey = '94a34772eb88317fcbf8428e10448561'; |
| | | |
| | | //地图初始化 |
| | | window.sgworld = new SmartEarth.SGWorld('mapdiv', { |
| | | licenseServer: window.sceneConfig.licenseServer, |
| | | }); |
| | | |
| | | window.Viewer = window.sgworld._Viewer; |
| | | Viewer.imageryLayers._layers[0].show = false; |
| | | //定位 |
| | | sgworld.Navigate.jumpTo({ |
| | | //跳转视角 |
| | | destination: new Cesium.Cartesian3.fromDegrees( |
| | | 116.3911, |
| | | 39.9115, |
| | | 100000 |
| | | ), |
| | | }); |
| | | // 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', |
| | | // }) |
| | | // ); |
| | | |
| | | for (var i in gaoDeBaseUrl) { |
| | | sgworld.Creator.createUrlTemplateImageryProvider( |
| | | gaoDeBaseUrl[i].label, |
| | | gaoDeBaseUrl[i].url, |
| | | '0', |
| | | undefined, |
| | | true, |
| | | '' |
| | | ); |
| | | } |
| | | |
| | | Viewer._enableInfoOrSelection = false; |
| | | //显示fps |
| | | Viewer.scene.debugShowFramesPerSecond = false; |
| | | //导航控件 |
| | | window.sgworld.navControl('nav', false); |
| | | //比例尺 |
| | | window.sgworld.navControl('scale', false); |
| | | //开启深度检测 |
| | | sgworld.Analysis.depthTestAgainstTerrain(true); |
| | | //影像对比设置 |
| | | // var base = { |
| | | // url: 'https://a.tile.openstreetmap.org/', |
| | | // }; |
| | | // window.openStreetMap = sgworld.Creator.createImageryProvider( |
| | | // 'OpenStreetMap', |
| | | // 'OpenStreetMap', |
| | | // base, |
| | | // '0', |
| | | // undefined, |
| | | // true, |
| | | // '' |
| | | // ); |
| | | // openStreetMap.item.show = false; |
| | | |
| | | Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({ |
| | | url:demLayer |
| | | }); |
| | | window.elevationTool = new SmartEarth.ElevationTool(window.sgworld); |
| | | elevationTool.setContourColor('#F1D487'); |
| | | }, |
| | | |
| | | changeMenulayer() { |
| | | this.isActive = !this.isActive; |
| | | this.isMenuLayer = !this.isMenuLayer; |
| | | this.setLayerVisible(); |
| | | }, |
| | | setLayerVisible() { |
| | | if (this.isActive == true) { |
| | | Viewer.imageryLayers._layers[1].show = true; |
| | | Viewer.imageryLayers._layers[2].show = false; |
| | | Viewer.imageryLayers._layers[3].show = false; |
| | | } else { |
| | | Viewer.imageryLayers._layers[1].show = false; |
| | | Viewer.imageryLayers._layers[2].show = true; |
| | | Viewer.imageryLayers._layers[3].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(); |
| | | }, |
| | | setQueryTable() { |
| | | this.listData.pageSize = 10; |
| | | this.listData.pageIndex = 1; |
| | | 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 = |
| | | wnsUrl + |
| | | '?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 lang="less"> |
| | | .mapBox { |
| | | width: 100%; |
| | | height: 100%; |
| | | |
| | | position: relative; |
| | | #mapdiv { |
| | | width: 100%; |
| | | height: 100%; |
| | | overflow: hidden; |
| | | position: relative; |
| | | .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–enable-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: #303030; |
| | | opacity: 0.85; |
| | | border: 1px solid rgba(32, 160, 255, 0.6); |
| | | color: white; |
| | | } |
| | | .menu_Top { |
| | | background: #303030; |
| | | opacity: 0.85; |
| | | width: 100%; |
| | | height: 6%; |
| | | padding: 1%; |
| | | position: absolute; |
| | | z-index: 40; |
| | | } |
| | | .menu_Popup { |
| | | background: #303030; |
| | | opacity: 0.85; |
| | | 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–enable-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%; |
| | | left: 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> |
| | | <template>
|
| | | <div class="mapBox">
|
| | | <div id="mapdiv">
|
| | | <div class="menu_Top box_divm" 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="bufferBox" v-if="showBufferBoxDialog">
|
| | | <el-card class="box-card box_divm">
|
| | | <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">
|
| | | <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="70px">
|
| | | <el-form-item label="经度:">
|
| | | <el-input
|
| | | v-model="coordFrom.lon"
|
| | | placeholder="请输入经度"
|
| | | ></el-input>
|
| | | </el-form-item>
|
| | | <el-form-item label="纬度:">
|
| | | <el-input
|
| | | v-model="coordFrom.lat"
|
| | | placeholder="请输入维度"
|
| | | ></el-input>
|
| | | </el-form-item>
|
| | | <el-form-item label="高度:">
|
| | | <el-input
|
| | | v-model="coordFrom.height"
|
| | | placeholder="请输入高度"
|
| | | ></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="terrainLevelBox" v-if="showTerrainLevelDialog">
|
| | | <el-card class="box-card">
|
| | | <div slot="header">
|
| | | <span>地形平整</span>
|
| | | <div style="float: right; cursor: pointer">
|
| | | <i class="el-icon-close" @click="closeBufferBox(5)"></i>
|
| | | </div>
|
| | | </div>
|
| | | <div class="box-body">
|
| | | <el-form ref="form" :model="terrainFrom" label-width="100px">
|
| | | <el-form-item label="平整高度:">
|
| | | <el-input v-model="terrainFrom.height"></el-input>
|
| | | </el-form-item>
|
| | |
|
| | | <el-form-item>
|
| | | <el-button @click="drawTerrainLevel" type="parmary"
|
| | | >绘制</el-button
|
| | | >
|
| | | <el-button @click="clearTerrainLevel" 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">
|
| | | <el-form-item label="地名:">
|
| | | <el-input
|
| | | size="small"
|
| | | style="width: 160px"
|
| | | v-model="comprehensive.name"
|
| | | placeholder="请输入地名...."
|
| | | ></el-input>
|
| | | </el-form-item>
|
| | | <el-form-item>
|
| | | <el-button @click="setQueryTable" type="info" size="small"
|
| | | >查询</el-button
|
| | | >
|
| | | </el-form-item>
|
| | | </el-form>
|
| | | <el-table
|
| | | :data="tableData"
|
| | | height="200px"
|
| | | border
|
| | | style="width: 100%"
|
| | | >
|
| | | <el-table-column
|
| | | align="center"
|
| | | type="index"
|
| | | label="序号"
|
| | | width="70"
|
| | | />
|
| | | <el-table-column prop="name" align="center" label="地名">
|
| | | <template slot-scope="scope">
|
| | | <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="定位"-->
|
| | | <!-- >-->
|
| | | <!-- <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
|
| | | @size-change="handleSizeChange"
|
| | | @current-change="handleCurrentChange"
|
| | | :current-page="listData.pageIndex"
|
| | | :page-sizes="[10, 20, 50, 100]"
|
| | | :pager-count="3"
|
| | | :page-size="listData.pageSize"
|
| | | layout="total, prev, pager, next"
|
| | | :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"
|
| | | :rules="rules"
|
| | | label-width="55px"
|
| | | >
|
| | | <el-form-item label="起点:" prop="lon">
|
| | | <el-input
|
| | | style="width: 250px"
|
| | | v-model="pathFrom.lon"
|
| | | placeholder="坐标格式:116.799,39.979"
|
| | | ></el-input>
|
| | | <el-link
|
| | | :underline="false"
|
| | | @click="showMouseLeftClick(1)"
|
| | | style="margin-left: 10px"
|
| | | ><i class="el-icon-plus"></i
|
| | | ></el-link>
|
| | | </el-form-item>
|
| | | <el-form-item label="终点:" prop="lat">
|
| | | <el-input
|
| | | style="width: 250px"
|
| | | v-model="pathFrom.lat"
|
| | | placeholder="坐标格式:116.824,39.938"
|
| | | ></el-input>
|
| | | <el-link
|
| | | :underline="false"
|
| | | @click="showMouseLeftClick(2)"
|
| | | style="margin-left: 10px"
|
| | | ><i 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 style="display: flex;">-->
|
| | | <!-- <div
|
| | | class="changeTerrain"
|
| | | @click="changeTerrainLayer"
|
| | | style=" position: absolute;
|
| | | bottom: 84px;
|
| | | right: 46px;
|
| | | height: 30px;
|
| | | width: 30px;
|
| | | z-index: 101;
|
| | | display: flex;
|
| | | justify-content: center;
|
| | | align-items: center;
|
| | | cursor: pointer;
|
| | | border: 1px solid rgba(255, 255, 255, 0.5);"
|
| | | >
|
| | | <div
|
| | | title="地形切换"
|
| | | id="cenBg"
|
| | | class="mapTerrain"
|
| | | ></div>
|
| | | </div> -->
|
| | | <!-- class="center CenDiv"-->
|
| | | <div
|
| | | @click="changeMenulayer"
|
| | | class="changeLayer"
|
| | | style="
|
| | | position: absolute;
|
| | | bottom: 116px;
|
| | | right: 46px;
|
| | | height: 30px;
|
| | | width: 30px;
|
| | | z-index: 101;
|
| | | display: flex;
|
| | | justify-content: center;
|
| | | align-items: center;
|
| | | cursor: pointer;
|
| | | border: 1px solid rgba(255, 255, 255, 0.5);
|
| | | "
|
| | | >
|
| | | <div title="底图切换" id="cenBg" class="mapBaseMap"></div>
|
| | | </div>
|
| | |
|
| | | <div
|
| | | @click="changeMapType"
|
| | | class="changeMapType"
|
| | | v-if="$store.state.setChangeBaseMap"
|
| | | style="
|
| | | position: absolute;
|
| | | bottom: 85px;
|
| | | right: 46px;
|
| | | height: 30px;
|
| | | width: 30px;
|
| | | z-index: 101;
|
| | | display: flex;
|
| | | justify-content: center;
|
| | | align-items: center;
|
| | | cursor: pointer;
|
| | | border: 1px solid rgba(255, 255, 255, 0.5);
|
| | | "
|
| | | >
|
| | | <div
|
| | | title="2/3维切换"
|
| | | id="cenBg"
|
| | | :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"
|
| | | ></div>
|
| | | </div>
|
| | | <!-- </div>-->
|
| | | <!-- 坡度分析弹窗-->
|
| | | <div class="lengend" v-show="showLengendDialog">
|
| | | <el-card class="box-card">
|
| | | <div class="lengendBox">
|
| | | <div>
|
| | | <img class="lengendImg" src="../assets/img/colors.png" />
|
| | | </div>
|
| | | <div class="lengendSpan">
|
| | | <div>0°</div>
|
| | | <div>17.5°</div>
|
| | | <div>35°</div>
|
| | | <div>52.5°</div>
|
| | | <div>70°</div>
|
| | | </div>
|
| | | </div>
|
| | | </el-card>
|
| | | </div>
|
| | | <div class="HistLeng" v-show="$store.state.histLenged">
|
| | | <el-card class="box-card">
|
| | | <table>
|
| | | <tr>
|
| | | <td>粉质黏土</td>
|
| | | <td>
|
| | | <div
|
| | | style="
|
| | | width: 100px;
|
| | | height: 20px;
|
| | | background: rgba(139, 106, 77, 1);
|
| | | "
|
| | | ></div>
|
| | | </td>
|
| | | </tr>
|
| | | <tr>
|
| | | <td>淤泥质粉土</td>
|
| | | <td>
|
| | | <div
|
| | | style="
|
| | | width: 100px;
|
| | | height: 20px;
|
| | | background: rgba(141, 85, 69, 1);
|
| | | "
|
| | | ></div>
|
| | | </td>
|
| | | </tr>
|
| | | <tr>
|
| | | <td>圆砾</td>
|
| | | <td>
|
| | | <div
|
| | | style="
|
| | | width: 100px;
|
| | | height: 20px;
|
| | | background: rgba(102, 166, 184, 1);
|
| | | "
|
| | | ></div>
|
| | | </td>
|
| | | </tr>
|
| | | <tr>
|
| | | <td>卵石</td>
|
| | | <td>
|
| | | <div
|
| | | style="
|
| | | width: 100px;
|
| | | height: 20px;
|
| | | background: rgba(54, 83, 173, 1);
|
| | | "
|
| | | ></div>
|
| | | </td>
|
| | | </tr>
|
| | | <tr>
|
| | | <td>泥岩</td>
|
| | | <td>
|
| | | <div
|
| | | style="
|
| | | width: 100px;
|
| | | height: 20px;
|
| | | background: rgba(47, 30, 13, 1);
|
| | | "
|
| | | ></div>
|
| | | </td>
|
| | | </tr>
|
| | | <tr>
|
| | | <td>细砂</td>
|
| | | <td>
|
| | | <div
|
| | | style="
|
| | | width: 100px;
|
| | | height: 20px;
|
| | | background: rgba(93, 88, 15, 1);
|
| | | "
|
| | | ></div>
|
| | | </td>
|
| | | </tr>
|
| | | <tr>
|
| | | <td>中砂</td>
|
| | | <td>
|
| | | <div
|
| | | style="
|
| | | width: 100px;
|
| | | height: 20px;
|
| | | background: rgba(164, 140, 21, 1);
|
| | | "
|
| | | ></div>
|
| | | </td>
|
| | | </tr>
|
| | | <tr>
|
| | | <td>淤泥质土</td>
|
| | | <td>
|
| | | <div
|
| | | style="
|
| | | width: 100px;
|
| | | height: 20px;
|
| | | background: rgba(75, 74, 78, 1);
|
| | | "
|
| | | ></div>
|
| | | </td>
|
| | | </tr>
|
| | | <tr>
|
| | | <td>其他</td>
|
| | | <td>
|
| | | <div
|
| | | style="
|
| | | width: 100px;
|
| | | height: 20px;
|
| | | background: rgba(225, 225, 225, 1);
|
| | | "
|
| | | ></div>
|
| | | </td>
|
| | | </tr>
|
| | | </table>
|
| | | </el-card>
|
| | | </div>
|
| | | <!--属性信息弹窗-->
|
| | | <div
|
| | | class="propertiesPop"
|
| | | v-if="$store.state.propertiesFlag == '1'"
|
| | | v-drag
|
| | | >
|
| | | <el-card class="box-card">
|
| | | <div slot="header">
|
| | | <span>属性信息</span>
|
| | | <div style="float: right; cursor: pointer">
|
| | | <el-link
|
| | | v-if="
|
| | | $store.state.surfaceDeForm.flag &&
|
| | | this.$store.state.surfaceDeForm.gid
|
| | | "
|
| | | type="primary"
|
| | | :underline="false"
|
| | | @click="setSurfaceDeForm"
|
| | | style="margin-right: 10px"
|
| | | >地表形变时序图</el-link
|
| | | >
|
| | | <el-link
|
| | | v-if="$store.state.propertiesName.enName == 's_surveyworksite'"
|
| | | type="primary"
|
| | | :underline="false"
|
| | | @click="getPointInfo"
|
| | | style="margin-right: 10px"
|
| | | >勘察信息表</el-link
|
| | | >
|
| | | <el-link
|
| | | type="primary"
|
| | | :underline="false"
|
| | | @click="getAttatchList"
|
| | | style="margin-right: 10px"
|
| | | >查看附件</el-link
|
| | | >
|
| | | <i class="el-icon-close" @click="closeBufferBox(6)"></i>
|
| | | </div>
|
| | | </div>
|
| | | <div
|
| | | class="pointInfoBoxContext"
|
| | | style="height: 250px; overflow-y: auto"
|
| | | >
|
| | | <div
|
| | | style="line-height: 20px"
|
| | | v-for="(value, key) in $store.state.propertiesInfo"
|
| | | :key="key"
|
| | | >
|
| | | <span
|
| | | v-if="key != 'eventid'"
|
| | | style="font-size: 14px; font-weight: bold; margin-right: 5px"
|
| | | >{{ key }}:</span
|
| | | >
|
| | | <span v-if="key != 'eventid'">{{ value }}</span>
|
| | | </div>
|
| | | </div>
|
| | | </el-card>
|
| | | </div>
|
| | | <!--勘察信息弹窗-->
|
| | | <div v-drag class="attributionPop" v-if="showAttribute">
|
| | | <el-card class="box-card">
|
| | | <div slot="header">
|
| | | <span>勘察信息</span>
|
| | | <div style="float: right; cursor: pointer">
|
| | | <i class="el-icon-close" @click="showAttribute = false"></i>
|
| | | </div>
|
| | | </div>
|
| | | <div
|
| | | class="pointInfoBoxContext"
|
| | | style="height: 250px; overflow-y: auto"
|
| | | >
|
| | | <div
|
| | | style="line-height: 20px"
|
| | | v-for="(item, index) in attributeList"
|
| | | :key="index"
|
| | | >
|
| | | <span
|
| | | style="font-size: 14px; font-weight: bold; margin-right: 5px"
|
| | | >{{ item.alias }}:</span
|
| | | >
|
| | | <span>{{ item.value ? item.value : "暂无数据" }}</span>
|
| | | </div>
|
| | | </div>
|
| | | </el-card>
|
| | | </div>
|
| | |
|
| | | <div
|
| | | class="propertiesPop"
|
| | | style="right: 22%"
|
| | | v-if="$store.state.propertiesFlag == '2'"
|
| | | >
|
| | | <el-card class="box-card">
|
| | | <div slot="header">
|
| | | <span>{{ $store.state.propertiesInfo.title }}</span>
|
| | | </div>
|
| | | <div
|
| | | class="pointInfoBoxContext"
|
| | | style="height: 250px; overflow-y: auto"
|
| | | >
|
| | | <div style="line-height: 20px">
|
| | | 岩土名称: {{ $store.state.propertiesInfo.name }}
|
| | | </div>
|
| | | <div style="line-height: 20px">
|
| | | 岩土类型: {{ $store.state.propertiesInfo.type }}
|
| | | </div>
|
| | | <div style="line-height: 20px">
|
| | | 层底深度: {{ $store.state.propertiesInfo.botdepth }} 米
|
| | | </div>
|
| | | <div style="line-height: 20px">
|
| | | 描述: {{ $store.state.propertiesInfo.describe }}
|
| | | </div>
|
| | | </div>
|
| | | </el-card>
|
| | | </div>
|
| | | <!--三维截面分析弹窗-->
|
| | | <div class="modelClipPop" v-if="$store.state.propertiesFlag == '3'">
|
| | | <div class="slide-bg">
|
| | | <el-slider
|
| | | class="slide"
|
| | | @change="valveChange()"
|
| | | :min="-300"
|
| | | :max="300"
|
| | | v-model="valueX"
|
| | | ></el-slider>
|
| | | <span>左右截面</span>
|
| | | </div>
|
| | | SpatialQuery
|
| | | <div class="slide-bg">
|
| | | <el-slider
|
| | | class="slide"
|
| | | @change="valveChange()"
|
| | | :min="-300"
|
| | | :max="300"
|
| | | v-model="valueY"
|
| | | ></el-slider>
|
| | | <span>前后截面</span>
|
| | | </div>
|
| | | <div class="slide-bg">
|
| | | <el-slider
|
| | | class="slide"
|
| | | @change="valveChange()"
|
| | | :min="-300"
|
| | | :max="300"
|
| | | v-model="valueZ"
|
| | | ></el-slider>
|
| | | <span>上下截面</span>
|
| | | </div>
|
| | | </div>
|
| | | <!-- 地表形变时序图 -->
|
| | | <div
|
| | | class="surfaceDeFormPop"
|
| | | style="width: 800px; height: 800px"
|
| | | v-show="surfaceDeFormFlag"
|
| | | v-drag
|
| | | >
|
| | | <el-card class="box-card">
|
| | | <div slot="header">
|
| | | <span>地表形变时序图</span>
|
| | | <div style="float: right; cursor: pointer">
|
| | | <i class="el-icon-close" @click="closeBufferBox(7)"></i>
|
| | | </div>
|
| | | </div>
|
| | | <div
|
| | | id="surfaceDeFormEchart"
|
| | | class="pointInfoBoxContext"
|
| | | style="height: 500px; width: 750px"
|
| | | ></div>
|
| | | </el-card>
|
| | | </div>
|
| | | <!--附件列表弹窗-->
|
| | | <el-dialog
|
| | | title="附件列表"
|
| | | :append-to-body="false"
|
| | | :visible.sync="showAttach"
|
| | | width="35%"
|
| | | :close-on-click-modal="false"
|
| | | >
|
| | | <div>
|
| | | <el-table :data="attachList" height="100%" style="width: 100%" border>
|
| | | <el-table-column
|
| | | align="center"
|
| | | type="index"
|
| | | label="序号"
|
| | | width="50"
|
| | | />
|
| | | <el-table-column prop="name" label="名称"> </el-table-column>
|
| | | <el-table-column label="时间" width="180">
|
| | | <template slot-scope="scope">
|
| | | <span>{{ format(scope.row.createTime) }}</span>
|
| | | </template>
|
| | | </el-table-column>
|
| | | <el-table-column label="操作" width="100">
|
| | | <template slot-scope="scope">
|
| | | <el-button
|
| | | v-if="showAttachDetailBtn(scope.row)"
|
| | | @click="showAttachDetail(scope.row)"
|
| | | type="text"
|
| | | size="small"
|
| | | >查看</el-button
|
| | | >
|
| | | </template>
|
| | | </el-table-column>
|
| | | </el-table>
|
| | | </div>
|
| | | </el-dialog>
|
| | | <!--附件弹窗-->
|
| | | <el-dialog
|
| | | title="预览"
|
| | | :append-to-body="false"
|
| | | :visible.sync="dialog.dialogVisible"
|
| | | width="70%"
|
| | | :close-on-click-modal="false"
|
| | | >
|
| | | <div v-if="dialog.isPdf" class="pdfClass">
|
| | | <iframe
|
| | | :src="dialog.src"
|
| | | type="application/x-google-chrome-pdf"
|
| | | width="100%"
|
| | | height="100%"
|
| | | >
|
| | | </iframe>
|
| | | </div>
|
| | | <div v-if="dialog.isJpg" class="pdfClass">
|
| | | <el-image
|
| | | style="width: 100%; height: 100%"
|
| | | :src="dialog.src"
|
| | | :preview-src-list="[dialog.src]"
|
| | | >
|
| | | </el-image>
|
| | | </div>
|
| | | </el-dialog>
|
| | |
|
| | | <el-dialog
|
| | | title="瓦片下载"
|
| | | :append-to-body="false"
|
| | | :visible.sync="downTitleFlag"
|
| | | :close-on-click-modal="false"
|
| | | :show-close="false"
|
| | | width="30%"
|
| | | >
|
| | | <el-form
|
| | | :model="ruleForm"
|
| | | status-icon
|
| | | :rules="rules"
|
| | | ref="ruleForm"
|
| | | label-width="100px"
|
| | | class="demo-ruleForm"
|
| | | >
|
| | | <el-form-item label="名称" prop="title">
|
| | | <el-input
|
| | | v-model="ruleForm.title"
|
| | | size="small"
|
| | | placeholder="请输入数据名称..."
|
| | | ></el-input>
|
| | | </el-form-item>
|
| | | <el-form-item label="密码" prop="pass">
|
| | | <el-input
|
| | | show-password
|
| | | type="password"
|
| | | v-model="ruleForm.pass"
|
| | | autocomplete="off"
|
| | | size="small"
|
| | | placeholder="请输入密码..."
|
| | | ></el-input>
|
| | | </el-form-item>
|
| | | <el-form-item label="确认密码" prop="checkPass">
|
| | | <el-input
|
| | | show-password
|
| | | type="password"
|
| | | v-model="ruleForm.checkPass"
|
| | | autocomplete="off"
|
| | | size="small"
|
| | | placeholder="确认密码..."
|
| | | ></el-input>
|
| | | </el-form-item>
|
| | | <el-form-item>
|
| | | <el-button
|
| | | type="primary"
|
| | | size="small"
|
| | | @click="submitTitleDown('ruleForm')"
|
| | | >提交</el-button
|
| | | >
|
| | | <el-button size="small" @click="cannelTitleDown('ruleForm')"
|
| | | >取消</el-button
|
| | | >
|
| | | </el-form-item>
|
| | | </el-form>
|
| | | </el-dialog>
|
| | | </div>
|
| | |
|
| | | <surface-chart ref="surfaceChart" />
|
| | | <iframe
|
| | | id="downFrame"
|
| | | src=""
|
| | | style="display: none; border: 0; padding: 0; height: 0; width: 0"
|
| | | ></iframe>
|
| | | <model-property ref="modelProperty"></model-property>
|
| | | </div>
|
| | | </template>
|
| | |
|
| | | <script>
|
| | | import $ from "jquery";
|
| | | import mapMenuTop from "./MapView/mapMenuTop.vue";
|
| | | import mapSpaceTop from "./MapView/mapSpaceTop.vue";
|
| | | import ModelProperty from "../views/Tools/ModelProperty.vue";
|
| | |
|
| | | import {
|
| | | select_Comprehensive_ByPageAndCount,
|
| | | select_Comprehensive_SelectWktById,
|
| | | comprehensive_selectRoute,
|
| | | dataLib_selectFiles,
|
| | | dataQuery_selectFields,
|
| | | dataQuery_selectDomains,
|
| | | dataQuery_selectByPage,
|
| | | sign_getPublicKey,
|
| | | inquiry_downloadTiles,
|
| | | comprehensive_selectPubById,
|
| | | comprehensive_selectModelByGuid,
|
| | | dataQuery_selectByGid,
|
| | | dataLib_selectByPage
|
| | | } from "../api/api";
|
| | | import { getToken } from "@/utils/auth";
|
| | | import * as echarts from "echarts";
|
| | | import axios from "axios";
|
| | | import { nearest } from "@turf/turf";
|
| | | export default {
|
| | | name: "",
|
| | | components: {
|
| | | mapMenuTop,
|
| | | mapSpaceTop,
|
| | | ModelProperty
|
| | | },
|
| | | data() {
|
| | | var validatePosition = (rule, value, callback) => {
|
| | | if (value === "") {
|
| | | callback(new Error("请输入密码"));
|
| | | } else {
|
| | | if (value) {
|
| | | let arr = value.split(",");
|
| | | if (arr.length !== 2) {
|
| | | callback(new Error("坐标点经纬度格式错误!"));
|
| | | } else {
|
| | | if (arr[0].startsWith("116") && arr[1].startsWith("39")) {
|
| | | } else {
|
| | | callback(new Error("坐标点纬度格式错误!"));
|
| | | }
|
| | | }
|
| | | }
|
| | | callback();
|
| | | }
|
| | | };
|
| | | return {
|
| | | centerFlag: false,
|
| | | buffer: null,
|
| | | showBufferBoxDialog: false,
|
| | | showCoordLocalBoxDialog: false,
|
| | | showToponymicLocalBoxDialog: false,
|
| | | showPathAnalysisBoxDialog: false,
|
| | | comprehensive: {},
|
| | | pathFrom: {
|
| | | lon: "",
|
| | | lat: ""
|
| | | },
|
| | | rules: {
|
| | | lon: [
|
| | | { required: true, message: "请输入起点经纬度坐标", trigger: "blur" },
|
| | | {
|
| | | validator: validatePosition,
|
| | | trigger: "blur",
|
| | | message: "坐标点经纬度错误,坐标应在[116.xxx, 39.yyy]范围"
|
| | | }
|
| | | ],
|
| | | lat: [
|
| | | { required: true, message: "请输入终点经纬度坐标", trigger: "blur" },
|
| | | {
|
| | | validator: validatePosition,
|
| | | trigger: "blur",
|
| | | message: "坐标点经纬度错误,坐标应在[116.xxx, 39.yyy]范围"
|
| | | }
|
| | | ]
|
| | | },
|
| | | bufFrom: {
|
| | | val: 50
|
| | | },
|
| | | coordFrom: {
|
| | | lon: "",
|
| | | lat: "",
|
| | | height: ""
|
| | | },
|
| | | listData: {
|
| | | name: null,
|
| | | pageIndex: 1,
|
| | | pageSize: 10
|
| | | },
|
| | | count: 0,
|
| | | selFrom: {},
|
| | | tableData: [],
|
| | | imagePoint: null,
|
| | | handler: null,
|
| | | pathStart: null,
|
| | | pathEnd: null,
|
| | | pathData: null,
|
| | | layer1: null,
|
| | | layer2: null,
|
| | | layer3: null,
|
| | | isActive: false,
|
| | | isMenuLayer: true,
|
| | | selectTree: null,
|
| | | showTerrainLevelDialog: false,
|
| | | menuList: [],
|
| | | defaultProps: {
|
| | | children: "children",
|
| | | label: "label"
|
| | | }, //树绑定对象
|
| | | show2DMap: false,
|
| | | terrainFrom: {
|
| | | height: "10"
|
| | | },
|
| | | showLengendDialog: false,
|
| | | showAttach: false,
|
| | | attachList: [],
|
| | | dialog: {
|
| | | dialogVisible: false,
|
| | | isPdf: false,
|
| | | isJpg: false,
|
| | | src: ""
|
| | | },
|
| | | showAttribute: false,
|
| | | attributeList: [],
|
| | | valueZ: 0,
|
| | | valueX: 0,
|
| | | valueY: 0,
|
| | | terrainflag: false,
|
| | | downTitleFlag: false,
|
| | | downTitleData: null,
|
| | | ruleForm: {
|
| | | pass: "",
|
| | | checkPass: "",
|
| | | title: ""
|
| | | },
|
| | | loadingText: "",
|
| | | loading: false,
|
| | | surfaceDeFormFlag: false,
|
| | | option: null
|
| | | };
|
| | | },
|
| | | mounted() {
|
| | | this.init3DMap();
|
| | | this.$bus.$on("mapChangeBox", (res) => {
|
| | | this.showChangeBox(res);
|
| | | });
|
| | | this.$bus.$on("changemapType", (e) => {
|
| | | this.show2DMap = e;
|
| | | });
|
| | | this.$bus.$on("closeMenuPop", (e) => {
|
| | | //非路径分析
|
| | | if (e != "d3") {
|
| | | this.showPathAnalysisBoxDialog = false;
|
| | | }
|
| | | //非坡度分析
|
| | | if (e != "d2") {
|
| | | this.showLengendDialog = false;
|
| | | }
|
| | | //非地形平整
|
| | | if (e != "d10") {
|
| | | this.showTerrainLevelDialog = false;
|
| | | }
|
| | | });
|
| | | //模型捕捉
|
| | | this.catchmodel();
|
| | | this.$bus.$on("titleDown", (res) => {
|
| | | this.setDownLoadTitle(res);
|
| | | });
|
| | | this.$bus.$on("annexDownload", (res) => {
|
| | | this.setAnnexDownload(res);
|
| | | });
|
| | | window.localStorage.setItem("slider_x", this.valueX);
|
| | | window.localStorage.setItem("slider_y", this.valueY);
|
| | | window.localStorage.setItem("slider_z", this.valueZ);
|
| | | },
|
| | | methods: {
|
| | | async setSurfaceDeForm() {
|
| | | var gid = this.$store.state.surfaceDeForm.gid;
|
| | | const data = await dataQuery_selectByGid({
|
| | | gid: gid,
|
| | | name: "msurfacedeformationdata"
|
| | | });
|
| | | if (data.code != 200) {
|
| | | return this.$message.error("根据GID查询数据失败");
|
| | | }
|
| | |
|
| | | this.getSurfaceDeFormData(data.result);
|
| | | },
|
| | | async getSurfaceDeFormData(result) {
|
| | | var data = await dataLib_selectByPage({
|
| | | filter: "defpointno = '" + result.defpointno + "'",
|
| | | name: "msurfacedeformationdata",
|
| | | pageIndex: 1,
|
| | | pageSize: 100000
|
| | | });
|
| | |
|
| | | const data1 = await dataLib_selectByPage({
|
| | | filter: "defpointno = '" + result.defpointno + "'",
|
| | | name: "msurfacedeformationdatadate",
|
| | | pageIndex: 1,
|
| | | pageSize: 100000
|
| | | });
|
| | |
|
| | | if (data1.code != 200 || data.code != 200) {
|
| | | return this.$message.error("地表形变数据查询失败");
|
| | | }
|
| | |
|
| | | this.surfaceDeFormFlag = true;
|
| | | var average = data.result;
|
| | | var val = data1.result;
|
| | | var xtitle = [];
|
| | | var val1 = [];
|
| | | var val2 = [];
|
| | | for (var i in val) {
|
| | | val1.push(average[0].seqvar);
|
| | | xtitle.push(this.formDate(val[i].defdate));
|
| | | val2.push(val[i].seqvar);
|
| | | }
|
| | | debugger;
|
| | | this.showSurfaceDeFormEchart(xtitle, val1, val2);
|
| | | },
|
| | | formDate(res) {
|
| | | var time = new Date(res);
|
| | | var y = time.getFullYear();
|
| | | var m = time.getMonth() + 1;
|
| | | var d = time.getDate();
|
| | |
|
| | | return y + "-" + this.add0(m) + "-" + this.add0(d);
|
| | | },
|
| | | //格式化时间
|
| | | add0(m) {
|
| | | return m < 10 ? "0" + m : m;
|
| | | },
|
| | | showSurfaceDeFormEchart(res, res1, res2) {
|
| | | var dom = document.getElementById("surfaceDeFormEchart");
|
| | | // var myChart = echarts.init(chartDom);
|
| | | if (this.option != null) {
|
| | | dom.removeAttribute("_echarts_instance_"); // 移除容器上的 _echarts_instance
|
| | | }
|
| | |
|
| | | var myChart = echarts.init(dom, null, {
|
| | | renderer: "canvas",
|
| | | useDirtyRect: false
|
| | | });
|
| | |
|
| | | this.option = {
|
| | | tooltip: {
|
| | | trigger: "axis",
|
| | | formatter: function (params) {
|
| | | return (
|
| | | params[0].axisValue +
|
| | | "<br/>时序形变量:" +
|
| | | params[1].data +
|
| | | " mm" +
|
| | | "<br/>年形变速率:" +
|
| | | params[0].data +
|
| | | " m/a"
|
| | | );
|
| | | }
|
| | | },
|
| | | dataZoom: [
|
| | | {
|
| | | type: "inside" //1平移 缩放
|
| | | }
|
| | | ],
|
| | | grid: {
|
| | | left: "1%",
|
| | | right: "1%",
|
| | | bottom: "1%",
|
| | | containLabel: true
|
| | | },
|
| | | toolbox: {
|
| | | feature: {
|
| | | saveAsImage: {}
|
| | | }
|
| | | },
|
| | |
|
| | | xAxis: {
|
| | | type: "category",
|
| | | boundaryGap: false,
|
| | | data: res.reverse()
|
| | | },
|
| | | yAxis: {
|
| | | type: "value",
|
| | | name: "mm"
|
| | | },
|
| | | series: [
|
| | | {
|
| | | name: "年形变速率",
|
| | | type: "line",
|
| | | stack: "Total",
|
| | | data: res1
|
| | | },
|
| | | {
|
| | | name: "时序变形量",
|
| | | type: "line",
|
| | | stack: "Total",
|
| | | data: res2.reverse()
|
| | | }
|
| | | ]
|
| | | };
|
| | |
|
| | | this.option && myChart.setOption(this.option);
|
| | | window.addEventListener("resize", myChart.resize);
|
| | | },
|
| | | async setAnnexDownload(rs) {
|
| | | var type, eventid;
|
| | | if (rs.serveType == "TMS") {
|
| | | type = "DOM";
|
| | | eventid = "dom_" + rs.id;
|
| | | } else if (rs.serveType == "DEM") {
|
| | | type = "DEM";
|
| | | eventid = "dem_" + rs.id;
|
| | | }
|
| | |
|
| | | var obj = {
|
| | | eventid: eventid,
|
| | | tabName: type
|
| | | };
|
| | | const res = await dataLib_selectFiles(obj);
|
| | |
|
| | | if (res.code != 200) {
|
| | | this.$message.error("附件查询失败");
|
| | | return;
|
| | | }
|
| | | if (res.result.length <= 0) {
|
| | | this.$message("暂无附件");
|
| | | return;
|
| | | }
|
| | |
|
| | | this.attachList = res.result;
|
| | | this.showAttach = true;
|
| | | },
|
| | | setDownLoadTitle(res) {
|
| | | this.signGetPublicKey();
|
| | | this.downTitleFlag = true;
|
| | | this.downTitleData = res;
|
| | | },
|
| | | async signGetPublicKey() {
|
| | | const res = await sign_getPublicKey();
|
| | | if (res && res.code == 200) {
|
| | | window.encrypt = new JSEncrypt();
|
| | | encrypt.setPublicKey(res.result);
|
| | | }
|
| | | },
|
| | | submitTitleDown(formName) {
|
| | | this.$refs[formName].validate((valid) => {
|
| | | if (valid) {
|
| | | this.downTitleData.title = this.ruleForm.title;
|
| | | // this.downTitleData.pwd = encr(this.ruleForm.pass)
|
| | | this.downTitleData.pwd = encrypt.encrypt(this.ruleForm.pass);
|
| | | this.getDownLoadTile(this.downTitleData);
|
| | | this.cannelTitleDown();
|
| | | } else {
|
| | | console.log("error submit!!");
|
| | | return false;
|
| | | }
|
| | | });
|
| | | },
|
| | | async getDownLoadTile(res) {
|
| | | this.loading = true;
|
| | | this.loadingText = "数据下载中,请稍等...";
|
| | | $.ajax({
|
| | | url: BASE_URL + "/inquiry/downloadTiles?token=" + getToken(),
|
| | | type: "POST",
|
| | | data: JSON.stringify(res),
|
| | | dataType: "json", // html、json、jsonp、script、text
|
| | | contentType: "application/json", // "application/x-www-form-urlencoded"
|
| | | success: (data) => {
|
| | | var token = getToken();
|
| | | var url =
|
| | | BASE_URL +
|
| | | "/dataLib/downloadFile?token=" +
|
| | | token +
|
| | | "&guid=" +
|
| | | data.result +
|
| | | "&pwd=" +
|
| | | res.pwd;
|
| | | $("#downFrame").attr("src", url).click();
|
| | | this.loading = false;
|
| | | this.loadingText = "";
|
| | | },
|
| | | error: function (e) {}
|
| | | });
|
| | | },
|
| | | cannelTitleDown(formName) {
|
| | | this.downTitleFlag = false;
|
| | | // this.$refs[formName].resetFields();
|
| | | this.ruleForm = {
|
| | | pass: "",
|
| | | checkPass: "",
|
| | | title: ""
|
| | | };
|
| | | },
|
| | | catchmodel() {
|
| | | var that = this;
|
| | | window.pickedFeature;
|
| | | window.pickedColor;
|
| | | window.modeCatchHandler = new Cesium.ScreenSpaceEventHandler(
|
| | | Viewer.scene.canvas
|
| | | );
|
| | | window.modeCatchHandler.setInputAction((event) => {
|
| | | if (window.pickedColor) {
|
| | | window.pickedFeature &&
|
| | | (window.pickedFeature.color = window.pickedColor);
|
| | | }
|
| | | // window.pickedFeature && (window.pickedFeature.color = window.pickedColor);
|
| | | window.pickedFeature = sgworld.Viewer.scene.pick(event.position);
|
| | | if (Cesium.defined(window.pickedFeature)) {
|
| | | if (
|
| | | window.pickedFeature.primitive instanceof Cesium.Cesium3DTileset
|
| | | ) {
|
| | | if (window.pickedFeature) {
|
| | | window.pickedColor = window.pickedFeature.color;
|
| | | window.pickedFeature.color = Cesium.Color.RED.withAlpha(0.3);
|
| | |
|
| | | // this.$store.state.catModel = true;
|
| | |
|
| | | that.setModelInfoData(window.pickedFeature);
|
| | | }
|
| | | }
|
| | | }
|
| | | }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
| | | },
|
| | | async setModelInfoData(result) {
|
| | | var modelKey = "id";
|
| | | var modelid;
|
| | | if (result.tileset) {
|
| | | if (result.tileset.pubid && parseInt(result.tileset.pubid) > 0) {
|
| | | const data = await comprehensive_selectPubById({
|
| | | id: result.tileset.pubid
|
| | | });
|
| | |
|
| | | if (data.code != 200) {
|
| | | return;
|
| | | } else {
|
| | | modelKey = JSON.parse(data.result.json).modelid;
|
| | | }
|
| | | if (!modelKey) {
|
| | | return this.$message("没有模型主键ID,无法查询数据");
|
| | | }
|
| | | modelid = pickedFeature.getProperty(modelKey);
|
| | | }
|
| | | } else {
|
| | | modelid = "3dml" + result.primitive.id;
|
| | | }
|
| | | var that = this;
|
| | | if (!modelid) {
|
| | | modelid = "noAuto_" + pickedFeature.primitive.layerId;
|
| | | }
|
| | | var obj = {
|
| | | layerid: pickedFeature.primitive.layerId,
|
| | | modelid: modelid
|
| | | };
|
| | |
|
| | | const data1 = await comprehensive_selectModelByGuid(obj);
|
| | |
|
| | | if (data1.code != 200) {
|
| | | return;
|
| | | }
|
| | | var name = null;
|
| | | var bak = null;
|
| | | var type = null;
|
| | | if (data1.result) {
|
| | | name = data1.result.name;
|
| | | bak = data1.result.bak;
|
| | | type = data1.result.type;
|
| | | }
|
| | |
|
| | | that.$store.state.catModelInfo = {
|
| | | id: modelid,
|
| | | name: name,
|
| | | type: type,
|
| | | bak: bak,
|
| | | layerId: pickedFeature.primitive.layerId,
|
| | | layerName: pickedFeature.primitive.id
|
| | | };
|
| | | that.$refs && that.$refs.modelProperty && that.$refs.modelProperty.open();
|
| | | },
|
| | | drawTerrainLevel() {
|
| | | this.clearTerrainLevel();
|
| | | var deep = parseFloat(this.terrainFrom.height);
|
| | | sgworld.Creator.createSimpleGraphic(
|
| | | "polygon",
|
| | | {
|
| | | clampToGround: true
|
| | | },
|
| | | function (entity) {
|
| | | var positions = entity.polygon.hierarchy.getValue().positions;
|
| | | sgworld.Creator.SimpleGraphic.remove(entity.id);
|
| | |
|
| | | window.TerrainFlattening = sgworld.Creator.createTerrainModifier(
|
| | | "地形压平",
|
| | | positions,
|
| | | deep,
|
| | | {}
|
| | | );
|
| | | }
|
| | | );
|
| | | },
|
| | | clearTerrainLevel() {
|
| | | if (window.TerrainFlattening) {
|
| | | window.TerrainFlattening && window.TerrainFlattening.remove();
|
| | | }
|
| | | },
|
| | | addGaoDeMap() {
|
| | | Viewer.imageryLayers.removeAll();
|
| | | var base_ulr = window.sceneConfig.baseUrl;
|
| | | if (base_ulr.indexOf("{host}") > -1) {
|
| | | base_ulr = base_ulr.replace("{host}", iisHost);
|
| | | }
|
| | | Viewer.imageryLayers.addImageryProvider(
|
| | | new Cesium.UrlTemplateImageryProvider({
|
| | | url: base_ulr,
|
| | | maximumLevel: 5
|
| | | })
|
| | | );
|
| | | },
|
| | | init3DMap() {
|
| | | var webKey = "94a34772eb88317fcbf8428e10448561";
|
| | | //地图初始化
|
| | | window.sgworld = new SmartEarth.SGWorld("mapdiv", {
|
| | | licenseServer: window.sceneConfig.licenseServer
|
| | | });
|
| | |
|
| | | window.Viewer = window.sgworld._Viewer;
|
| | | if (is_production) {
|
| | | this.addGaoDeMap();
|
| | | } else {
|
| | | var url =
|
| | | "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/?callback=loadJsonp940826&f=json";
|
| | | $.ajax({
|
| | | url: url,
|
| | | timeout: 1500, // 请求超时时间
|
| | | async: true,
|
| | | type: "GET",
|
| | | success: (res) => {
|
| | | console.log("在线地址获取成功");
|
| | | },
|
| | | error: (res) => {
|
| | | console.log("在线地址获获取失败");
|
| | | this.addGaoDeMap();
|
| | | }
|
| | | });
|
| | | }
|
| | | //定位
|
| | | // sgworld.Navigate.jumpTo({
|
| | | // //跳转视角
|
| | | // destination: new Cesium.Cartesian3.fromDegrees(
|
| | | // 116.3911,
|
| | | // 39.9115,
|
| | | // 100000
|
| | | // ),
|
| | | // })
|
| | | Viewer.camera.flyTo({
|
| | | destination: Cesium.Cartesian3.fromDegrees(110, 33, 8000000)
|
| | | });
|
| | |
|
| | | // window.BaseMapLayer = Viewer.imageryLayers.addImageryProvider(
|
| | | // new Cesium.UrlTemplateImageryProvider({
|
| | | // url: gaoDeBaseUrl[1].url,
|
| | | // })
|
| | | // );
|
| | |
|
| | | Viewer._enableInfoOrSelection = false;
|
| | | //显示fps
|
| | | Viewer.scene.debugShowFramesPerSecond = false;
|
| | | //导航控件
|
| | | // window.sgworld.navControl("nav", false);
|
| | | //比例尺
|
| | | // window.sgworld.navControl("scale", false);
|
| | | //开启深度检测
|
| | | // sgworld.Analysis.depthTestAgainstTerrain(true)
|
| | | Viewer.scene.globe.depthTestAgainstTerrain = true;
|
| | | if (is_production) {
|
| | | var base_ulr = window.sceneConfig.baseUrl;
|
| | | if (base_ulr.indexOf("{host}") > -1) {
|
| | | base_ulr = base_ulr.replace("{host}", iisHost);
|
| | | }
|
| | | window.TileMapLayer = Viewer.imageryLayers.addImageryProvider(
|
| | | new Cesium.UrlTemplateImageryProvider({
|
| | | url: base_ulr,
|
| | | maximumLevel: 9
|
| | | })
|
| | | );
|
| | | window.BaseMapLayer = Viewer.imageryLayers.addImageryProvider(
|
| | | new Cesium.UrlTemplateImageryProvider({
|
| | | url: base_ulr
|
| | | })
|
| | | );
|
| | | }
|
| | |
|
| | | var option = {
|
| | | url: window.sceneConfig.SGUrl,
|
| | | layerName: window.sceneConfig.mptName,
|
| | | requestVertexNormals: true
|
| | | };
|
| | | window.terrainLayer = sgworld.Creator.sfsterrainprovider(
|
| | | "",
|
| | | option,
|
| | | "",
|
| | | true,
|
| | | ""
|
| | | );
|
| | |
|
| | | // window.terrainLayer = new Cesium.CesiumTerrainProvider({
|
| | | // // url: LFData + '/3d/terrain/dem20230321'
|
| | | // url: demLayer
|
| | | // });
|
| | | // Viewer.terrainProvider = window.terrainLayer
|
| | | window.terrainFlag = "MPT";
|
| | | window.elevationTool = new SmartEarth.ElevationTool(window.sgworld);
|
| | | elevationTool.setContourColor("#F1D487");
|
| | | },
|
| | | //dem切换
|
| | | changeTerrainLayer() {
|
| | | if (this.terrainflag) {
|
| | | Viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider();
|
| | | var option = {
|
| | | url: window.sceneConfig.SGUrl,
|
| | | layerName: window.sceneConfig.mptName,
|
| | | requestVertexNormals: true
|
| | | };
|
| | | window.terrainLayer = sgworld.Creator.sfsterrainprovider(
|
| | | "",
|
| | | option,
|
| | | "",
|
| | | true,
|
| | | ""
|
| | | );
|
| | | Viewer.camera.flyTo({
|
| | | destination: Cesium.Cartesian3.fromDegrees(110, 33, 8000000)
|
| | | });
|
| | | } else {
|
| | | window.terrainLayer.deleteObject();
|
| | | window.terrainLayer = null;
|
| | |
|
| | | window.terrainLayer = new Cesium.CesiumTerrainProvider({
|
| | | // url: LFData + '/3d/terrain/dem20230321'
|
| | | url: demLayer
|
| | | });
|
| | | Viewer.terrainProvider = window.terrainLayer;
|
| | | Viewer.camera.flyTo({
|
| | | destination: Cesium.Cartesian3.fromDegrees(
|
| | | 113.229279,
|
| | | 31.215949,
|
| | | 1000
|
| | | ),
|
| | | orientation: {
|
| | | heading: 6.08434611923462,
|
| | | pitch: Cesium.Math.toRadians(-45.0),
|
| | | roll: 0.0
|
| | | }
|
| | | });
|
| | | }
|
| | | this.terrainflag = !this.terrainflag;
|
| | | },
|
| | | changeMenulayer() {
|
| | | this.$bus.$emit("setChangeBaseMapLayer", {
|
| | | type: "Cesium",
|
| | | boolen: true
|
| | | });
|
| | | // this.$refs && this.$refs.addOnlineMap && this.$refs.addOnlineMap.open("地下模式", null,);
|
| | | // this.isActive = !this.isActive;
|
| | | // this.isMenuLayer = !this.isMenuLayer;
|
| | | // this.setLayerVisible();
|
| | | },
|
| | | setLayerVisible() {
|
| | | if (this.isActive == true) {
|
| | | Viewer.imageryLayers._layers[1].show = true;
|
| | | Viewer.imageryLayers._layers[2].show = false;
|
| | | // Viewer.imageryLayers._layers[3].show = false
|
| | |
|
| | | // Viewer.imageryLayers.lower(this.layer2);
|
| | | // Viewer.imageryLayers.lower(this.layer3);
|
| | | } else {
|
| | | // Viewer.imageryLayers.raise(this.layer3);
|
| | | // Viewer.imageryLayers.raise(this.layer2);
|
| | |
|
| | | Viewer.imageryLayers._layers[1].show = false;
|
| | | Viewer.imageryLayers._layers[2].show = true;
|
| | | // Viewer.imageryLayers._layers[3].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;
|
| | | this.showToponymicLocalBoxDialog = false;
|
| | | } else if (res.id == "2") {
|
| | | this.showToponymicLocalBoxDialog = true;
|
| | | this.showCoordLocalBoxDialog = false;
|
| | | this.getToponymicData();
|
| | | }
|
| | | } else if (res.name == "Analysis") {
|
| | | if (res.id == "3") {
|
| | | if (res.show == true) {
|
| | | this.showPathAnalysisBoxDialog = true;
|
| | | } else {
|
| | | this.showPathAnalysisBoxDialog = false;
|
| | | this.closeBufferBox(4);
|
| | | }
|
| | | }
|
| | | } else if (res.name == "Trrain") {
|
| | | switch (res.id) {
|
| | | case "d10":
|
| | | this.showTerrainLevelDialog = !this.showTerrainLevelDialog;
|
| | | this.clearTerrainLevel();
|
| | | break;
|
| | | }
|
| | | } else if (res.name == "Lengend") {
|
| | | switch (res.id) {
|
| | | case "d2":
|
| | | this.showLengendDialog = res.vshow;
|
| | | break;
|
| | | }
|
| | | }
|
| | | },
|
| | | handleSizeChange(val) {
|
| | | this.listData.pageSize = val;
|
| | | this.getToponymicData();
|
| | | },
|
| | | handleCurrentChange(val) {
|
| | | this.listData.pageIndex = val;
|
| | | this.getToponymicData();
|
| | | },
|
| | | setQueryTable() {
|
| | | this.listData.pageSize = 10;
|
| | | this.listData.pageIndex = 1;
|
| | | 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;
|
| | | sgworld.Creator.DeleteObject(this.imagePoint);
|
| | | 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;
|
| | | case 5:
|
| | | this.showTerrainLevelDialog = false;
|
| | | this.clearTerrainLevel();
|
| | | break;
|
| | | case 6:
|
| | | this.$store.state.propertiesFlag = null;
|
| | | this.showAttribute = false;
|
| | | break;
|
| | | case 7:
|
| | | this.surfaceDeFormFlag = false;
|
| | | break;
|
| | | }
|
| | | },
|
| | | //定位
|
| | | setCoordLocal() {
|
| | | if (!this.coordFrom.lon) {
|
| | | return this.$message("请输入经度");
|
| | | }
|
| | | if (!this.coordFrom.lat) {
|
| | | return this.$message("请输入纬度");
|
| | | }
|
| | | var lon = parseFloat(this.coordFrom.lon);
|
| | | var lat = parseFloat(this.coordFrom.lat);
|
| | | var height =
|
| | | parseFloat(this.coordFrom.height) == NaN
|
| | | ? parseFloat(this.coordFrom.height)
|
| | | : 10000;
|
| | |
|
| | | var position = {
|
| | | X: lon,
|
| | | Y: lat,
|
| | | Altitude: height
|
| | | };
|
| | | 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(lon, lat, 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;
|
| | | }
|
| | | },
|
| | | async showMouseLeftClick(res) {
|
| | | if (res == 3) {
|
| | | this.$refs.form.validate(async (valid) => {
|
| | | if (valid) {
|
| | | this.clearPathAll(5);
|
| | | var start = this.pathFrom.lon.split(",");
|
| | | var end = this.pathFrom.lat.split(",");
|
| | | var startData = {
|
| | | x1: parseFloat(start[0]),
|
| | | y1: parseFloat(start[1]),
|
| | | x2: parseFloat(end[0]),
|
| | | y2: parseFloat(end[1])
|
| | | };
|
| | | const data = await comprehensive_selectRoute(startData);
|
| | | if (data.code != 200) {
|
| | | return this.$message.error("数据请求失败");
|
| | | }
|
| | | if (!data.result) {
|
| | | return this.$message.error("暂无数据");
|
| | | }
|
| | | var wkt = this.$wkt.parse(data.result);
|
| | | var bufferSource = Cesium.GeoJsonDataSource.load(wkt, {
|
| | | stroke: new Cesium.Color(82 / 255, 152 / 255, 255 / 255, 1),
|
| | | strokeWidth: 5,
|
| | | clampToGround: true
|
| | | });
|
| | | bufferSource.then((bufferSource) => {
|
| | | sgworld.Navigate.flyToObj(bufferSource);
|
| | | Viewer.dataSources.add(bufferSource);
|
| | | });
|
| | | }
|
| | | });
|
| | | // this.clearPathAll(3);
|
| | | // var start = this.pathFrom.lon.split(",");
|
| | | // var end = this.pathFrom.lat.split(",");
|
| | | // var startData = {
|
| | | // x1: parseFloat(start[0]),
|
| | | // y1: parseFloat(start[1]),
|
| | | // x2: parseFloat(end[0]),
|
| | | // y2: parseFloat(end[1]),
|
| | | // };
|
| | | //
|
| | | // const data = await comprehensive_selectRoute(startData);
|
| | | // if (data.code != 200) {
|
| | | // return this.$message.error("数据请求失败");
|
| | | // }
|
| | | // if (!data.result) {
|
| | | // return this.$message.error("暂无数据");
|
| | | // }
|
| | | // var wkt = this.$wkt.parse(data.result);
|
| | | // var bufferSource = Cesium.GeoJsonDataSource.load(wkt, {
|
| | | // stroke: new Cesium.Color(82 / 255, 152 / 255, 255 / 255, 1),
|
| | | //
|
| | | // strokeWidth: 5,
|
| | | // clampToGround: true,
|
| | | // });
|
| | | // bufferSource.then((bufferSource) => {
|
| | | // sgworld.Navigate.flyToObj(bufferSource);
|
| | | // Viewer.dataSources.add(bufferSource);
|
| | | // });
|
| | | // var jsonurl =
|
| | | // wnsUrl +
|
| | | // '?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;
|
| | | }
|
| | |
|
| | | Viewer.dataSources.removeAll();
|
| | | break;
|
| | | case 4:
|
| | | if (this.linePath != null) {
|
| | | sgworld.Creator.DeleteObject(this.linePath);
|
| | | this.linePath = null;
|
| | | }
|
| | | case 5:
|
| | | if (this.linePath != null) {
|
| | | sgworld.Creator.DeleteObject(this.linePath);
|
| | | this.linePath = null;
|
| | | }
|
| | |
|
| | | Viewer.dataSources.removeAll();
|
| | | 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;
|
| | | }
|
| | | }
|
| | | },
|
| | | //二维/三维地图切换
|
| | | changeMapType() {
|
| | | //
|
| | | this.show2DMap = !this.show2DMap;
|
| | | //二维
|
| | | if (this.show2DMap) {
|
| | | this.$bus.$emit("changemap", 2);
|
| | | }
|
| | | //三维
|
| | | else {
|
| | | this.$bus.$emit("changemap", 3);
|
| | | }
|
| | | this.$bus.$emit("changemapType", this.show2DMap);
|
| | | },
|
| | | //获取附件列表
|
| | | async getAttatchList() {
|
| | | if (this.$store.state.propertiesName == null) {
|
| | | return;
|
| | | }
|
| | |
|
| | | let tabName =
|
| | | this.$store.state.propertiesName.ns +
|
| | | "." +
|
| | | this.$store.state.propertiesName.enName;
|
| | | let eventid = this.$store.state.propertiesInfo.eventid;
|
| | |
|
| | | var obj = {
|
| | | eventid: eventid,
|
| | | tabName: tabName
|
| | | };
|
| | | const res = await dataLib_selectFiles(obj);
|
| | |
|
| | | if (res.code != 200) {
|
| | | this.$message.error("附件查询失败");
|
| | | return;
|
| | | }
|
| | | if (res.result.length <= 0) {
|
| | | this.$message("暂无附件");
|
| | | return;
|
| | | }
|
| | |
|
| | | this.attachList = res.result;
|
| | | this.showAttach = true;
|
| | | },
|
| | | //是否显示查看按钮
|
| | | showAttachDetailBtn(row) {
|
| | | var name = row.name;
|
| | |
|
| | | if (
|
| | | name.indexOf(".pdf") != -1 ||
|
| | | name.indexOf(".jpg") != -1 ||
|
| | | name.indexOf(".gif") != -1 ||
|
| | | name.indexOf(".png") != -1 ||
|
| | | name.indexOf(".jpeg") != -1 ||
|
| | | name.indexOf(".PDF") != -1 ||
|
| | | name.indexOf(".JPG") != -1 ||
|
| | | name.indexOf(".GIF") != -1 ||
|
| | | name.indexOf(".PNG") != -1 ||
|
| | | name.indexOf(".JPEG") != -1 ||
|
| | | name.indexOf(".BMP") != -1 ||
|
| | | name.indexOf(".bmp") != -1
|
| | | // ||name.indexOf('.dwg')!=-1
|
| | | ) {
|
| | | return true;
|
| | | }
|
| | | return false;
|
| | | },
|
| | | //数据初始化
|
| | | refreshAttatchDetail() {
|
| | | this.dialog.src = "";
|
| | | this.dialog.dialogVisible = false;
|
| | | this.dialog.isPdf = false;
|
| | | this.dialog.isJpg = false;
|
| | | },
|
| | | //查看附件
|
| | | showAttachDetail(row) {
|
| | | this.refreshAttatchDetail();
|
| | | var name = row.name;
|
| | | if (name.indexOf(".pdf") != -1 || name.indexOf(".PDF") != -1) {
|
| | | this.dialog.dialogVisible = true;
|
| | | this.dialog.isPdf = true;
|
| | | var url =
|
| | | BASE_URL +
|
| | | "/comprehensive/downloadForView?guid=" +
|
| | | row.guid +
|
| | | "&token=" +
|
| | | getToken();
|
| | | this.dialog.src = url;
|
| | | } else if (
|
| | | name.indexOf(".jpg") != -1 ||
|
| | | name.indexOf(".gif") != -1 ||
|
| | | name.indexOf(".png") != -1 ||
|
| | | name.indexOf(".jpeg") != -1 ||
|
| | | name.indexOf(".JPG") != -1 ||
|
| | | name.indexOf(".GIF") != -1 ||
|
| | | name.indexOf(".PNG") != -1 ||
|
| | | name.indexOf(".JPEG") != -1 ||
|
| | | name.indexOf(".BMP") != -1 ||
|
| | | name.indexOf(".bmp") != -1
|
| | | ) {
|
| | | this.dialog.dialogVisible = true;
|
| | | this.dialog.isJpg = true;
|
| | | var url =
|
| | | BASE_URL +
|
| | | "/comprehensive/downloadForView?guid=" +
|
| | | row.guid +
|
| | | "&token=" +
|
| | | getToken();
|
| | | this.dialog.src = url;
|
| | | }
|
| | | },
|
| | | //格式化时间
|
| | | format(shijianchuo) {
|
| | | //shijianchuo是整数,否则要parseInt转换
|
| | | var time = new Date(shijianchuo);
|
| | | var y = time.getFullYear();
|
| | | var m = time.getMonth() + 1;
|
| | | var d = time.getDate();
|
| | | var h = time.getHours();
|
| | | var mm = time.getMinutes();
|
| | | var s = time.getSeconds();
|
| | | return (
|
| | | y +
|
| | | "-" +
|
| | | this.add0(m) +
|
| | | "-" +
|
| | | this.add0(d) +
|
| | | " " +
|
| | | h +
|
| | | ":" +
|
| | | mm +
|
| | | ":" +
|
| | | s
|
| | | );
|
| | | },
|
| | | //格式化时间
|
| | | add0(m) {
|
| | | return m < 10 ? "0" + m : m;
|
| | | },
|
| | | //勘察信息表
|
| | | getPointInfo() {
|
| | | if (this.showAttribute) {
|
| | | }
|
| | | let attrbuteOption = workSite;
|
| | | var name = attrbuteOption[0].table.replaceAll("_", "");
|
| | | this.getAttributeDomFiled(name);
|
| | | },
|
| | | //获取每个表字段名称及阈值
|
| | | async getAttributeDomFiled(res) {
|
| | | //查询字段信息;
|
| | | const fileds = await dataQuery_selectFields({
|
| | | name: res
|
| | | });
|
| | | if (fileds.code != 200) {
|
| | | this.$message.error("调用列表失败,请联系工作人员!");
|
| | | return;
|
| | | }
|
| | | //查询阈值信息;
|
| | | const domains = await dataQuery_selectDomains({
|
| | | name: res
|
| | | });
|
| | | if (domains.code != 200) {
|
| | | this.$message.error("调用列表失败,请联系工作人员!");
|
| | | return;
|
| | | }
|
| | | var data1 = fileds.result;
|
| | | var data2 = domains.result;
|
| | | var std = [];
|
| | | this.filedsOption = [];
|
| | | for (var i in data1) {
|
| | | if (data1[i].type != "geometry" && data1[i].type) {
|
| | | this.filedsOption.push(data1[i]);
|
| | | }
|
| | | if (data1[i].showtype == 1) {
|
| | | if (data1[i].domainNa != null) {
|
| | | data1[i].domainNa = this.getDomainNaFild(data1[i].domainNa, data2);
|
| | | }
|
| | | std.push(data1[i]);
|
| | | }
|
| | | }
|
| | | this.getAttributeTableData(
|
| | | std,
|
| | | res,
|
| | | this.$store.state.propertiesInfo.工点名称,
|
| | | data1
|
| | | );
|
| | | },
|
| | | //获取表格信息
|
| | | async getAttributeTableData(res, name, title, list) {
|
| | | let attributeFild = res;
|
| | | let parmams = {
|
| | | name: name,
|
| | | pageIndex: 1,
|
| | | pageSize: 10,
|
| | | count: 0,
|
| | | title: title,
|
| | | filter: "workname = " + "'" + title + "'"
|
| | | };
|
| | |
|
| | | const data = await dataQuery_selectByPage(parmams);
|
| | | if (data.code != 200) {
|
| | | this.$message.error("调用列表失败,请联系工作人员!");
|
| | | return;
|
| | | }
|
| | |
|
| | | if (!data.result.length) {
|
| | | this.$message("未查询到勘探信息数据");
|
| | | return;
|
| | | }
|
| | | this.showAttribute = !this.showAttribute;
|
| | | var res_val = attributeFild;
|
| | | for (var i in data.result) {
|
| | | let val_Data = data.result[i];
|
| | | for (var j in res_val) {
|
| | | if (res_val[j].domainNa != null && res_val[j].domainNa != undefined) {
|
| | | val_Data[res_val[j].field] = res_val[j].domainNa;
|
| | | }
|
| | | }
|
| | | }
|
| | | let info = data.result.length > 0 ? data.result[0] : "";
|
| | | if (info) {
|
| | | let keys = Object.keys(info);
|
| | | keys.forEach((obj) => {
|
| | | list.forEach((item) => {
|
| | | if (item.field == obj) {
|
| | | item.value = info[obj];
|
| | | }
|
| | | });
|
| | | });
|
| | | this.attributeList = list;
|
| | | }
|
| | | },
|
| | | valveChange() {
|
| | | window.localStorage.setItem("slider_x", this.valueX);
|
| | | window.localStorage.setItem("slider_y", this.valueY);
|
| | | window.localStorage.setItem("slider_z", this.valueZ);
|
| | | }
|
| | | },
|
| | | destroyed() {
|
| | | this.showAttribute = false;
|
| | | }
|
| | | };
|
| | | </script>
|
| | |
|
| | | <style scoped lang="less">
|
| | | .mapBox {
|
| | | width: 100%;
|
| | | height: 100%;
|
| | | position: relative;
|
| | |
|
| | | #mapdiv {
|
| | | width: 100%;
|
| | | height: 100%;
|
| | | overflow: hidden;
|
| | | position: relative;
|
| | |
|
| | | .toponymicLocalBox {
|
| | | width: 350px;
|
| | | //width: 750px;
|
| | | height: 450x;
|
| | | z-index: 40;
|
| | | position: absolute;
|
| | | right: 8%;
|
| | | bottom: 1%;
|
| | | }
|
| | |
|
| | | .bufferBox {
|
| | | width: 412px;
|
| | | height: 230px;
|
| | | z-index: 40;
|
| | | position: absolute;
|
| | | right: 6%;
|
| | | bottom: 1%;
|
| | | }
|
| | |
|
| | | .coordLocalBox {
|
| | | width: 350px;
|
| | | height: 370px;
|
| | | z-index: 40;
|
| | | position: absolute;
|
| | | right: 8%;
|
| | | bottom: 1%;
|
| | |
|
| | | span {
|
| | | width: 100px;
|
| | | }
|
| | | }
|
| | |
|
| | | .propertiesPop {
|
| | | width: 350px;
|
| | | height: 370px;
|
| | | z-index: 40;
|
| | | position: absolute;
|
| | | right: 8%;
|
| | | bottom: 1%;
|
| | |
|
| | | /deep/ .el-card__header {
|
| | | padding: 10px 20px;
|
| | | }
|
| | |
|
| | | /deep/ .el-card__body {
|
| | | padding: 10px 20px;
|
| | | }
|
| | | }
|
| | |
|
| | | .surfaceDeFormPop {
|
| | | z-index: 40;
|
| | | position: absolute;
|
| | | right: 8%;
|
| | | bottom: 1%;
|
| | |
|
| | | /deep/ .el-card__header {
|
| | | padding: 10px 20px;
|
| | | }
|
| | |
|
| | | /deep/ .el-card__body {
|
| | | padding: 10px 20px;
|
| | | }
|
| | | }
|
| | |
|
| | | .modelClipPop {
|
| | | width: 350px;
|
| | | z-index: 40;
|
| | | position: absolute;
|
| | | left: 2%;
|
| | | top: 3%;
|
| | | background: rgba(255, 255, 255, 0.85);
|
| | | border: 1px solid rgba(32, 160, 255, 0.6);
|
| | |
|
| | | .slide-bg {
|
| | | padding: 10px;
|
| | | display: flex;
|
| | | align-items: center;
|
| | |
|
| | | .slide {
|
| | | width: 250px;
|
| | | margin-left: 5px;
|
| | | margin-right: 15px;
|
| | | }
|
| | | }
|
| | | }
|
| | |
|
| | | .pathAnalysisBox {
|
| | | width: 412px;
|
| | | height: 370px;
|
| | | z-index: 40;
|
| | | position: absolute;
|
| | | right: 8%;
|
| | | bottom: 1%;
|
| | | }
|
| | |
|
| | | .attributionPop {
|
| | | width: 350px;
|
| | | height: 370px;
|
| | | z-index: 40;
|
| | | position: absolute;
|
| | | right: 38%;
|
| | | bottom: 1%;
|
| | |
|
| | | /deep/ .el-card__header {
|
| | | padding: 10px 20px;
|
| | | }
|
| | |
|
| | | /deep/ .el-card__body {
|
| | | padding: 10px 20px;
|
| | | }
|
| | | }
|
| | |
|
| | | .terrainLevelBox {
|
| | | width: 350px;
|
| | | height: 370px;
|
| | | z-index: 40;
|
| | | position: absolute;
|
| | | right: 8%;
|
| | | bottom: -11%;
|
| | | }
|
| | |
|
| | | .box-card {
|
| | | opacity: 0.85;
|
| | | border: 1px solid rgba(32, 160, 255, 0.6);
|
| | | }
|
| | |
|
| | | .menu_Top {
|
| | | width: 100%;
|
| | | padding: 1%;
|
| | | position: absolute;
|
| | | z-index: 40;
|
| | |
|
| | | /deep/.el-form-item {
|
| | | margin-bottom: 0px;
|
| | | }
|
| | | }
|
| | |
|
| | | .menu_Popup {
|
| | | background: #303030;
|
| | | opacity: 0.85;
|
| | | width: 60%;
|
| | | height: 45%;
|
| | |
|
| | | left: 20%;
|
| | | bottom: 5%;
|
| | | position: absolute;
|
| | | z-index: 40;
|
| | | }
|
| | |
|
| | | .HistLeng {
|
| | | z-index: 40;
|
| | | position: absolute;
|
| | | right: 115px;
|
| | | bottom: 10px;
|
| | | }
|
| | |
|
| | | .lengend {
|
| | | width: 300px;
|
| | | z-index: 40;
|
| | | position: absolute;
|
| | | right: 1%;
|
| | | bottom: 13%;
|
| | | transform: rotate(90deg);
|
| | |
|
| | | .lengendBox {
|
| | | .lengendSpan {
|
| | | display: flex;
|
| | | justify-content: space-between;
|
| | | margin-top: 10px;
|
| | |
|
| | | div {
|
| | | transform: rotate(-90deg);
|
| | | }
|
| | | }
|
| | |
|
| | | .lengendImg {
|
| | | -ms-transform: rotate(180deg);
|
| | | /* IE 9 */
|
| | | -webkit-transform: rotate(180deg);
|
| | | /* Safari and Chrome */
|
| | | transform: rotate(180deg);
|
| | | width: 100%;
|
| | | height: 30px;
|
| | | }
|
| | | }
|
| | | }
|
| | | }
|
| | | }
|
| | |
|
| | | // /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–enable-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%;
|
| | | left: calc(1% + 75px);
|
| | | height: 40px;
|
| | | width: 60px;
|
| | | z-index: 101;
|
| | | display: flex;
|
| | | flex-direction: column;
|
| | | justify-content: space-between;
|
| | | // box-shadow: 3px 3px 6px #666;
|
| | | // border: 1px solid rgba(204, 204, 204, 0.76);
|
| | | 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;
|
| | | }
|
| | |
|
| | | .mapBaseMap {
|
| | | width: 100%;
|
| | | height: 100%;
|
| | | //margin-left: 10px;
|
| | | background-image: url("../assets/img/basemap.png");
|
| | | //background-image: url("../assets/img/synthesis/底图.png");
|
| | | background-repeat: no-repeat;
|
| | | background-size: contain;
|
| | | }
|
| | |
|
| | | //.changeMapType {
|
| | | // position: absolute;
|
| | | // bottom: 1%;
|
| | | // left: calc(1% + 150px);
|
| | | // 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;
|
| | | //
|
| | | // cursor: pointer;
|
| | | //}
|
| | | .changeTerrain {
|
| | | }
|
| | |
|
| | | .changeLayer {
|
| | | }
|
| | |
|
| | | .changeMapType {
|
| | | }
|
| | |
|
| | | //.changeTerrain {
|
| | | // position: absolute;
|
| | | // bottom: 1%;
|
| | | // left: 1%;
|
| | | // height: 40px;
|
| | | // width: 60px;
|
| | | // z-index: 101;
|
| | | // display: flex;
|
| | | // justify-content: center;
|
| | | // align-items: center;
|
| | | //
|
| | | // border-radius: 5px;
|
| | | // cursor: pointer;
|
| | | //}
|
| | |
|
| | | .mapTypeTwo {
|
| | | width: 100%;
|
| | | height: 100%;
|
| | | margin-left: 10px;
|
| | | background-image: url("../assets/img/3D.png");
|
| | | //background-image: url("../assets/img/synthesis/3D.png");
|
| | | background-repeat: no-repeat;
|
| | |
|
| | | //background-size: contain;
|
| | | }
|
| | |
|
| | | .mapTerrain {
|
| | | width: 100%;
|
| | | height: 100%;
|
| | | //margin-left: 10px;
|
| | | //background-image: url("../assets/img/synthesis/地形.png");
|
| | | //background-image: url("../assets/img/synthesis/地形.png");
|
| | | background-image: url("../assets/img/terrain.png");
|
| | | background-repeat: no-repeat;
|
| | | //background-size: contain;
|
| | | }
|
| | |
|
| | | .mapTypeThree {
|
| | | width: 100%;
|
| | | height: 100%;
|
| | | //margin-left: 10px;
|
| | | background-image: url("../assets/img/2D.png");
|
| | | background-repeat: no-repeat;
|
| | | //background-size: contain;
|
| | | }
|
| | |
|
| | | .pdfClass {
|
| | | height: 70vh;
|
| | | width: 100%;
|
| | | position: relative;
|
| | | }
|
| | |
|
| | | // .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>
|