| | |
| | | <template> |
| | | <div class="dimension-cut"> |
| | | <el-button type="primary">{{zoomValue}}</el-button> |
| | | <!-- <el-button type="primary">{{zoomValue}}</el-button> --> |
| | | <el-button |
| | | v-show="btnGroupShow" |
| | | size="mini" |
| | |
| | | import { mapGetters } from 'vuex' |
| | | import { getDetail } from '@/api/pc/public/arc' |
| | | |
| | | let baseLayer = [] |
| | | |
| | | const baseLayerImgUrl = [ |
| | | { |
| | | 5000: [ |
| | | { |
| | | url: 'img/base/1000/1.png', |
| | | rectangle: [116.346606, 27.965604, 116.3570815, 27.974063] |
| | | }, |
| | | { |
| | | url: 'img/base/1000/2.png', |
| | | rectangle: [116.3570815, 27.965604, 116.367557, 27.974063] |
| | | }, |
| | | { |
| | | url: 'img/base/1000/3.png', |
| | | rectangle: [116.346606, 27.957145, 116.3570815, 27.965604] |
| | | }, |
| | | { |
| | | url: 'img/base/1000/4.png', |
| | | rectangle: [116.3570815, 27.957145, 116.367557, 27.965604] |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | 4000: [ |
| | | { |
| | | url: 'img/base/2000/1.png', |
| | | rectangle: [116.346606, 27.96842366, 116.35358966, 27.974063] |
| | | }, |
| | | { |
| | | url: 'img/base/2000/2.png', |
| | | rectangle: [116.35358966, 27.96842366, 116.36057333, 27.974063] |
| | | }, |
| | | { |
| | | url: 'img/base/2000/3.png', |
| | | rectangle: [116.36057333, 27.96842366, 116.367557, 27.974063] |
| | | }, |
| | | { |
| | | url: 'img/base/2000/4.png', |
| | | rectangle: [116.346606, 27.96278433, 116.35358966, 27.96842366] |
| | | }, |
| | | { |
| | | url: 'img/base/2000/5.png', |
| | | rectangle: [116.35358966, 27.96278433, 116.36057333, 27.96842366] |
| | | }, |
| | | { |
| | | url: 'img/base/2000/6.png', |
| | | rectangle: [116.36057333, 27.96278433, 116.367557, 27.96842366] |
| | | }, |
| | | { |
| | | url: 'img/base/2000/7.png', |
| | | rectangle: [116.346606, 27.957145, 116.35358966, 27.96278433] |
| | | }, |
| | | { |
| | | url: 'img/base/2000/8.png', |
| | | rectangle: [116.35358966, 27.957145, 116.36057333, 27.96278433] |
| | | }, |
| | | { |
| | | url: 'img/base/2000/9.png', |
| | | rectangle: [116.36057333, 27.957145, 116.367557, 27.96278433] |
| | | } |
| | | ] |
| | | } |
| | | ] |
| | | |
| | | let tilesetLayer = null |
| | | |
| | | let tileset = null |
| | |
| | | let layerSATtwo = null |
| | | let tcLayer = null |
| | | |
| | | let viewerHeight = 950 |
| | | let smallViewerHeight = 1950 |
| | | // let viewerHeight = 950 |
| | | // let smallViewerHeight = 1950 |
| | | |
| | | const mixVH = 500 |
| | | const maxVH = 950 |
| | | const oneVH = 500 |
| | | const twoVH = 650 |
| | | const fourVH = 800 |
| | | const fiveVH = 950 |
| | | // const mixVH = 500 |
| | | // const maxVH = 950 |
| | | // const oneVH = 500 |
| | | // const twoVH = 650 |
| | | // const fourVH = 800 |
| | | // const fiveVH = 950 |
| | | |
| | | let viewerHeight = 5000 |
| | | let smallViewerHeight = 6000 |
| | | |
| | | const mixVH = 2000 |
| | | const maxVH = 5000 |
| | | |
| | | const oneVH = 2000 |
| | | const twoVH = 3000 |
| | | const fourVH = 4000 |
| | | const fiveVH = 5000 |
| | | |
| | | // const wallLayer = null |
| | | |
| | |
| | | name: 'dimension', |
| | | data () { |
| | | return { |
| | | zoomValue: null, |
| | | zoomValue: 0, |
| | | btnGroupShow: false, |
| | | dimensionValue: '三 维', |
| | | // 建筑2.5D地图 |
| | |
| | | [114.03954722, 27.62819644, 100], |
| | | [114.04006133, 27.628038, 100] |
| | | ], |
| | | mapCenter: [116.35561302, |
| | | 27.96547549, 1860] |
| | | mapCenter: [116.3570815, |
| | | 27.965604, 5000] |
| | | // mapCenter: [115.871863, 28.743861, 950.0] |
| | | } |
| | | }, |
| | |
| | | |
| | | videoLayer.addOverlay(cameraVideo) |
| | | |
| | | baseMapLayer = |
| | | global.viewer.imageryLayers.addImageryProvider(new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ |
| | | url: '/wp/{z}/{x}/{y}.png', |
| | | fileExtension: 'png' |
| | | // minimumLevel: 19 |
| | | })) |
| | | global.viewer.imageryLayers.addImageryProvider(new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ |
| | | url: '/fz/{z}/{x}/{y}.png', |
| | | fileExtension: 'png' |
| | | // minimumLevel: 19 |
| | | })) |
| | | // baseMapLayer = |
| | | // global.viewer.imageryLayers.addImageryProvider(new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ |
| | | // url: '/wp/{z}/{x}/{y}.png', |
| | | // fileExtension: 'png' |
| | | // // minimumLevel: 19 |
| | | // })) |
| | | |
| | | that.addBaseLayer() |
| | | |
| | | // global.viewer.imageryLayers.addImageryProvider(new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ |
| | | // url: '/fz/{z}/{x}/{y}.png', |
| | | // fileExtension: 'png' |
| | | // // minimumLevel: 19 |
| | | // })) |
| | | |
| | | // global.viewer.imageryLayers.addImageryProvider( |
| | | // new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({ |
| | |
| | | }) |
| | | |
| | | // 最小 |
| | | // global.viewer.scene.screenSpaceCameraController.minimumZoomDistance = mixVH |
| | | // global.eagleViewer.scene.screenSpaceCameraController.minimumZoomDistance = mixVH + 1000 |
| | | // // 最大 |
| | | // global.viewer.scene.screenSpaceCameraController.maximumZoomDistance = maxVH |
| | | // global.eagleViewer.scene.screenSpaceCameraController.maximumZoomDistance = maxVH + 1000 |
| | | global.viewer.scene.screenSpaceCameraController.minimumZoomDistance = mixVH |
| | | global.eagleViewer.scene.screenSpaceCameraController.minimumZoomDistance = mixVH + 1000 |
| | | // 最大 |
| | | global.viewer.scene.screenSpaceCameraController.maximumZoomDistance = maxVH |
| | | global.eagleViewer.scene.screenSpaceCameraController.maximumZoomDistance = maxVH + 1000 |
| | | |
| | | // 设置相机缩小时的速率 |
| | | global.viewer.scene.screenSpaceCameraController._minimumZoomRate = 2000 |
| | |
| | | } |
| | | }) |
| | | |
| | | // this.$nextTick(() => { |
| | | // document.querySelector('.dc-zoom-controller').children[1].onclick = |
| | | // function () { |
| | | // if (that.dimensionValue == '真三维') { |
| | | // global.viewer.camera.setView({ |
| | | // // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州 |
| | | // // fromDegrees()方法,将经纬度和高程转换为世界坐标 |
| | | // destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees( |
| | | // that.mapCenter[0], |
| | | // that.mapCenter[1], |
| | | // 220.0 |
| | | // ), |
| | | // orientation: { |
| | | // // 指向 |
| | | // heading: global.DC.Namespace.Cesium.Math.toRadians(-9), |
| | | // // 视角 |
| | | // pitch: global.DC.Namespace.Cesium.Math.toRadians(-34.54), |
| | | // roll: 0.0 |
| | | // } |
| | | // }) |
| | | // } else { |
| | | // global.viewer.camera.setView({ |
| | | // // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州 |
| | | // // fromDegrees()方法,将经纬度和高程转换为世界坐标 |
| | | // destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees( |
| | | // that.mapCenter[0], |
| | | // that.mapCenter[1], |
| | | // that.mapCenter[2] |
| | | // ), |
| | | // orientation: { |
| | | // // 指向 |
| | | // heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), |
| | | // // 视角 |
| | | // pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), |
| | | // roll: 0.0 |
| | | // } |
| | | // }) |
| | | // } |
| | | // } |
| | | this.$nextTick(() => { |
| | | document.querySelector('.dc-zoom-controller').children[1].onclick = |
| | | function () { |
| | | if (that.dimensionValue == '真三维') { |
| | | global.viewer.camera.setView({ |
| | | // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州 |
| | | // fromDegrees()方法,将经纬度和高程转换为世界坐标 |
| | | destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees( |
| | | that.mapCenter[0], |
| | | that.mapCenter[1], |
| | | 220.0 |
| | | ), |
| | | orientation: { |
| | | // 指向 |
| | | heading: global.DC.Namespace.Cesium.Math.toRadians(-9), |
| | | // 视角 |
| | | pitch: global.DC.Namespace.Cesium.Math.toRadians(-34.54), |
| | | roll: 0.0 |
| | | } |
| | | }) |
| | | } else { |
| | | global.viewer.camera.setView({ |
| | | // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州 |
| | | // fromDegrees()方法,将经纬度和高程转换为世界坐标 |
| | | destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees( |
| | | that.mapCenter[0], |
| | | that.mapCenter[1], |
| | | that.mapCenter[2] |
| | | ), |
| | | orientation: { |
| | | // 指向 |
| | | heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), |
| | | // 视角 |
| | | pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), |
| | | roll: 0.0 |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | |
| | | // document.querySelector('.dc-zoom-controller').children[2].onclick = |
| | | // function () { |
| | | // if ( |
| | | // that.dimensionValue != undefined && |
| | | // that.dimensionValue != '真三维' |
| | | // ) { |
| | | // if (viewerHeight == oneVH) { |
| | | // global.viewer.camera.setView({ |
| | | // destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | // global.viewer.camera.positionCartographic.longitude, |
| | | // global.viewer.camera.positionCartographic.latitude, |
| | | // twoVH |
| | | // ), |
| | | // orientation: { |
| | | // // 指向 |
| | | // heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), |
| | | // // 视角 |
| | | // pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), |
| | | // roll: 0.0 |
| | | // } |
| | | // }) |
| | | // viewerHeight = twoVH |
| | | // this.$emit('change-wheel', false, 'startWheel') |
| | | // return |
| | | // } |
| | | document.querySelector('.dc-zoom-controller').children[2].onclick = |
| | | function () { |
| | | if ( |
| | | that.dimensionValue != undefined && |
| | | that.dimensionValue != '真三维' |
| | | ) { |
| | | if (viewerHeight == oneVH) { |
| | | global.viewer.camera.setView({ |
| | | destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | global.viewer.camera.positionCartographic.longitude, |
| | | global.viewer.camera.positionCartographic.latitude, |
| | | twoVH |
| | | ), |
| | | orientation: { |
| | | // 指向 |
| | | heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), |
| | | // 视角 |
| | | pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), |
| | | roll: 0.0 |
| | | } |
| | | }) |
| | | viewerHeight = twoVH |
| | | this.$emit('change-wheel', false, 'startWheel') |
| | | return |
| | | } |
| | | |
| | | // if (viewerHeight == twoVH) { |
| | | // global.viewer.camera.setView({ |
| | | // destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | // global.viewer.camera.positionCartographic.longitude, |
| | | // global.viewer.camera.positionCartographic.latitude, |
| | | // fourVH |
| | | // ), |
| | | // orientation: { |
| | | // // 指向 |
| | | // heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), |
| | | // // 视角 |
| | | // pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), |
| | | // roll: 0.0 |
| | | // } |
| | | // }) |
| | | // viewerHeight = fourVH |
| | | // this.$emit('change-wheel', false, 'startWheel') |
| | | // return |
| | | // } |
| | | if (viewerHeight == twoVH) { |
| | | global.viewer.camera.setView({ |
| | | destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | global.viewer.camera.positionCartographic.longitude, |
| | | global.viewer.camera.positionCartographic.latitude, |
| | | fourVH |
| | | ), |
| | | orientation: { |
| | | // 指向 |
| | | heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), |
| | | // 视角 |
| | | pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), |
| | | roll: 0.0 |
| | | } |
| | | }) |
| | | viewerHeight = fourVH |
| | | this.$emit('change-wheel', false, 'startWheel') |
| | | return |
| | | } |
| | | |
| | | // if (viewerHeight == fourVH) { |
| | | // global.viewer.camera.setView({ |
| | | // destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | // global.viewer.camera.positionCartographic.longitude, |
| | | // global.viewer.camera.positionCartographic.latitude, |
| | | // fiveVH |
| | | // ), |
| | | // orientation: { |
| | | // // 指向 |
| | | // heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), |
| | | // // 视角 |
| | | // pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), |
| | | // roll: 0.0 |
| | | // } |
| | | // }) |
| | | // viewerHeight = fiveVH |
| | | // this.$emit('change-wheel', false, 'startWheel') |
| | | // } |
| | | // } |
| | | // } |
| | | if (viewerHeight == fourVH) { |
| | | global.viewer.camera.setView({ |
| | | destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | global.viewer.camera.positionCartographic.longitude, |
| | | global.viewer.camera.positionCartographic.latitude, |
| | | fiveVH |
| | | ), |
| | | orientation: { |
| | | // 指向 |
| | | heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), |
| | | // 视角 |
| | | pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), |
| | | roll: 0.0 |
| | | } |
| | | }) |
| | | viewerHeight = fiveVH |
| | | this.$emit('change-wheel', false, 'startWheel') |
| | | } |
| | | } |
| | | } |
| | | |
| | | // document.querySelector('.dc-zoom-controller').children[0].onclick = |
| | | // function () { |
| | | // if ( |
| | | // that.dimensionValue != undefined && |
| | | // that.dimensionValue != '真三维' |
| | | // ) { |
| | | // if (viewerHeight == fiveVH) { |
| | | // global.viewer.camera.setView({ |
| | | // destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | // global.viewer.camera.positionCartographic.longitude, |
| | | // global.viewer.camera.positionCartographic.latitude, |
| | | // fourVH |
| | | // ), |
| | | // orientation: { |
| | | // // 指向 |
| | | // heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), |
| | | // // 视角 |
| | | // pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), |
| | | // roll: 0.0 |
| | | // } |
| | | // }) |
| | | // viewerHeight = fourVH |
| | | // this.$emit('change-wheel', false, 'startWheel') |
| | | // return |
| | | // } |
| | | document.querySelector('.dc-zoom-controller').children[0].onclick = |
| | | function () { |
| | | if ( |
| | | that.dimensionValue != undefined && |
| | | that.dimensionValue != '真三维' |
| | | ) { |
| | | if (viewerHeight == fiveVH) { |
| | | global.viewer.camera.setView({ |
| | | destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | global.viewer.camera.positionCartographic.longitude, |
| | | global.viewer.camera.positionCartographic.latitude, |
| | | fourVH |
| | | ), |
| | | orientation: { |
| | | // 指向 |
| | | heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), |
| | | // 视角 |
| | | pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), |
| | | roll: 0.0 |
| | | } |
| | | }) |
| | | viewerHeight = fourVH |
| | | this.$emit('change-wheel', false, 'startWheel') |
| | | return |
| | | } |
| | | |
| | | // if (viewerHeight == fourVH) { |
| | | // global.viewer.camera.setView({ |
| | | // destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | // global.viewer.camera.positionCartographic.longitude, |
| | | // global.viewer.camera.positionCartographic.latitude, |
| | | // twoVH |
| | | // ), |
| | | // orientation: { |
| | | // // 指向 |
| | | // heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), |
| | | // // 视角 |
| | | // pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), |
| | | // roll: 0.0 |
| | | // } |
| | | // }) |
| | | // viewerHeight = twoVH |
| | | // this.$emit('change-wheel', false, 'startWheel') |
| | | // return |
| | | // } |
| | | if (viewerHeight == fourVH) { |
| | | global.viewer.camera.setView({ |
| | | destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | global.viewer.camera.positionCartographic.longitude, |
| | | global.viewer.camera.positionCartographic.latitude, |
| | | twoVH |
| | | ), |
| | | orientation: { |
| | | // 指向 |
| | | heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), |
| | | // 视角 |
| | | pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), |
| | | roll: 0.0 |
| | | } |
| | | }) |
| | | viewerHeight = twoVH |
| | | this.$emit('change-wheel', false, 'startWheel') |
| | | return |
| | | } |
| | | |
| | | // if (viewerHeight == twoVH) { |
| | | // global.viewer.camera.setView({ |
| | | // destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | // global.viewer.camera.positionCartographic.longitude, |
| | | // global.viewer.camera.positionCartographic.latitude, |
| | | // oneVH |
| | | // ), |
| | | // orientation: { |
| | | // // 指向 |
| | | // heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), |
| | | // // 视角 |
| | | // pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), |
| | | // roll: 0.0 |
| | | // } |
| | | // }) |
| | | // viewerHeight = oneVH |
| | | // this.$emit('change-wheel', false, 'startWheel') |
| | | // } |
| | | // } |
| | | // } |
| | | // }) |
| | | if (viewerHeight == twoVH) { |
| | | global.viewer.camera.setView({ |
| | | destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | global.viewer.camera.positionCartographic.longitude, |
| | | global.viewer.camera.positionCartographic.latitude, |
| | | oneVH |
| | | ), |
| | | orientation: { |
| | | // 指向 |
| | | heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), |
| | | // 视角 |
| | | pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), |
| | | roll: 0.0 |
| | | } |
| | | }) |
| | | viewerHeight = oneVH |
| | | this.$emit('change-wheel', false, 'startWheel') |
| | | } |
| | | } |
| | | } |
| | | }) |
| | | |
| | | // global.viewer.on(global.DC.SceneEventType.CAMERA_CHANGED, that.mapCameraEvent) |
| | | // global.eagleViewer.on(global.DC.SceneEventType.CAMERA_CHANGED, that.smallMapCameraEvent) |
| | | global.viewer.on(global.DC.SceneEventType.CAMERA_CHANGED, that.mapCameraEvent) |
| | | global.eagleViewer.on(global.DC.SceneEventType.CAMERA_CHANGED, that.smallMapCameraEvent) |
| | | } |
| | | } |
| | | } |
| | |
| | | } |
| | | }, |
| | | |
| | | addBaseLayer () { |
| | | if (baseLayer.length > 0) { |
| | | baseLayer.forEach(item => { |
| | | global.viewer.imageryLayers.remove( |
| | | item |
| | | ) |
| | | }) |
| | | } |
| | | |
| | | baseLayer = [] |
| | | |
| | | baseLayerImgUrl.forEach(item => { |
| | | if (item[viewerHeight]) { |
| | | item[viewerHeight].forEach(sm => { |
| | | var layer = global.viewer.imageryLayers.addImageryProvider(new global.DC.Namespace.Cesium.SingleTileImageryProvider({ |
| | | url: sm.url, |
| | | rectangle: global.DC.Namespace.Cesium.Rectangle.fromDegrees(sm.rectangle[0], sm.rectangle[1], sm.rectangle[2], sm.rectangle[3]) |
| | | })) |
| | | |
| | | baseLayer.push(layer) |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | mapCameraEvent () { |
| | | global.viewer.camera.setView({ |
| | | orientation: { |
| | |
| | | }) |
| | | viewerHeight = fourVH |
| | | this.$emit('change-wheel', false, 'startWheel') |
| | | this.addBaseLayer() |
| | | return |
| | | } |
| | | |
| | |
| | | }) |
| | | viewerHeight = twoVH |
| | | this.$emit('change-wheel', false, 'startWheel') |
| | | this.addBaseLayer() |
| | | return |
| | | } |
| | | |
| | |
| | | }) |
| | | viewerHeight = oneVH |
| | | this.$emit('change-wheel', false, 'startWheel') |
| | | this.addBaseLayer() |
| | | } |
| | | } else { // 上 |
| | | if (viewerHeight == oneVH) { |
| | |
| | | }) |
| | | viewerHeight = twoVH |
| | | this.$emit('change-wheel', false, 'startWheel') |
| | | this.addBaseLayer() |
| | | return |
| | | } |
| | | |
| | |
| | | }) |
| | | viewerHeight = fourVH |
| | | this.$emit('change-wheel', false, 'startWheel') |
| | | this.addBaseLayer() |
| | | return |
| | | } |
| | | |
| | |
| | | }) |
| | | viewerHeight = fiveVH |
| | | this.$emit('change-wheel', false, 'startWheel') |
| | | this.addBaseLayer() |
| | | } |
| | | } |
| | | }, |