| | |
| | | </div> |
| | | </el-card> |
| | | </div> |
| | | <div class="romBox" v-drag v-if="$store.state.lineRoam"> |
| | | <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(9)"></i> |
| | | </div> |
| | | </div> |
| | | <div class="box-body"> |
| | | <el-form ref="form" :model="bufFrom" label-width="100px"> |
| | | <el-form-item label="线路:"> |
| | | <el-select v-model="bufFrom.roamLine" placeholder=""> |
| | | <el-option v-for="item in bufFrom.roamOption" :key="item.value" :label="item.label" |
| | | :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="线路:"> |
| | | <el-select v-model="bufFrom.roamLine2" placeholder=""> |
| | | <el-option v-for="item in bufFrom.roamOption2" :key="item.id" :label="item.name" :value="item.geom"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button size="mini" @click="setStartRoam">开始漫游</el-button> |
| | | <el-button size="mini" @click="setExitRoam">结束漫游</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div class="romContent" v-show="flyRoamOption.length != 0"> |
| | | <ul> |
| | | <li v-for="(item, index) in flyRoamOption" :key="index"> |
| | | <span> {{ item.line }}</span> <span> {{ item.name }}</span> <span> {{ item.type }}</span> |
| | | </li> |
| | | </ul> |
| | | </div> |
| | | |
| | | </div> |
| | | </el-card> |
| | | </div> |
| | | <!--坐标点位--> |
| | | <div class="coordLocalBox" v-if="showCoordLocalBoxDialog"> |
| | | <el-card class="box-card"> |
| | |
| | | justify-content: center; |
| | | align-items: center; |
| | | cursor: pointer; |
| | | border: 1px solid rgba(255, 255, 255, 0.5);"> |
| | | border: 1px solid rgba(255, 255, 255, 0.5);display:none"> |
| | | <div title="2/3维切换" id="cenBg" :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"></div> |
| | | </div> |
| | | <!-- </div>--> |
| | |
| | | <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> |
| | | <span>{{ value.name }}:{{ value.val }}</span> |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | |
| | | </div> |
| | | </el-card> |
| | | </div> |
| | | |
| | | <!-- 地表形变时序图 --> |
| | | <div class="surfaceDeFormPop" v-if="$store.state.showEchartCount" style="width: 800px; height: 800px;" 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(8)"></i> |
| | | </div> |
| | | </div> |
| | | <div id="surfaceDeFormEchart" class="pointInfoBoxContext" style="height:500px;width:750px;"> |
| | | <echart1></echart1> |
| | | </div> |
| | | </el-card> |
| | | </div> |
| | | <!-- 知识图谱 --> |
| | | <div class="knowledgePop" v-if="$store.state.knowledgeFlag" v-drag> |
| | | <el-card class="box-card"> |
| | | <div slot="header"> |
| | | <div style="float: right; cursor: pointer"> |
| | | <i class="el-icon-close" @click="closeBufferBox(10)"></i> |
| | | </div> |
| | | </div> |
| | | <div class="knowegBody"> |
| | | <knowledge-graph v-if="$store.state.knowledgeFlag"></knowledge-graph> |
| | | </div> |
| | | |
| | | </el-card> |
| | | </div> |
| | | <!--附件列表弹窗--> |
| | | <el-dialog title="附件列表" :append-to-body="false" :visible.sync="showAttach" width="35%" |
| | | :close-on-click-modal="false"> |
| | |
| | | <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> |
| | |
| | | import mapMenuTop from "./MapView/mapMenuTop.vue"; |
| | | import mapSpaceTop from "./MapView/mapSpaceTop.vue"; |
| | | import ModelProperty from '../views/Tools/ModelProperty.vue'; |
| | | |
| | | import knowledgeGraph from '@/views/datamanage/knowledgeGraph' |
| | | import { |
| | | select_Comprehensive_ByPageAndCount, |
| | | select_Comprehensive_SelectWktById, |
| | |
| | | dataLib_selectFiles, dataQuery_selectFields, dataQuery_selectDomains, |
| | | dataQuery_selectByPage, sign_getPublicKey, inquiry_downloadTiles, |
| | | comprehensive_selectPubById, comprehensive_selectModelByGuid, dataQuery_selectByGid, |
| | | dataLib_selectByPage |
| | | dataLib_selectByPage, zhangzitou_selectAllLine, zhangzitou_selectAll |
| | | } from '../api/api' |
| | | import { getToken } from '@/utils/auth' |
| | | import * as echarts from "echarts" |
| | | import echart1 from "./echart1.vue"; |
| | | import mapTools from "./js/mapTool"; |
| | | import { conditions } from '../views/Archive/Archive'; |
| | | export default { |
| | | name: "", |
| | | components: { |
| | | mapMenuTop, |
| | | mapSpaceTop, |
| | | ModelProperty, |
| | | |
| | | echart1, |
| | | knowledgeGraph |
| | | |
| | | }, |
| | | data() { |
| | |
| | | loadingText: '', |
| | | loading: false, |
| | | surfaceDeFormFlag: false, |
| | | option: null |
| | | option: null, flyRoamOption: [] |
| | | }; |
| | | }, |
| | | mounted() { |
| | | this.init3DMap(); |
| | | this.getRomData(); |
| | | this.$bus.$on("mapChangeBox", (res) => { |
| | | this.showChangeBox(res); |
| | | }); |
| | |
| | | } |
| | | }); |
| | | //模型捕捉 |
| | | this.catchmodel(); |
| | | // this.catchmodel(); |
| | | this.$bus.$on("titleDown", res => { |
| | | this.setDownLoadTitle(res); |
| | | }); |
| | |
| | | window.localStorage.setItem('slider_z', this.valueZ); |
| | | }, |
| | | methods: { |
| | | async getRomData() { |
| | | const data = await zhangzitou_selectAllLine({ |
| | | limit: 100000, |
| | | page: 1, |
| | | }) |
| | | |
| | | if (data.code != 200) return; |
| | | var res = data.result.pois; |
| | | this.bufFrom.roamData = res; |
| | | this.setRoamData(); |
| | | |
| | | }, |
| | | setRoamData() { |
| | | var res = this.bufFrom.roamData; |
| | | var std = []; |
| | | var str = []; |
| | | |
| | | for (var i in res) { |
| | | if (std.indexOf(res[i].line) == -1) { |
| | | std.push(res[i].line) |
| | | } |
| | | } |
| | | |
| | | |
| | | for (var i in std) { |
| | | str.push({ |
| | | label: std[i], |
| | | value: std[i] |
| | | }) |
| | | } |
| | | this.bufFrom.roamOption = str; |
| | | this.bufFrom.roamLine = str[0].value; |
| | | this.setRoamChange(); |
| | | |
| | | }, |
| | | setRoamChange() { |
| | | var res = this.bufFrom.roamData; |
| | | var obj = []; |
| | | for (var i in res) { |
| | | if (this.bufFrom.roamLine == res[i].line) { |
| | | obj.push(res[i]) |
| | | } |
| | | } |
| | | this.bufFrom.roamOption2 = obj; |
| | | this.bufFrom.roamLine2 = obj[0].geom; |
| | | this.setRoamPoint(this.bufFrom.roamLine2.line); |
| | | |
| | | }, |
| | | async setRoamPoint(res) { |
| | | |
| | | const data = await zhangzitou_selectAll({ |
| | | limit: 100000, |
| | | page: 1, |
| | | line: res |
| | | }); |
| | | if (data.code == 200) { |
| | | this.flyRoamOption = data.result.pois; |
| | | } |
| | | }, |
| | | setExitRoam() { |
| | | if (!window.PathAnimationData) return |
| | | window.PathAnimationData.fly && window.PathAnimationData.fly.exit(); |
| | | |
| | | }, |
| | | setStartRoam() { |
| | | var obj = this.bufFrom.roamLine2; |
| | | var geom = this.$wkt.parse(obj).coordinates[0]; |
| | | |
| | | var degreesArr = []; |
| | | for (var i in geom) { |
| | | degreesArr.push(geom[i][0], geom[i][1], 0) |
| | | } |
| | | |
| | | earthCtrl.factory.getFlyData(degreesArr, data => { |
| | | data.showPoint = false; |
| | | data.showLine = true; |
| | | data.mode = 1; |
| | | // 弹窗数据 |
| | | window.PathAnimationData = { |
| | | flyData: data, |
| | | positionEndCallback: (res) => { |
| | | // setTimeout(() => { |
| | | // PathAnimationData.fly && PathAnimationData.fly.isPause(true); |
| | | // }, 300); |
| | | // mapTools.init(res, geom, this.bufFrom.roamOption2); |
| | | } |
| | | }; |
| | | |
| | | window.PathAnimationData.winIndex = layer.open({ |
| | | type: 2, |
| | | title: '路径动画', |
| | | shade: false, |
| | | area: ['0px', '0px'], |
| | | offset: 'r', |
| | | skin: 'other-class', |
| | | content: SmartEarthRootUrl + 'Workers/path/Path.html', |
| | | end: function () { |
| | | PathAnimationData.fly && PathAnimationData.fly.exit(); |
| | | } |
| | | }); |
| | | }) |
| | | |
| | | // setTimeout(() => { |
| | | // layer.close(window.PathAnimationData.winIndex) |
| | | // }, 1000); |
| | | }, |
| | | async setSurfaceDeForm() { |
| | | var gid = this.$store.state.surfaceDeForm.gid; |
| | | const data = await dataQuery_selectByGid({ gid: gid, name: 'msurfacedeformationdata' }); |
| | |
| | | window.pickedFeature; |
| | | window.pickedColor; |
| | | window.modeCatchHandler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas); |
| | | window.pickGlobeSlope = new SmartEarth.Cesium.PickGlobeSlope(earthCtrl.Viewer) |
| | | 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); |
| | | window.pickedFeature = pickGlobeSlope.pickSlope(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); |
| | | if (pickedFeature.primitive && pickedFeature.primitive.primitive) { |
| | | var datat = pickedFeature.primitive.primitive; |
| | | var std = []; |
| | | for (var key in datat) { |
| | | if (key != 'geom') { |
| | | std.push({ |
| | | name: key, |
| | | val: datat[key] |
| | | }) |
| | | } |
| | | |
| | | // this.$store.state.catModel = true; |
| | | } |
| | | this.$store.state.propertiesInfo = std; |
| | | this.$store.state.propertiesFlag = '1'; |
| | | return |
| | | } |
| | | |
| | | that.setModelInfoData(window.pickedFeature); |
| | | if (pickedFeature.id.properties.propertyNames.length > 0) { |
| | | var val = pickedFeature.id.properties.propertyNames; |
| | | var std = []; |
| | | for (var i in val) { |
| | | std.push({ |
| | | name: val[i], |
| | | val: pickedFeature.id.properties[val[i]]._value |
| | | }) |
| | | } |
| | | } |
| | | if (std.length > 0) { |
| | | |
| | | this.$store.state.propertiesInfo = std; |
| | | |
| | | this.$store.state.propertiesFlag = '1' |
| | | return |
| | | } |
| | | // console.log(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) |
| | | }, |
| | |
| | | init3DMap() { |
| | | var webKey = "94a34772eb88317fcbf8428e10448561"; |
| | | //地图初始化 |
| | | window.sgworld = new SmartEarth.SGWorld("mapdiv", { |
| | | // window.sgworld = new SmartEarth.SGWorld("mapdiv", { |
| | | |
| | | licenseServer: window.sceneConfig.licenseServer, |
| | | // licenseServer: window.sceneConfig.licenseServer, |
| | | // }); |
| | | window.earthCtrl = new SmartEarth.EarthCtrl("mapdiv", { |
| | | StaticFileBaseUrl: window.sceneConfig.licenseServer, |
| | | |
| | | }); |
| | | window.Viewer = window.sgworld._Viewer; |
| | | // if (is_production) { |
| | | // 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 |
| | | // }) |
| | | // ); |
| | | window.Viewer = earthCtrl._Viewer; |
| | | window.sgworld = earthCtrl; |
| | | window.Cesium = SmartEarth.Cesium; |
| | | |
| | | // } |
| | | Viewer.imageryLayers.removeAll(); |
| | | |
| | | //定位 |
| | | // sgworld.Navigate.jumpTo({ |
| | | // //跳转视角 |
| | | // destination: new Cesium.Cartesian3.fromDegrees( |
| | | // 116.3911, |
| | | // 39.9115, |
| | | // 100000 |
| | | // ), |
| | | // }) |
| | | Viewer.camera.flyTo({ |
| | | destination: Cesium.Cartesian3.fromDegrees(110, 33, 8000000), |
| | | }); |
| | | earthCtrl.camera.jumpTo({ |
| | | |
| | | // window.BaseMapLayer = Viewer.imageryLayers.addImageryProvider( |
| | | // new Cesium.UrlTemplateImageryProvider({ |
| | | // url: gaoDeBaseUrl[1].url, |
| | | // }) |
| | | // ); |
| | | destination: { |
| | | "x": -1935239.1689147458, |
| | | "y": 4653957.816261454, |
| | | "z": 3900586.9686804516 |
| | | } |
| | | }) |
| | | |
| | | window.BaseMapLayer = Viewer.imageryLayers.addImageryProvider( |
| | | new Cesium.UrlTemplateImageryProvider({ |
| | | url: "http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=94a34772eb88317fcbf8428e10448561", |
| | | }) |
| | | ); |
| | | window.BaseMapLayer = Viewer.imageryLayers.addImageryProvider( |
| | | new Cesium.UrlTemplateImageryProvider({ |
| | | url: "http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=94a34772eb88317fcbf8428e10448561", |
| | | }) |
| | | ); |
| | | Viewer._enableInfoOrSelection = false; |
| | | //显示fps |
| | | Viewer.scene.debugShowFramesPerSecond = false; |
| | |
| | | // requestVertexNormals: true, |
| | | // }; |
| | | // window.terrainLayer = sgworld.Creator.sfsterrainprovider("", option, "", true, ""); |
| | | |
| | | window.terrainLayer = new Cesium.CesiumTerrainProvider({ |
| | | |
| | | url: demLayer |
| | | }); |
| | | Viewer.terrainProvider = window.terrainLayer |
| | | |
| | | // window.terrainLayer = new Cesium.CesiumTerrainProvider({ |
| | | |
| | | // url: demLayer |
| | | // }); |
| | | // Viewer.terrainProvider = window.terrainLayer |
| | | // window.terrainFlag = 'MPT' |
| | | window.elevationTool = new SmartEarth.ElevationTool(window.sgworld); |
| | | elevationTool.setContourColor("#F1D487"); |
| | |
| | | case 7: |
| | | this.surfaceDeFormFlag = false; |
| | | break; |
| | | case 8: |
| | | this.$store.state.showEchartCount = false; |
| | | break; |
| | | case 9: |
| | | this.$store.state.lineRoam = false; |
| | | this.flyRoamOption = []; |
| | | this.setRoamData() |
| | | break; |
| | | case 10: |
| | | this.$store.state.knowledgeFlag = false |
| | | break; |
| | | |
| | | } |
| | | }, |
| | | //定位 |
| | |
| | | "巡检点" |
| | | ); |
| | | |
| | | sgworld.Navigate.jumpTo({ |
| | | earthCtrl.camera.jumpTo({ |
| | | //跳转视角 |
| | | destination: new Cesium.Cartesian3.fromDegrees( |
| | | lon, |
| | |
| | | position: absolute; |
| | | right: 6%; |
| | | bottom: 1%; |
| | | |
| | | .clearfix { |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .el-button--mini { |
| | | padding: 0.36458vw 0.78125vw; |
| | | } |
| | | } |
| | | |
| | | .romBox { |
| | | width: 350px; |
| | | height: 230px; |
| | | z-index: 40; |
| | | position: absolute; |
| | | right: 2%; |
| | | top: 2%; |
| | | |
| | | .romContent { |
| | | max-height: 230px; |
| | | overflow: auto; |
| | | |
| | | li { |
| | | line-height: 20px; |
| | | font-size: 22x; |
| | | font-family: Source Han Sans CN; |
| | | font-weight: bolder; |
| | | display: flex; |
| | | justify-content: space-around; |
| | | } |
| | | } |
| | | |
| | | .clearfix { |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .el-button--mini { |
| | | padding: 0.36458vw 0.78125vw; |
| | | } |
| | | } |
| | | |
| | | .coordLocalBox { |
| | |
| | | position: absolute; |
| | | right: 8%; |
| | | bottom: 1%; |
| | | font-size: 14px; |
| | | font-family: Source Han Sans CN; |
| | | |
| | | span { |
| | | line-height: 25px; |
| | | } |
| | | |
| | | /deep/ .el-card__header { |
| | | padding: 10px 20px; |
| | |
| | | |
| | | /deep/ .el-card__body { |
| | | padding: 10px 20px; |
| | | } |
| | | } |
| | | |
| | | .knowledgePop { |
| | | z-index: 40; |
| | | position: absolute; |
| | | |
| | | top: 2%; |
| | | right: 2%; |
| | | width: 94%; |
| | | height: 92% !important; |
| | | |
| | | /deep/ .el-card__header { |
| | | padding: 10px 20px; |
| | | } |
| | | |
| | | /deep/ .el-card__body { |
| | | padding: 0px 0px; |
| | | height: 84vh; |
| | | } |
| | | |
| | | .knowegBody { |
| | | height: calc(96vh - 28px); |
| | | } |
| | | } |
| | | |
| | |
| | | // background: rgba(255, 255, 255, 0.2) !important; |
| | | // color: white !important; |
| | | // border: 1px solid rgba(255, 255, 255, 0.2) !important; |
| | | // } |
| | | </style> |
| | | // }</style> |