| | |
| | | </div> |
| | | </el-card> |
| | | </div> |
| | | <div class="pathAnalysisBox" v-if="showPathAnalysisBoxDialog"> |
| | | <el-card class="box-card"> |
| | | <div slot="header" class="clearfix"> |
| | | <span>路径分析</span> |
| | | <div style="float: right; cursor: pointer"> |
| | | <i class="el-icon-close" @click="closeBufferBox(4)"></i> |
| | | </div> |
| | | </div> |
| | | <div class="box-body"> |
| | | <el-form ref="form" :model="pathFrom" label-width="50px"> |
| | | <el-form-item label="经度:"> |
| | | <el-input style="width: 300px" v-model="pathFrom.lon"></el-input> |
| | | <el-link |
| | | :underline="false" |
| | | @click="showMouseLeftClick(1)" |
| | | style="margin-left: 10px" |
| | | ><i style="color: white" class="el-icon-plus"></i |
| | | ></el-link> |
| | | </el-form-item> |
| | | <el-form-item label="纬度:"> |
| | | <el-input style="width: 300px" v-model="pathFrom.lat"></el-input> |
| | | <el-link |
| | | :underline="false" |
| | | @click="showMouseLeftClick(2)" |
| | | style="margin-left: 10px" |
| | | ><i style="color: white" class="el-icon-plus"></i |
| | | ></el-link> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button @click="showMouseLeftClick(3)" type="info" |
| | | >查询</el-button |
| | | > |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | </el-card> |
| | | </div> |
| | | <div |
| | | @click="changeMenulayer" |
| | | class="center CenDiv" |
| | | :class="{ center1: centerFlag }" |
| | | > |
| | | <div |
| | | id="cenBg" |
| | | v-bind:class="{ active: isActive, menuLayer: isMenuLayer }" |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import $ from 'jquery'; |
| | | import { |
| | | select_Comprehensive_ByPageAndCount, |
| | | select_Comprehensive_SelectWktById, |
| | |
| | | name: '', |
| | | data() { |
| | | return { |
| | | centerFlag: false, |
| | | buffer: null, |
| | | showBufferBoxDialog: false, |
| | | showCoordLocalBoxDialog: false, |
| | | showToponymicLocalBoxDialog: false, |
| | | showPathAnalysisBoxDialog: false, |
| | | comprehensive: {}, |
| | | pathFrom: { |
| | | lon: '116.086746,39.937314', |
| | | lat: '116.086000,39.936289', |
| | | }, |
| | | bufFrom: { |
| | | val: 50, |
| | | }, |
| | |
| | | count: 0, |
| | | tableData: [], |
| | | imagePoint: null, |
| | | handler: null, |
| | | pathStart: null, |
| | | pathEnd: null, |
| | | pathData: null, |
| | | |
| | | isActive: false, |
| | | isMenuLayer: true, |
| | | }; |
| | | }, |
| | | mounted() { |
| | |
| | | }, |
| | | methods: { |
| | | init3DMap() { |
| | | var webKey = '94a34772eb88317fcbf8428e10448561'; |
| | | |
| | | //地图初始化 |
| | | window.sgworld = new SmartEarth.SGWorld('mapdiv', { |
| | | licenseServer: window.sceneConfig.licenseServer, |
| | | }); |
| | | |
| | | window.Viewer = window.sgworld._Viewer; |
| | | |
| | | //定位 |
| | | // sgworld.Navigate.jumpTo({ |
| | | // //跳转视角 |
| | | // destination: new Cesium.Cartesian3.fromDegrees(110, 32, 8000000), |
| | | // }); |
| | | sgworld.Navigate.jumpTo({ |
| | | //跳转视角 |
| | | destination: { |
| | | x: 311837.3471863137, |
| | | y: 5628280.936629815, |
| | | z: 2992581.921482893, |
| | | }, |
| | | orientation: { |
| | | heading: 2.5028896264234364, |
| | | pitch: -0.2201285642360813, |
| | | roll: 0.0, |
| | | }, |
| | | destination: new Cesium.Cartesian3.fromDegrees( |
| | | 116.055913, |
| | | 39.937685, |
| | | 8000 |
| | | ), |
| | | }); |
| | | Viewer.imageryLayers.addImageryProvider( |
| | | new Cesium.WebMapTileServiceImageryProvider({ |
| | | url: 'http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561', |
| | | layer: 'tdtVecBasicLayer', |
| | | style: 'default', |
| | | format: 'image/jpeg', |
| | | tileMatrixSetID: 'GoogleMapsCompatible', |
| | | show: false, |
| | | }) |
| | | ); |
| | | |
| | | Viewer.imageryLayers.addImageryProvider( |
| | | new Cesium.WebMapTileServiceImageryProvider({ |
| | | url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561', |
| | | layer: 'tdtBasicLayer', |
| | | style: 'default', |
| | | format: 'image/jpeg', |
| | | tileMatrixSetID: 'GoogleMapsCompatible', |
| | | show: false, |
| | | }) |
| | | ); |
| | | Viewer.imageryLayers.addImageryProvider( |
| | | new Cesium.WebMapTileServiceImageryProvider({ |
| | | url: 'http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=94a34772eb88317fcbf8428e10448561', |
| | | layer: 'tdtAnnoLayer', |
| | | style: 'default', |
| | | format: 'image/jpeg', |
| | | tileMatrixSetID: 'GoogleMapsCompatible', |
| | | }) |
| | | ); |
| | | |
| | | // sgworld.Navigate.jumpTo({ |
| | | // //跳转视角 |
| | | // destination: { |
| | | // x: 311837.3471863137, |
| | | // y: 5628280.936629815, |
| | | // z: 2992581.921482893, |
| | | // }, |
| | | // orientation: { |
| | | // heading: 2.5028896264234364, |
| | | // pitch: -0.2201285642360813, |
| | | // roll: 0.0, |
| | | // }, |
| | | // }); |
| | | |
| | | // Viewer.scene.globe.depthTestAgainstTerrain = true; |
| | | Viewer._enableInfoOrSelection = false; |
| | | //显示fps |
| | | Viewer.scene.debugShowFramesPerSecond = false; |
| | |
| | | layerName: window.sceneConfig.mpt.name, |
| | | requestVertexNormals: true, |
| | | }; |
| | | sgworld.Creator.sfsterrainprovider('mpt', option, '', true, ''); |
| | | // sgworld.Creator.sfsterrainprovider('mpt', option, '', true, ''); |
| | | window.elevationTool = new SmartEarth.ElevationTool(window.sgworld); |
| | | //模型加载 |
| | | }, |
| | | |
| | | changeMenulayer() { |
| | | this.isActive = !this.isActive; |
| | | this.isMenuLayer = !this.isMenuLayer; |
| | | this.setLayerVisible(); |
| | | }, |
| | | setLayerVisible() { |
| | | if (this.isActive == true) { |
| | | Viewer.imageryLayers.get(1).show = true; |
| | | Viewer.imageryLayers.get(2).show = false; |
| | | } else { |
| | | Viewer.imageryLayers.get(1).show = false; |
| | | Viewer.imageryLayers.get(2).show = true; |
| | | } |
| | | }, |
| | | //显示弹窗 |
| | | showChangeBox(res) { |
| | |
| | | } else if (res.id == '2') { |
| | | this.showToponymicLocalBoxDialog = true; |
| | | this.getToponymicData(); |
| | | } |
| | | } else if (res.name == 'Analysis') { |
| | | if (res.id == '3') { |
| | | this.showPathAnalysisBoxDialog = true; |
| | | } |
| | | } |
| | | }, |
| | |
| | | this.imagePoint = null; |
| | | } |
| | | break; |
| | | case 4: |
| | | this.showPathAnalysisBoxDialog = false; |
| | | this.clearPathAll(3); |
| | | |
| | | break; |
| | | } |
| | | }, |
| | | //定位 |
| | |
| | | break; |
| | | } |
| | | }, |
| | | showMouseLeftClick(res) { |
| | | if (res == 3) { |
| | | if (this.linePath != null) { |
| | | this.clearPathAll(3); |
| | | } |
| | | |
| | | var jsonurl = |
| | | 'http://192.168.20.39:9055/gisserver/wnsserver/beijingdaohang_wns?start=' + |
| | | this.pathFrom.lon + |
| | | '&end=' + |
| | | this.pathFrom.lat + |
| | | '&propertyName=Shape&tolerance=500&request=FindPath&format=json'; |
| | | $.ajax({ |
| | | url: jsonurl, |
| | | async: false, |
| | | type: 'GET', |
| | | dataType: 'json', |
| | | contentType: 'application/json;charset=utf-8', |
| | | success: (data) => { |
| | | this.executeFly3D(data); |
| | | }, |
| | | }); |
| | | } else { |
| | | var that = this; |
| | | if (this.handler != null) { |
| | | this.clearLeftClick(); |
| | | } |
| | | this.handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas); |
| | | this.handler.setInputAction(function (event) { |
| | | let cartesian = Viewer.camera.pickEllipsoid(event.position); |
| | | let cartographic = Cesium.Cartographic.fromCartesian(cartesian); |
| | | let lng = parseFloat( |
| | | Cesium.Math.toDegrees(cartographic.longitude) |
| | | ).toFixed(6); // 经度 |
| | | let lat = parseFloat( |
| | | Cesium.Math.toDegrees(cartographic.latitude) |
| | | ).toFixed(6); // 纬度 |
| | | if (that.linePath != null) { |
| | | that.clearPathAll(3); |
| | | } |
| | | if (lng != null && lat != null) { |
| | | let val = lng + ',' + lat; |
| | | var position = sgworld.Creator.CreatePosition(lng, lat, 0); |
| | | if (res == 1) { |
| | | if (that.pathStart != null) { |
| | | that.clearPathAll(1); |
| | | } |
| | | |
| | | that.pathStart = sgworld.Creator.CreateLabel( |
| | | position, |
| | | '', |
| | | SmartEarthRootUrl + 'Workers/image/start.png', |
| | | { |
| | | // 文本偏移量 |
| | | pixelOffset: { |
| | | x: 0, |
| | | y: -50, |
| | | }, // 无视遮挡 |
| | | disableDepthTestDistance: Infinity, |
| | | scale: 0.8, |
| | | }, |
| | | 0, |
| | | '起始点' |
| | | ); |
| | | |
| | | that.pathFrom.lon = val; |
| | | } else if (res == 2) { |
| | | if (that.pathEnd != null) { |
| | | that.clearPathAll(2); |
| | | } |
| | | |
| | | that.pathEnd = sgworld.Creator.CreateLabel( |
| | | position, |
| | | '', |
| | | SmartEarthRootUrl + 'Workers/image/end.png', |
| | | { |
| | | // 文本偏移量 |
| | | pixelOffset: { |
| | | x: 0, |
| | | y: -50, |
| | | }, // 无视遮挡 |
| | | disableDepthTestDistance: Infinity, |
| | | scale: 0.8, |
| | | }, |
| | | 0, |
| | | '结束点' |
| | | ); |
| | | that.pathFrom.lat = val; |
| | | } |
| | | that.clearLeftClick(); |
| | | } |
| | | }, Cesium.ScreenSpaceEventType.LEFT_CLICK); |
| | | } |
| | | }, |
| | | clearPathAll(res) { |
| | | switch (res) { |
| | | case 1: |
| | | if (this.pathStart != null) { |
| | | sgworld.Creator.DeleteObject(this.pathStart); |
| | | this.pathStart = null; |
| | | } |
| | | break; |
| | | case 2: |
| | | if (this.pathEnd != null) { |
| | | sgworld.Creator.DeleteObject(this.pathEnd); |
| | | this.pathEnd = null; |
| | | } |
| | | break; |
| | | case 3: |
| | | if (this.pathStart != null) { |
| | | sgworld.Creator.DeleteObject(this.pathStart); |
| | | this.pathStart = null; |
| | | } |
| | | |
| | | if (this.pathEnd != null) { |
| | | sgworld.Creator.DeleteObject(this.pathEnd); |
| | | this.pathEnd = null; |
| | | } |
| | | if (this.linePath != null) { |
| | | sgworld.Creator.DeleteObject(this.linePath); |
| | | this.linePath = null; |
| | | } |
| | | break; |
| | | case 4: |
| | | if (this.linePath != null) { |
| | | sgworld.Creator.DeleteObject(this.linePath); |
| | | this.linePath = null; |
| | | } |
| | | break; |
| | | } |
| | | }, |
| | | clearLeftClick() { |
| | | this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); //移除事件 |
| | | this.handler = null; |
| | | }, |
| | | executeFly3D(res) { |
| | | var position = []; |
| | | if (res) { |
| | | var positionA = res.features; |
| | | if (positionA.length > 0) { |
| | | for (var i = 0; i < positionA.length; i++) { |
| | | var val = positionA[i]; |
| | | if (val.geometry.type == 'LineString') { |
| | | var val_data = val.geometry.coordinates; |
| | | for (var j = 0; j < val_data.length; j++) { |
| | | position.push({ x: val_data[j][0], y: val_data[j][1] }); |
| | | } |
| | | } |
| | | } |
| | | this.linePath = sgworld.Creator.createPolyline( |
| | | position, |
| | | '#ffff00', |
| | | 1, |
| | | 0, |
| | | '线' |
| | | ); |
| | | sgworld.Navigate.flyToObj(this.linePath); |
| | | } else { |
| | | return; |
| | | } |
| | | } |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | |
| | | .bufferBox { |
| | | width: 412px; |
| | | height: 230px; |
| | | z-index: 40; |
| | | position: absolute; |
| | | right: 1%; |
| | | bottom: 1%; |
| | | } |
| | | |
| | | .pathAnalysisBox { |
| | | width: 412px; |
| | | |
| | | z-index: 40; |
| | | position: absolute; |
| | | right: 1%; |
| | |
| | | ::v-deep .el-pagination__jump { |
| | | color: white; |
| | | } |
| | | .center { |
| | | left: 1%; |
| | | } |
| | | .CenDiv { |
| | | position: absolute; |
| | | bottom: 1%; |
| | | height: 40px; |
| | | width: 60px; |
| | | z-index: 101; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | box-shadow: 3px 3px 6px #666; |
| | | border: 1px solid rgba(204, 204, 204, 0.76); |
| | | border-radius: 5px; |
| | | cursor: pointer; |
| | | } |
| | | .center1 { |
| | | right: 1%; |
| | | } |
| | | .right { |
| | | position: absolute; |
| | | top: 50px; |
| | | right: 0; |
| | | width: 20%; |
| | | height: calc(100% - 50px); |
| | | |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | } |
| | | .CenDiv:hover { |
| | | border: 1px solid #409eff; |
| | | } |
| | | .active { |
| | | width: 100%; |
| | | height: 100%; |
| | | background: url('../assets/img/Layer/imgLayer2.png') no-repeat center; |
| | | position: absolute; |
| | | background-size: 100% 100%; |
| | | border-radius: 5px; |
| | | } |
| | | .menuLayer { |
| | | width: 100%; |
| | | height: 100%; |
| | | background: url('../assets/img/Layer/imgLayer1.png') no-repeat center; |
| | | position: absolute; |
| | | background-size: 100% 100%; |
| | | border-radius: 5px; |
| | | } |
| | | </style> |