| | |
| | | <el-radio-group v-model="dimensionValue" |
| | | size="medium" |
| | | @change="dimensionChange"> |
| | | <el-radio-button label="3 维"></el-radio-button> |
| | | <el-radio-button label="2.5维"></el-radio-button> |
| | | <el-radio-button label="3 维"></el-radio-button> |
| | | </el-radio-group> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | |
| | | import axios from 'axios' |
| | | import { mapGetters } from 'vuex' |
| | | |
| | | export default { |
| | |
| | | data () { |
| | | return { |
| | | DC: null, |
| | | dimensionValue: '3 维', |
| | | dimensionValue: '2.5维', |
| | | // 建筑2.5D地图 |
| | | newLayer: null, |
| | | // 电子地图 |
| | | vecLayer: null, |
| | | // 标注 |
| | | cvaLayer: null, |
| | | // 建筑2.5D面数据 |
| | | areaLayer: null, |
| | | provider: null, |
| | | wallLayer: null, |
| | | tileset: null, |
| | |
| | | computed: { |
| | | ...mapGetters([ |
| | | 'viewer', |
| | | // 校内导航的显示关闭 |
| | | // 社区内导航的显示关闭 |
| | | 'campusNavFlag', |
| | | 'orgNavBarFlag', |
| | | 'arcNavBarFlag' |
| | |
| | | handler (newCode, oldCode) { |
| | | if (this.titlesetLayerFlag == false && newCode != null) { |
| | | var that = this |
| | | |
| | | that.tilesetLayer = new that.DC.TilesetLayer('tilesetLayer') |
| | | that.viewer.addLayer(that.tilesetLayer) |
| | | that.tileset = new that.DC.Tileset( |
| | |
| | | } |
| | | ) |
| | | that.tilesetLayer.addOverlay(that.tileset) |
| | | that.tilesetLayer.show = false |
| | | |
| | | that.silhouetteBlue = that.DC.Namespace.Cesium.PostProcessStageLibrary.createEdgeDetectionStage() |
| | | that.silhouetteBlue.uniforms.color = that.DC.Namespace.Cesium.Color.fromBytes(9, 162, 40) |
| | |
| | | |
| | | that.$store.commit('CLEAR_ALL', null) |
| | | |
| | | var imgArr = ['http://223.82.109.183:2081/zhxy/upload/20211222/f66dc4527eb4cc1b2d33fa3a5b345ed0.jpg'] |
| | | var imgArr = ['http://223.82.109.183:2081/zhxy/upload/20220105/3c05dd70a9eac17b7e49afbfc7b1b68e.png'] |
| | | |
| | | that.$store.commit('SET_POPUPBGURL', imgArr[0]) |
| | | that.$store.commit('SET_POPUPQRURL', 'http://223.82.109.183:2081/zhxy/upload/20211222/9c324adea5d9e5b50cd8f874d5f780f4.png') |
| | |
| | | this.$store.commit('SET_DETAILSPOPUP', true) |
| | | }) |
| | | |
| | | that.tileset.on(that.DC.MouseEventType.MOUSE_MOVE, e => { |
| | | that.silhouetteBlue.selected = [] |
| | | // that.tileset.on(that.DC.MouseEventType.MOUSE_MOVE, e => { |
| | | // that.silhouetteBlue.selected = [] |
| | | |
| | | if (that.DC.Namespace.Cesium.defined(highlighted.feature)) { |
| | | highlighted.feature.color = highlighted.originalColor |
| | | highlighted.feature = undefined |
| | | } |
| | | // if (that.DC.Namespace.Cesium.defined(highlighted.feature)) { |
| | | // highlighted.feature.color = highlighted.originalColor |
| | | // highlighted.feature = undefined |
| | | // } |
| | | |
| | | if (e.feature !== selected.feature) { |
| | | that.silhouetteBlue.selected = [e.feature] |
| | | // if (e.feature !== selected.feature) { |
| | | // that.silhouetteBlue.selected = [e.feature] |
| | | |
| | | highlighted.feature = e.feature |
| | | // highlighted.feature = e.feature |
| | | |
| | | that.DC.Namespace.Cesium.Color.clone( |
| | | e.feature.color, |
| | | highlighted.originalColor |
| | | ) |
| | | e.feature.color = that.DC.Namespace.Cesium.Color.fromBytes(155, 255, 175) |
| | | } |
| | | }) |
| | | // that.DC.Namespace.Cesium.Color.clone( |
| | | // e.feature.color, |
| | | // highlighted.originalColor |
| | | // ) |
| | | // e.feature.color = that.DC.Namespace.Cesium.Color.fromBytes(155, 255, 175) |
| | | // } |
| | | // }) |
| | | |
| | | // var provider = new that.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({ |
| | | // url: 'http://www.tdtfz.com/OneMapServer/rest/services/fzsw2019/MapServer/WMTS/tile/1.0.0/fzsw2019/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}', |
| | |
| | | // ] |
| | | // }) |
| | | |
| | | // var provider = new that.DC.Namespace.Cesium.ArcGisMapServerImageryProvider({ |
| | | // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/PingXiang25DMapDN/MapServer' |
| | | // }) |
| | | var provider = new that.DC.Namespace.Cesium.UrlTemplateImageryProvider({ |
| | | url: '/wp/{z}/{x}/{y}.png', |
| | | fileExtension: 'png' |
| | | }) |
| | | |
| | | // that.newLayer = that.viewer.imageryLayers.addImageryProvider(provider) |
| | | that.newLayer = that.viewer.imageryLayers.addImageryProvider(provider) |
| | | |
| | | that.wallLayer = new that.DC.VectorLayer('wallLayer') |
| | | // that.viewer.addLayer(that.wallLayer) |
| | |
| | | // } |
| | | // }) |
| | | |
| | | that.tilesetLayer.show = true |
| | | setTimeout(() => { |
| | | that.viewer.flyTo(that.tileset) |
| | | }, 2000) |
| | | // setTimeout(() => { |
| | | // that.viewer.camera.flyTo({ |
| | | // // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州 |
| | | // // fromDegrees()方法,将经纬度和高程转换为世界坐标 |
| | | // destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(114.0351, 27.6314, 200.0), |
| | | // duration: 5, |
| | | // complete: () => { |
| | | // that.viewer.camera.flyTo({ |
| | | // // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州 |
| | | // // fromDegrees()方法,将经纬度和高程转换为世界坐标 |
| | | // destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(114.0351, 27.6314, 200.0), |
| | | // orientation: { |
| | | // // 指向 |
| | | // heading: that.DC.Namespace.Cesium.Math.toRadians(108), |
| | | // // 视角 |
| | | // pitch: that.DC.Namespace.Cesium.Math.toRadians(-26.46), |
| | | // roll: 0.0 |
| | | // } |
| | | // }) |
| | | // } |
| | | // }) |
| | | // }, 3000) |
| | | that.titlesetLayerFlag = true |
| | | |
| | | that.viewer.camera.setView({ |
| | | // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州 |
| | | // fromDegrees()方法,将经纬度和高程转换为世界坐标 |
| | | destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(114.039779, 27.629696, 600.0), |
| | | orientation: { |
| | | // 指向 |
| | | heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0), |
| | | // 视角 |
| | | pitch: that.DC.Namespace.Cesium.Math.toRadians(-90), |
| | | roll: 0.0 |
| | | } |
| | | }) |
| | | |
| | | that.viewer.on(that.DC.SceneEventType.CAMERA_CHANGED, that.camerAzoom()) |
| | | // 最小 |
| | | that.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1.0 |
| | | // 最大 |
| | | that.viewer.scene.screenSpaceCameraController.maximumZoomDistance = Number.POSITIVE_INFINITY |
| | | that.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 3000 |
| | | |
| | | // 设置相机缩小时的速率 |
| | | // that.viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000 |
| | | // 设置相机放大时的速率 |
| | |
| | | // 视角缩放 |
| | | that.viewer.scene.screenSpaceCameraController.enableZoom = true |
| | | // 视角旋转 |
| | | that.viewer.scene.screenSpaceCameraController.enableTilt = true |
| | | that.viewer.scene.screenSpaceCameraController.enableTilt = false |
| | | |
| | | that.areaLayer = new that.DC.VectorLayer('areaLayer') |
| | | that.viewer.addLayer(that.areaLayer) |
| | | |
| | | // axios.get('http://arcgis.jxpskj.com:6080/arcgis/rest/services/lxxqwxq/MapServer/0/query?where=1%3D1&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&returnTrueCurves=false&resultOffset=&resultRecordCount=&f=pjson').then(resultData => { |
| | | // resultData.data.features.forEach(item => { |
| | | // item.geometry.rings[0].forEach(it => { |
| | | // it = it.join(',') |
| | | // }) |
| | | |
| | | // item.geometry.rings[0] = item.geometry.rings[0].join(';') |
| | | |
| | | // const polygon = new that.DC.Polygon(item.geometry.rings[0]) |
| | | |
| | | // polygon.setStyle({ |
| | | |
| | | // material: that.DC.Namespace.Cesium.Color.fromBytes(255, 255, 255, 255) |
| | | |
| | | // }) |
| | | |
| | | // that.areaLayer.addOverlay(polygon) |
| | | // }) |
| | | |
| | | // that.areaLayer.show = false |
| | | // }) |
| | | |
| | | document.querySelector('.dc-zoom-controller').children[1].onclick = function () { |
| | | if (that.dimensionValue == '3 维') { |
| | | that.viewer.camera.setView({ |
| | | // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州 |
| | | // fromDegrees()方法,将经纬度和高程转换为世界坐标 |
| | | destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(114.04062292, 27.62666834, 220.0), |
| | | orientation: { |
| | | // 指向 |
| | | heading: that.DC.Namespace.Cesium.Math.toRadians(-9), |
| | | // 视角 |
| | | pitch: that.DC.Namespace.Cesium.Math.toRadians(-34.54), |
| | | roll: 0.0 |
| | | } |
| | | }) |
| | | } else { |
| | | that.viewer.camera.setView({ |
| | | // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州 |
| | | // fromDegrees()方法,将经纬度和高程转换为世界坐标 |
| | | destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(114.039779, 27.629696, 600.0), |
| | | orientation: { |
| | | // 指向 |
| | | heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0), |
| | | // 视角 |
| | | pitch: that.DC.Namespace.Cesium.Math.toRadians(-90), |
| | | roll: 0.0 |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | dimensionChange () { |
| | | var that = this |
| | | if (that.dimensionValue == '3 维') { |
| | | that.wallLayer.show = false |
| | | // that.wallLayer.show = false |
| | | that.viewer.imageryLayers.remove(that.newLayer) |
| | | that.newLayer = null |
| | | that.vecLayer = that.viewer.imageryLayers.addImageryProvider(new that.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({ |
| | | url: ' http://t1.tianditu.gov.cn/vec_w/wmts?tk=9ae78c51a0a28f06444d541148496e36', |
| | | type: 'wmts', |
| | | layer: 'vec', |
| | | style: 'default', |
| | | format: 'tiles', |
| | | tileMatrixSetID: 'w', |
| | | show: true, |
| | | maximumLevel: 18 |
| | | })) |
| | | |
| | | that.cvaLayer = that.viewer.imageryLayers.addImageryProvider(new that.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({ |
| | | url: ' http://t1.tianditu.gov.cn/cva_w/wmts?tk=9ae78c51a0a28f06444d541148496e36', |
| | | type: 'wmts', |
| | | layer: 'cva', |
| | | style: 'default', |
| | | format: 'tiles', |
| | | tileMatrixSetID: 'w', |
| | | show: true, |
| | | maximumLevel: 18 |
| | | })) |
| | | that.silhouetteBlue.selected = [] |
| | | that.tilesetLayer.show = true |
| | | that.viewer.flyTo(that.tileset) |
| | | |
| | | that.viewer.off(that.DC.SceneEventType.CAMERA_CHANGED, that.camerAzoom()) |
| | | |
| | | // 最小 |
| | | that.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1.0 |
| | | // 最大 |
| | | that.viewer.scene.screenSpaceCameraController.maximumZoomDistance = Number.POSITIVE_INFINITY |
| | | // 视角旋转 |
| | | that.viewer.scene.screenSpaceCameraController.enableTilt = true |
| | | } else { |
| | | that.tilesetLayer.show = false |
| | | var provider = new that.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({ |
| | | url: 'http://www.tdtfz.com/OneMapServer/rest/services/fzsw2019/MapServer/WMTS/tile/1.0.0/fzsw2019/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}', |
| | | layer: 'fzsw2019', |
| | | style: 'default', |
| | | tileMatrixSetID: 'default028mm', |
| | | format: 'image/jpgpng', |
| | | tilingScheme: new that.DC.Namespace.Cesium.GeographicTilingScheme(), |
| | | maximumLevel: 19, |
| | | tileMatrixLabels: [ |
| | | '0', |
| | | '1', |
| | | '2', |
| | | '3', |
| | | '4', |
| | | '5', |
| | | '6', |
| | | '7', |
| | | '8', |
| | | '9', |
| | | '10', |
| | | '11', |
| | | '12', |
| | | '13', |
| | | '14', |
| | | '15', |
| | | '16', |
| | | '17', |
| | | '18', |
| | | '19' |
| | | ] |
| | | }) |
| | | that.newLayer = that.viewer.imageryLayers.addImageryProvider(provider) |
| | | |
| | | that.wallLayer.show = true |
| | | |
| | | that.viewer.camera.setView({ |
| | | // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州 |
| | | // fromDegrees()方法,将经纬度和高程转换为世界坐标 |
| | | destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(114.03928791, 27.62954732, 1000.0), |
| | | destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(114.04062292, 27.62666834, 220.0), |
| | | orientation: { |
| | | // 指向 |
| | | heading: that.DC.Namespace.Cesium.Math.toRadians(-9), |
| | | // 视角 |
| | | pitch: that.DC.Namespace.Cesium.Math.toRadians(-34.54), |
| | | roll: 0.0 |
| | | } |
| | | }) |
| | | } else { |
| | | that.tilesetLayer.show = false |
| | | that.viewer.imageryLayers.remove(that.vecLayer) |
| | | that.vecLayer = null |
| | | that.viewer.imageryLayers.remove(that.cvaLayer) |
| | | that.cvaLayer = null |
| | | |
| | | // var provider = new that.DC.Namespace.Cesium.ArcGisMapServerImageryProvider({ |
| | | // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/PingXiang25DMapQP/MapServer' |
| | | // }) |
| | | |
| | | var provider = new that.DC.Namespace.Cesium.UrlTemplateImageryProvider({ |
| | | url: '/wp/{z}/{x}/{y}.png', |
| | | fileExtension: 'png' |
| | | }) |
| | | |
| | | that.newLayer = that.viewer.imageryLayers.addImageryProvider(provider) |
| | | |
| | | // that.wallLayer.show = true |
| | | |
| | | that.viewer.camera.setView({ |
| | | // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州 |
| | | // fromDegrees()方法,将经纬度和高程转换为世界坐标 |
| | | destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(114.039779, 27.629696, 600.0), |
| | | orientation: { |
| | | // 指向 |
| | | heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0), |
| | |
| | | |
| | | that.viewer.on(that.DC.SceneEventType.CAMERA_CHANGED, that.camerAzoom()) |
| | | // 最小 |
| | | that.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 500 |
| | | that.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1.0 |
| | | // 最大 |
| | | that.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 6000 |
| | | that.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 3000 |
| | | // 视角旋转 |
| | | that.viewer.scene.screenSpaceCameraController.enableTilt = false |
| | | } |
| | |
| | | } |
| | | }) |
| | | }; |
| | | if (height > 6000) { |
| | | if (height > 3000) { |
| | | that.viewer.camera.setView({ |
| | | destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(that.viewer.camera.positionCartographic.longitude, that.viewer.camera.positionCartographic.latitude, 6000), |
| | | destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(that.viewer.camera.positionCartographic.longitude, that.viewer.camera.positionCartographic.latitude, 3000), |
| | | orientation: { |
| | | // 指向 |
| | | heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0), |