| | |
|---|
| | | /* eslint-disable camelcase */ |
|---|
| | | <template> |
|---|
| | | <div id="mobile-viewer-container"> |
|---|
| | | <div id="mobile-viewer-container" ref="mobileViewerContainer"> |
|---|
| | | <!-- 随地图改变图标弹窗↓ --> |
|---|
| | | <div id="mobile-map_popup_content"></div> |
|---|
| | | <mobileWindow></mobileWindow> |
|---|
| | | <!-- 地图固定弹窗 --> |
|---|
| | | <mobileWindowFixed></mobileWindowFixed> |
|---|
| | | <!-- <mobileWindowFixed></mobileWindowFixed> --> |
|---|
| | | <!-- 地图图标弹窗↑ --> |
|---|
| | | <!-- 控制↓ --> |
|---|
| | | <mobileLeftNav ref="mobileLeftNav"></mobileLeftNav> |
|---|
| | | <mobileCortrol ref="mobileCortrol"></mobileCortrol> |
|---|
| | | <mobileCortrolButtom ref="mobileCortrolButtom"></mobileCortrolButtom> |
|---|
| | | <mobileCortrolButtom |
|---|
| | | ref="mobileCortrolButtom" |
|---|
| | | :mapCenter="mapCenter" |
|---|
| | | :frislayertHeight="frislayertHeight" |
|---|
| | | ></mobileCortrolButtom> |
|---|
| | | <mobileCortrolSearch ref="mobileCortrolSearch"></mobileCortrolSearch> |
|---|
| | | <!-- 控制↑ --> |
|---|
| | | <!-- 控制大弹窗的弹窗 --> |
|---|
| | |
|---|
| | | <!-- 大弹窗 --> |
|---|
| | | <mobilePopupOur :style="[bigPopup]" v-if="mBigPopup"></mobilePopupOur> |
|---|
| | | <!-- 测试-跳转位置 --> |
|---|
| | | <mobileGoTo></mobileGoTo> |
|---|
| | | <!-- <mobileGoTo></mobileGoTo> --> |
|---|
| | | <!-- 实景窗口 --> |
|---|
| | | <mobilePanorama></mobilePanorama> |
|---|
| | | <!-- 退出导航 --> |
|---|
| | |
|---|
| | | import axios from 'axios' |
|---|
| | | import { getBuildClock } from '@/api/mobile/buildsClock/buildsClock' // 楼栋详情 |
|---|
| | | import { mapGetters } from 'vuex' |
|---|
| | | import baseLayerImgUrl from '@/assets/mobileBaseUrl' |
|---|
| | | |
|---|
| | | let baseLayer = [] |
|---|
| | | |
|---|
| | | var baseLayers = [] |
|---|
| | | |
|---|
| | | let viewerHeight = 800 |
|---|
| | | let heightChange = 800 |
|---|
| | | |
|---|
| | | let tilesetLayer = null |
|---|
| | | |
|---|
| | | let tileset = null |
|---|
| | | |
|---|
| | | let silhouetteBlue = null |
|---|
| | | |
|---|
| | | window.conBack = null |
|---|
| | | window.highlighted = null |
|---|
| | | window.selected = null |
|---|
| | | window.layerGroup = null |
|---|
| | | window.areaLayer = null |
|---|
| | | window.polygon = null |
|---|
| | | window.doit2 = null |
|---|
| | | window.initViewer = null // 主方法 |
|---|
| | | |
|---|
| | | window.height1s = null |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'mobilemapBox', |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | butbut: null, |
|---|
| | | // 首次 |
|---|
| | | titlesetLayerFlag: false, |
|---|
| | | // 确认viewer是否创建好 |
|---|
| | | viewerExist: false, |
|---|
| | | // 手动视图缩放控制 |
|---|
| | | heights: 0, |
|---|
| | | heights1: 0, |
|---|
| | | DC: '', |
|---|
| | | bigPopup: { |
|---|
| | | width: 0, |
|---|
| | | height: 0 |
|---|
| | |
|---|
| | | [116.39585177, 27.93945304, 100], |
|---|
| | | [116.41526036, 27.95352217, 100] |
|---|
| | | ], |
|---|
| | | areaLayer: null, |
|---|
| | | mapCenter: [115.871863, 28.743861, 400.0], |
|---|
| | | // areaLayer: null, |
|---|
| | | // mapCenter: [115.871863, 28.743861, 160.0], |
|---|
| | | mapCenter: [116.02680670, 28.68340803, 800.0], |
|---|
| | | // mapCenter: [116.35381525 - 0.00035, 27.95839468 + 0.0025, 160.0], |
|---|
| | | // 控制4层缩放 |
|---|
| | | onelayerNum: 80, |
|---|
| | | towlayerNum: 120, |
|---|
| | | threelayerNum: 160, |
|---|
| | | forlayerNum: 200, |
|---|
| | | intervallayerNum: 20, |
|---|
| | | frislayertHeight: 160 // 默认高度 |
|---|
| | | // onelayerNum: 80, |
|---|
| | | // towlayerNum: 200, |
|---|
| | | // threelayerNum: 320, |
|---|
| | | // forlayerNum: 440, |
|---|
| | | // intervallayerNum: 60, |
|---|
| | | // frislayertHeight: 320, //默认高度 |
|---|
| | | // twolayerNum: 120, |
|---|
| | | // threelayerNum: 160, |
|---|
| | | // fourlayerNum: null, |
|---|
| | | // intervallayerNum: 20, |
|---|
| | | // frislayertHeight: 120, // 默认高度 |
|---|
| | | onelayerNum: 100, |
|---|
| | | twolayerNum: 300, |
|---|
| | | threelayerNum: 500, |
|---|
| | | fourlayerNum: 800, |
|---|
| | | fivelayerNum: 1000, |
|---|
| | | |
|---|
| | | sixlayerNum: null, |
|---|
| | | |
|---|
| | | intervallayerNum: 50, |
|---|
| | | frislayertHeight: 800, // 默认高度 |
|---|
| | | useZoom: false, // 是否缩放 true 去掉了缩放， 抚州 false |
|---|
| | | addOthers: false // 加入了活动底图以及抚州底图 抚州 true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | ...mapGetters([ |
|---|
| | | 'mviewer', |
|---|
| | | 'MobileWindowsHide', |
|---|
| | | // "mviewer", |
|---|
| | | // "MobileWindowsHide", |
|---|
| | | 'zoomRange', |
|---|
| | | 'mBigPopup', |
|---|
| | | 'mBigPopupAfter', |
|---|
| | | // "mBigPopupAfter", |
|---|
| | | 'iconHide', |
|---|
| | | 'popupsDom', |
|---|
| | | 'MobileWindowsHideFixed', |
|---|
| | | // "popupsDom", |
|---|
| | | 'dimension', |
|---|
| | | 'dimensionData', |
|---|
| | | 'areaLayer', // 绿布 |
|---|
| | | 'areaLayerSelect', // 绿布颜色控制 |
|---|
| | | 'urlParameterData' // url 参数 |
|---|
| | | // "areaLayer", // 绿布 |
|---|
| | | // "areaLayerSelect", // 绿布颜色控制 |
|---|
| | | 'urlParameterData', // url 参数 |
|---|
| | | 'pinchFlag' |
|---|
| | | ]) |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | |
|---|
| | | this.bigPopup.height = '0' |
|---|
| | | this.bigPopup.display = 'none' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | viewerExist: { |
|---|
| | | immediate: true, |
|---|
| | | handler (newCode, oldCode) { |
|---|
| | | const that = this |
|---|
| | | if (that.titlesetLayerFlag == false && newCode == true) { |
|---|
| | | global.viewer.imageryLayers.addImageryProvider(new global.DC.Namespace.Cesium.SingleTileImageryProvider({ |
|---|
| | | url: '/img/bg/bg.png' |
|---|
| | | })) |
|---|
| | | |
|---|
| | | silhouetteBlue = |
|---|
| | | global.DC.Namespace.Cesium.PostProcessStageLibrary.createEdgeDetectionStage() |
|---|
| | | silhouetteBlue.uniforms.color = |
|---|
| | | global.DC.Namespace.Cesium.Color.fromBytes(9, 162, 40) |
|---|
| | | silhouetteBlue.uniforms.length = 0.01 |
|---|
| | | silhouetteBlue.selected = [] |
|---|
| | | |
|---|
| | | global.viewer.scene.postProcessStages.add( |
|---|
| | | global.DC.Namespace.Cesium.PostProcessStageLibrary.createSilhouetteStage( |
|---|
| | | [silhouetteBlue] |
|---|
| | | ) |
|---|
| | | ) |
|---|
| | | |
|---|
| | | // 判断默认维度 |
|---|
| | | // 原本默认是2.5d 改为3d默认时做出改变 |
|---|
| | | that.$store.commit('set_frislayertHeight', that.frislayertHeight) // 送入默认弹窗高度 |
|---|
| | | that.$store.commit('set_zoomRange', [ |
|---|
| | | that.onelayerNum, |
|---|
| | | // that.fourlayerNum ? that.fourlayerNum : that.threelayerNum, |
|---|
| | | that.fivelayerNum, |
|---|
| | | that.useZoom, |
|---|
| | | that.addOthers |
|---|
| | | ]) |
|---|
| | | |
|---|
| | | global.viewer.flyToPosition( |
|---|
| | | new global.DC.Position( |
|---|
| | | that.mapCenter[0], |
|---|
| | | that.mapCenter[1], |
|---|
| | | that.frislayertHeight, |
|---|
| | | that.dimensionData.heading, |
|---|
| | | that.dimensionData.pitch, |
|---|
| | | that.dimensionData.roll |
|---|
| | | ), |
|---|
| | | () => { |
|---|
| | | // baseLayerImgUrl.forEach((item, index) => { |
|---|
| | | // var obj = {} |
|---|
| | | // obj[Object.keys(item)[0]] = [] |
|---|
| | | // Object.values(item)[0].forEach(citem => { |
|---|
| | | // var layer = new global.DC.Namespace.Cesium.SingleTileImageryProvider({ |
|---|
| | | // url: citem.url, |
|---|
| | | // rectangle: global.DC.Namespace.Cesium.Rectangle.fromDegrees(citem.rectangle[0], citem.rectangle[1], citem.rectangle[2], citem.rectangle[3]) |
|---|
| | | // }) |
|---|
| | | // obj[Object.keys(item)[0]].push({ layer, id: citem.id + Object.keys(item)[0], rectangle: citem.rectangle }) |
|---|
| | | // }) |
|---|
| | | // baseLayers.push(obj) |
|---|
| | | // }) |
|---|
| | | |
|---|
| | | // global.viewer.imageryLayers.addImageryProvider( |
|---|
| | | // new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ |
|---|
| | | // url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0', |
|---|
| | | // subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], |
|---|
| | | // format: 'image/jpeg', |
|---|
| | | // show: true, |
|---|
| | | // maximumLevel: 18 |
|---|
| | | // }) |
|---|
| | | // ) |
|---|
| | | |
|---|
| | | // global.viewer.imageryLayers.addImageryProvider( |
|---|
| | | // new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ |
|---|
| | | // url: 'http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0', |
|---|
| | | // subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], |
|---|
| | | // format: 'image/jpeg', |
|---|
| | | // show: true, |
|---|
| | | // maximumLevel: 18 |
|---|
| | | // }) |
|---|
| | | // ) |
|---|
| | | |
|---|
| | | that.addBaseLayer() |
|---|
| | | |
|---|
| | | // global.viewer.imageryLayers.addImageryProvider(new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ |
|---|
| | | // url: '/wp/{z}/{x}/{y}.png', |
|---|
| | | // fileExtension: 'png' |
|---|
| | | // // minimumLevel: 19 |
|---|
| | | // })) |
|---|
| | | }, |
|---|
| | | 0 |
|---|
| | | ) |
|---|
| | | |
|---|
| | | // 2.5D视角限制 |
|---|
| | | global.viewer.scene.screenSpaceCameraController.minimumZoomDistance = that.zoomRange[0] |
|---|
| | | // 最大 |
|---|
| | | // global.viewer.scene.screenSpaceCameraController.maximumZoomDistance = that.zoomRange[1] |
|---|
| | | // 设置相机缩小时的速率 |
|---|
| | | global.viewer.scene.screenSpaceCameraController._minimumZoomRate = 2000 |
|---|
| | | // 设置相机放大时的速率 |
|---|
| | | global.viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000 |
|---|
| | | // 视角平移 |
|---|
| | | global.viewer.scene.screenSpaceCameraController.enableRotate = true |
|---|
| | | // 视角缩放 |
|---|
| | | global.viewer.scene.screenSpaceCameraController.enableZoom = true |
|---|
| | | // 视角旋转 |
|---|
| | | global.viewer.scene.screenSpaceCameraController.enableTilt = false |
|---|
| | | |
|---|
| | | that.$refs.mobileLeftNav.initialize() |
|---|
| | | // that.$store.commit("MSET_VIEWER", viewer); |
|---|
| | | // window.mviewer = viewer; |
|---|
| | | // that.$store.commit("MSET_DC", DC); |
|---|
| | | global.viewer.popup.hide() |
|---|
| | | |
|---|
| | | window.highlighted = { |
|---|
| | | feature: undefined, |
|---|
| | | originalColor: new global.DC.Namespace.Cesium.Color() |
|---|
| | | } |
|---|
| | | |
|---|
| | | window.selected = { |
|---|
| | | feature: undefined, |
|---|
| | | originalColor: new global.DC.Namespace.Cesium.Color() |
|---|
| | | } |
|---|
| | | |
|---|
| | | window.layerGroup = new global.DC.LayerGroup('modelBox') |
|---|
| | | global.viewer.addLayerGroup(window.layerGroup) |
|---|
| | | |
|---|
| | | window.areaLayer = new global.DC.VectorLayer('areaLayer') |
|---|
| | | window.layerGroup.addLayer(window.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(';') |
|---|
| | | |
|---|
| | | window.polygon = new global.DC.Polygon(item.geometry.rings[0]) |
|---|
| | | window.polygon.attr = item.attributes |
|---|
| | | |
|---|
| | | window.polygon.setStyle({ |
|---|
| | | material: global.DC.Namespace.Cesium.Color.fromBytes( |
|---|
| | | 255, |
|---|
| | | 255, |
|---|
| | | 255, |
|---|
| | | 1 |
|---|
| | | ) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | window.areaLayer.addOverlay(window.polygon) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | window.areaLayer.show = true |
|---|
| | | }) |
|---|
| | | that.$store.commit('MSET_areaLayer', window.areaLayer) |
|---|
| | | |
|---|
| | | // 判断是否有url参数 |
|---|
| | | // console.log(that.urlParameterData); |
|---|
| | | if (typeof that.urlParameterData != 'string') { |
|---|
| | | // console.log(that.urlParameterData); |
|---|
| | | that.$store.commit('initurlParameterLayer') // 初始化自定义标签图层 |
|---|
| | | if (that.urlParameterData.methods == 'goto') { |
|---|
| | | // url有定位的参数 |
|---|
| | | // alert(that.urlParameterData.jd); |
|---|
| | | // alert(that.urlParameterData.wd); |
|---|
| | | // 创建标记 |
|---|
| | | const dsa = { |
|---|
| | | list: [ |
|---|
| | | { |
|---|
| | | name: that.urlParameterData.name || '无标题', |
|---|
| | | jd: that.urlParameterData.jd, |
|---|
| | | wd: that.urlParameterData.wd |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | clear: true |
|---|
| | | } |
|---|
| | | that.$store.dispatch('addurlParameterLayerIcon', dsa) |
|---|
| | | // that.flytos( |
|---|
| | | // //飞入标记 |
|---|
| | | // +that.urlParameterData.jd + 0.012, |
|---|
| | | // +that.urlParameterData.wd |
|---|
| | | // ); |
|---|
| | | |
|---|
| | | const d = { |
|---|
| | | position: {}, |
|---|
| | | lntLat: [+that.urlParameterData.jd, +that.urlParameterData.wd], |
|---|
| | | query: { |
|---|
| | | introduce: '暂无内容', |
|---|
| | | address: '', |
|---|
| | | ...(that.urlParameterData || {}), |
|---|
| | | lntLat: [+that.urlParameterData.jd, +that.urlParameterData.wd] |
|---|
| | | }, |
|---|
| | | useJWD: true // 仅使用经纬度 |
|---|
| | | } |
|---|
| | | that.$store.dispatch('setMobileWindows', d) |
|---|
| | | } else if (that.urlParameterData.methods == 'arc') { |
|---|
| | | const objInit = { |
|---|
| | | name: that.urlParameterData.mechanismname, |
|---|
| | | lntLat: [that.urlParameterData.jd, that.urlParameterData.wd], |
|---|
| | | alt: that.urlParameterData.gd, |
|---|
| | | heading: that.urlParameterData.heading, |
|---|
| | | pitch: that.urlParameterData.pitch, |
|---|
| | | roll: that.urlParameterData.roll, |
|---|
| | | bgImg: that.urlParameterData.tpurl, |
|---|
| | | QRImg: that.urlParameterData.codeurl, |
|---|
| | | websiteUrl: that.urlParameterData.websiteurl, |
|---|
| | | telePhone: that.urlParameterData.telephone, |
|---|
| | | address: that.urlParameterData.address, |
|---|
| | | introduce: that.urlParameterData.introduce, |
|---|
| | | video: that.urlParameterData.videourl, |
|---|
| | | panoramaurl: that.urlParameterData.panoramaurl // 全景 |
|---|
| | | } |
|---|
| | | |
|---|
| | | const dataInitialization = { |
|---|
| | | position: {}, |
|---|
| | | lntLat: objInit.lntLat, |
|---|
| | | query: { ...objInit }, |
|---|
| | | useJWD: true // 仅使用经纬度 |
|---|
| | | // from: 'PopupOurOnce' |
|---|
| | | } |
|---|
| | | |
|---|
| | | that.$store.dispatch('setMobileWindows', dataInitialization) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 地图移动事件 |
|---|
| | | global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, (e) => { |
|---|
| | | if (!that.iconHide) { |
|---|
| | | that.$store.commit('MSET_ICONHIDE', true) |
|---|
| | | } |
|---|
| | | // if (!that.MobileWindowsHide) { |
|---|
| | | // that.$store.dispatch("closeMobileWindowsDom"); //关闭随地图弹窗 |
|---|
| | | // } |
|---|
| | | // let height = Math.ceil(global.viewer.camera.positionCartographic.height); |
|---|
| | | // console.log(height); |
|---|
| | | }) |
|---|
| | | // 地图点击事件 |
|---|
| | | global.viewer.on(global.DC.MouseEventType.CLICK, (e) => { |
|---|
| | | if (that.pinchFlag == true) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | if (e.overlay != undefined && e.layer.id == 'areaLayer') { |
|---|
| | | if (window.select.overlay != undefined) { |
|---|
| | | if (e.overlay != window.select.overlay) { |
|---|
| | | window.select.overlay.setStyle({ |
|---|
| | | material: window.select.color, |
|---|
| | | outline: false |
|---|
| | | }) |
|---|
| | | |
|---|
| | | that.$store.commit('mset_changeSelect', [undefined, undefined]) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (window.select.overlay == undefined) { |
|---|
| | | window.select.overlay = e.overlay |
|---|
| | | |
|---|
| | | window.select.color = e.overlay._style.material |
|---|
| | | window.select.overlay.setStyle({ |
|---|
| | | outline: true, |
|---|
| | | outlineColor: global.DC.Namespace.Cesium.Color.fromBytes( |
|---|
| | | 3, |
|---|
| | | 255, |
|---|
| | | 13, |
|---|
| | | 255 |
|---|
| | | ), // 边框颜色 |
|---|
| | | outlineWidth: 10, // 边框大小， |
|---|
| | | height: 0.01, |
|---|
| | | material: global.DC.Namespace.Cesium.Color.fromBytes( |
|---|
| | | 108, |
|---|
| | | 245, |
|---|
| | | 113, |
|---|
| | | 158 |
|---|
| | | ) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 如果是地图点击建筑，调用接口查详情 |
|---|
| | | const ids = |
|---|
| | | e.overlay.attr['楼栋号'] == '8栋' |
|---|
| | | ? '9栋' |
|---|
| | | : e.overlay.attr['楼栋号'] == '9栋' |
|---|
| | | ? '8栋' |
|---|
| | | : e.overlay.attr['楼栋号'] |
|---|
| | | const eIntlat = [ |
|---|
| | | e.wgs84SurfacePosition.lng, |
|---|
| | | e.wgs84SurfacePosition.lat |
|---|
| | | ] |
|---|
| | | getBuildClock({ |
|---|
| | | mechanismname: '香琴湾' + ids |
|---|
| | | }).then((res) => { |
|---|
| | | const item = res.data.data |
|---|
| | | // data.query.bgImg = ds.mechanismname; |
|---|
| | | // data.query.name = ds.tpurl; |
|---|
| | | // data.query.panoramaurl = ds.panoramaurl; |
|---|
| | | // data.query.bgImg = ds.tpurl; |
|---|
| | | // data.query.bgImg = ds.tpurl; |
|---|
| | | const useData = { |
|---|
| | | name: item.mechanismname, |
|---|
| | | lntLat: eIntlat, |
|---|
| | | alt: item.gd, |
|---|
| | | heading: item.heading, |
|---|
| | | pitch: item.pitch, |
|---|
| | | roll: item.roll, |
|---|
| | | bgImg: item.tpurl, |
|---|
| | | QRImg: item.codeurl, |
|---|
| | | websiteUrl: item.websiteurl, |
|---|
| | | telePhone: item.telephone, |
|---|
| | | address: item.address, |
|---|
| | | introduce: item.introduce, |
|---|
| | | video: item.videourl, |
|---|
| | | buts: ['定位', '实景', '图集'], |
|---|
| | | panoramaurl: item.panoramaurl, // 全景 |
|---|
| | | fromTo: 'mapClick' |
|---|
| | | } |
|---|
| | | // 定制化窗体 |
|---|
| | | // console.log(item, useData, "111111"); |
|---|
| | | // return; |
|---|
| | | that.openPopupS({}, eIntlat, useData) |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | if (window.select.overlay != undefined) { |
|---|
| | | window.select.overlay.setStyle({ |
|---|
| | | material: window.select.color, |
|---|
| | | outline: false |
|---|
| | | }) |
|---|
| | | |
|---|
| | | that.$store.commit('mset_changeSelect', [undefined, undefined]) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 双指事件 |
|---|
| | | var scene = global.viewer.scene |
|---|
| | | var handler = new global.DC.Namespace.Cesium.ScreenSpaceEventHandler(scene.canvas) |
|---|
| | | |
|---|
| | | // 开始 |
|---|
| | | handler.setInputAction(function (e) { |
|---|
| | | that.$store.commit('SET_PINCHFLAG', true) |
|---|
| | | }, global.DC.Namespace.Cesium.ScreenSpaceEventType.PINCH_START) |
|---|
| | | |
|---|
| | | // 结束 |
|---|
| | | handler.setInputAction(function (e) { |
|---|
| | | that.$store.commit('SET_PINCHFLAG', false) |
|---|
| | | }, global.DC.Namespace.Cesium.ScreenSpaceEventType.PINCH_END) |
|---|
| | | |
|---|
| | | // that.$nextTick(() => { |
|---|
| | | // document.querySelector('.dc-zoom-controller').children[0].onclick = function () { |
|---|
| | | // const scene = global.viewer.scene |
|---|
| | | // const camera = scene.camera |
|---|
| | | |
|---|
| | | // const focus = that._getCameraFocus(scene) |
|---|
| | | // const cameraPosition = that._getCameraPosition(camera, focus, 1 / 2) |
|---|
| | | // camera.flyTo({ |
|---|
| | | // destination: cameraPosition, |
|---|
| | | // orientation: { |
|---|
| | | // heading: camera.heading, |
|---|
| | | // pitch: camera.pitch, |
|---|
| | | // roll: camera.roll |
|---|
| | | // }, |
|---|
| | | // duration: 0.5, |
|---|
| | | // convert: false, |
|---|
| | | // complete: function () { |
|---|
| | | // var height = global.viewer.camera.positionCartographic.height |
|---|
| | | |
|---|
| | | // if (that.dimension == '2.5D') { |
|---|
| | | // if (height < 98) { |
|---|
| | | // global.viewer.camera.setView({ |
|---|
| | | // destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
|---|
| | | // global.viewer.camera.positionCartographic.longitude, |
|---|
| | | // global.viewer.camera.positionCartographic.latitude, |
|---|
| | | // 100 |
|---|
| | | // ), |
|---|
| | | // orientation: { |
|---|
| | | // // 指向 |
|---|
| | | // heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), |
|---|
| | | // // 视角 |
|---|
| | | // pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), |
|---|
| | | // roll: 0.0 |
|---|
| | | // } |
|---|
| | | // }) |
|---|
| | | |
|---|
| | | // return |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // if (height > that.fivelayerNum - that.intervallayerNum) { |
|---|
| | | // viewerHeight = that.fivelayerNum |
|---|
| | | // } else if (height <= that.fourlayerNum + that.intervallayerNum && height > that.fourlayerNum - that.intervallayerNum) { |
|---|
| | | // viewerHeight = that.fourlayerNum |
|---|
| | | // } else if (height <= that.fourlayerNum + that.intervallayerNum && height > that.threelayerNum - that.intervallayerNum) { |
|---|
| | | // viewerHeight = that.threelayerNum |
|---|
| | | // } else if (height <= that.twolayerNum + that.intervallayerNum && height > that.twolayerNum - that.intervallayerNum) { |
|---|
| | | // viewerHeight = that.twolayerNum |
|---|
| | | // } else if (height <= that.onelayerNum + that.intervallayerNum) { |
|---|
| | | // viewerHeight = that.onelayerNum |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | // }) |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // document.querySelector('.dc-zoom-controller').children[2].onclick = function () { |
|---|
| | | // const scene = global.viewer.scene |
|---|
| | | // const camera = scene.camera |
|---|
| | | |
|---|
| | | // const focus = that._getCameraFocus(scene) |
|---|
| | | // const cameraPosition = that._getCameraPosition(camera, focus, -1) |
|---|
| | | // camera.flyTo({ |
|---|
| | | // destination: cameraPosition, |
|---|
| | | // orientation: { |
|---|
| | | // heading: camera.heading, |
|---|
| | | // pitch: camera.pitch, |
|---|
| | | // roll: camera.roll |
|---|
| | | // }, |
|---|
| | | // duration: 0.5, |
|---|
| | | // convert: false, |
|---|
| | | // complete: function () { |
|---|
| | | // var height = global.viewer.camera.positionCartographic.height |
|---|
| | | // if (that.dimension == '2.5D') { |
|---|
| | | // if (height > 702) { |
|---|
| | | // global.viewer.camera.setView({ |
|---|
| | | // destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
|---|
| | | // global.viewer.camera.positionCartographic.longitude, |
|---|
| | | // global.viewer.camera.positionCartographic.latitude, |
|---|
| | | // 702 |
|---|
| | | // ), |
|---|
| | | // orientation: { |
|---|
| | | // // 指向 |
|---|
| | | // heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), |
|---|
| | | // // 视角 |
|---|
| | | // pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), |
|---|
| | | // roll: 0.0 |
|---|
| | | // } |
|---|
| | | // }) |
|---|
| | | |
|---|
| | | // return |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // if (height > that.fivelayerNum - that.intervallayerNum) { |
|---|
| | | // viewerHeight = that.fivelayerNum |
|---|
| | | // } else if (height <= that.fourlayerNum + that.intervallayerNum && height > that.fourlayerNum - that.intervallayerNum) { |
|---|
| | | // viewerHeight = that.fourlayerNum |
|---|
| | | // } else if (height <= that.fourlayerNum + that.intervallayerNum && height > that.threelayerNum - that.intervallayerNum) { |
|---|
| | | // viewerHeight = that.threelayerNum |
|---|
| | | // } else if (height <= that.twolayerNum + that.intervallayerNum && height > that.twolayerNum - that.intervallayerNum) { |
|---|
| | | // viewerHeight = that.twolayerNum |
|---|
| | | // } else if (height <= that.onelayerNum + that.intervallayerNum) { |
|---|
| | | // viewerHeight = that.onelayerNum |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | // }) |
|---|
| | | // } |
|---|
| | | // }) |
|---|
| | | |
|---|
| | | that.mapMouseMove() |
|---|
| | | |
|---|
| | | that.titlesetLayerFlag = true |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created () { |
|---|
| | | }, |
|---|
| | | mounted () { |
|---|
| | | // return; |
|---|
| | | var DC = global.DC |
|---|
| | | this.DC = DC |
|---|
| | | |
|---|
| | | var that = this |
|---|
| | | |
|---|
| | | let viewer |
|---|
| | | // let viewer; |
|---|
| | | if (this.addOthers) { |
|---|
| | | // 抚州视角数据 |
|---|
| | | this.mapCenter = [116.35571525, 27.95839468 + 0.0067, 160.0] |
|---|
| | | this.onelayerNum = 100 |
|---|
| | | this.twolayerNum = 300 |
|---|
| | | this.threelayerNum = 500 |
|---|
| | | this.fourlayerNum = 700 |
|---|
| | | this.fivelayerNum = null |
|---|
| | | this.sixlayerNum = null |
|---|
| | | |
|---|
| | | function distanceSurface () { |
|---|
| | | viewer.measure.distanceSurface() |
|---|
| | | this.intervallayerNum = 100 |
|---|
| | | this.frislayertHeight = 500 // 默认高度 |
|---|
| | | } |
|---|
| | | |
|---|
| | | function calcArea () { |
|---|
| | | viewer.measure.area() |
|---|
| | | } |
|---|
| | | |
|---|
| | | function areaSurface () { |
|---|
| | | viewer.measure.areaSurface() |
|---|
| | | } |
|---|
| | | |
|---|
| | | function calcAngle () { |
|---|
| | | viewer.measure.angle() |
|---|
| | | } |
|---|
| | | |
|---|
| | | function calcModelAngle () { |
|---|
| | | viewer.measure.angle({ |
|---|
| | | clampToModel: true |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function calcHeight () { |
|---|
| | | viewer.measure.height() |
|---|
| | | } |
|---|
| | | |
|---|
| | | function calcModelHeight () { |
|---|
| | | viewer.measure.height({ |
|---|
| | | clampToModel: true |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function calcHeading () { |
|---|
| | | viewer.measure.heading() |
|---|
| | | } |
|---|
| | | |
|---|
| | | function areaHeight () { |
|---|
| | | viewer.measure.areaHeight() |
|---|
| | | } |
|---|
| | | |
|---|
| | | function calcTriangleHeight () { |
|---|
| | | viewer.measure.triangleHeight() |
|---|
| | | } |
|---|
| | | |
|---|
| | | function calcModelTriangleHeight () { |
|---|
| | | viewer.measure.triangleHeight({ |
|---|
| | | clampToModel: true |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function deactivate () { |
|---|
| | | viewer.measure.deactivate() |
|---|
| | | } |
|---|
| | | |
|---|
| | | function gotoModel () { |
|---|
| | | viewer.flyTo(tileset) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function initViewer () { |
|---|
| | | viewer = new DC.Viewer('mobile-viewer-container', { |
|---|
| | | window.initViewer = () => { |
|---|
| | | global.viewer = new global.DC.Viewer('mobile-viewer-container', { |
|---|
| | | contextOptions: { |
|---|
| | | webgl: { |
|---|
| | | stencil: true, |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | that.$refs.mobileLeftNav.initialize(viewer) |
|---|
| | | that.$store.commit('MSET_VIEWER', viewer) |
|---|
| | | // window.mviewer = viewer; |
|---|
| | | // that.$store.commit("MSET_DC", DC); |
|---|
| | | const popup = viewer.popup |
|---|
| | | |
|---|
| | | popup.hide() |
|---|
| | | global.viewer.scene.globe.baseColor = global.DC.Namespace.Cesium.Color.WHITE |
|---|
| | | |
|---|
| | | // const baselayer = DC.ImageryLayerFactory.createArcGisImageryLayer({ |
|---|
| | | // url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", |
|---|
| | | // }); |
|---|
| | | const baselayer = that.DC.ImageryLayerFactory.createImageryLayer( |
|---|
| | | that.DC.ImageryType.XYZ, |
|---|
| | | { |
|---|
| | | // url: 'https://webmap-tile.sf-express.com/MapTileService/rt?x={col}&y={row}&z={level}' |
|---|
| | | |
|---|
| | | url: 'https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal' // 行政区划 |
|---|
| | | } |
|---|
| | | ) |
|---|
| | | // viewer.addBaseLayer(baselayer, { |
|---|
| | | // iconUrl: "examples/images/icon/img.png", |
|---|
| | | // name: "影像", |
|---|
| | | // }); |
|---|
| | | // eslint-disable-next-line camelcase |
|---|
| | | // const baselayer_shaded = DC.ImageryLayerFactory.createArcGisImageryLayer({ |
|---|
| | | // url: "http://services.arcgisonline.com/arcgis/rest/services/World_Shaded_Relief/MapServer", |
|---|
| | | // }); |
|---|
| | | // viewer.addBaseLayer(baselayer_shaded, { |
|---|
| | | // iconUrl: "examples/images/icon/elec.png", |
|---|
| | | // name: "电子", |
|---|
| | | // }); |
|---|
| | | |
|---|
| | | // // eslint-disable-next-line camelcase |
|---|
| | | // const baselayer_street = DC.ImageryLayerFactory.createArcGisImageryLayer({ |
|---|
| | | // url: "http://services.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer", |
|---|
| | | // }); |
|---|
| | | // viewer.addBaseLayer(baselayer_street, { |
|---|
| | | // iconUrl: "examples/images/icon/ter.png", |
|---|
| | | // name: "地形", |
|---|
| | | // }); |
|---|
| | | |
|---|
| | | // // eslint-disable-next-line camelcase |
|---|
| | | // const baselayer_ter = DC.ImageryLayerFactory.createArcGisImageryLayer({ |
|---|
| | | // url: "http://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer", |
|---|
| | | // }); |
|---|
| | | // viewer.addBaseLayer(baselayer_ter, { |
|---|
| | | // iconUrl: "examples/images/icon/ter.png", |
|---|
| | | // name: "地形", |
|---|
| | | // }); |
|---|
| | | |
|---|
| | | // 地图移动事件 |
|---|
| | | viewer.on(DC.MouseEventType.MOUSE_MOVE, (e) => { |
|---|
| | | if (!that.iconHide) { |
|---|
| | | that.$store.commit('MSET_ICONHIDE', true) |
|---|
| | | } |
|---|
| | | if (!that.MobileWindowsHide) { |
|---|
| | | // that.$store.dispatch("closeMobileWindowsDom"); //关闭随地图弹窗 |
|---|
| | | } |
|---|
| | | // let height = Math.ceil(viewer.camera.positionCartographic.height); |
|---|
| | | // console.log(height); |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // viewer.on(that.DC.SceneEventType.CAMERA_MOVE_END, (e) => { |
|---|
| | | viewer.on(that.DC.SceneEventType.CAMERA_CHANGED, (e) => { |
|---|
| | | // 相机移动最后参数 |
|---|
| | | // 控制高度 |
|---|
| | | const isSet = that.dimension != '3D' |
|---|
| | | const height = Math.ceil(viewer.camera.positionCartographic.height) |
|---|
| | | const conBack = (height) => { |
|---|
| | | viewer.camera.setView({ |
|---|
| | | destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians( |
|---|
| | | viewer.camera.positionCartographic.longitude, |
|---|
| | | viewer.camera.positionCartographic.latitude, |
|---|
| | | height |
|---|
| | | ), |
|---|
| | | orientation: { |
|---|
| | | heading: that.DC.Namespace.Cesium.Math.toRadians( |
|---|
| | | that.dimensionData.heading |
|---|
| | | ), // 方向 |
|---|
| | | pitch: that.DC.Namespace.Cesium.Math.toRadians( |
|---|
| | | that.dimensionData.pitch |
|---|
| | | ), // 倾斜角度 |
|---|
| | | roll: that.dimensionData.roll |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | // if (height < 300) { |
|---|
| | | // conBack(300); |
|---|
| | | // } |
|---|
| | | // if (height > 2000) { |
|---|
| | | // conBack(2000); |
|---|
| | | // } |
|---|
| | | // if (height <= 79 && isSet) { |
|---|
| | | // conBack(79); |
|---|
| | | // } |
|---|
| | | if (height <= that.onelayerNum - 1 && isSet) { |
|---|
| | | conBack(that.onelayerNum - 1) |
|---|
| | | } |
|---|
| | | // if (height > 220 && height <= 280 && isSet) { |
|---|
| | | // conBack(280); |
|---|
| | | // } |
|---|
| | | // if (height > 280 && height <= 340 && isSet) { |
|---|
| | | // conBack(340); |
|---|
| | | // } |
|---|
| | | // if (height > 340 && height <= 400 && isSet) { |
|---|
| | | // conBack(400); |
|---|
| | | // } |
|---|
| | | // if (height > 200 && isSet) { |
|---|
| | | // conBack(200); |
|---|
| | | // } |
|---|
| | | if (height > that.forlayerNum && isSet) { |
|---|
| | | conBack(that.forlayerNum) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 按钮事件 |
|---|
| | | const butSetViews = (num) => { |
|---|
| | | viewer.camera.flyTo({ |
|---|
| | | destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians( |
|---|
| | | viewer.camera.positionCartographic.longitude, |
|---|
| | | viewer.camera.positionCartographic.latitude, |
|---|
| | | num |
|---|
| | | ), |
|---|
| | | orientation: { |
|---|
| | | // 指向 |
|---|
| | | heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0), |
|---|
| | | // 视角 |
|---|
| | | pitch: that.DC.Namespace.Cesium.Math.toRadians(-90), |
|---|
| | | roll: 0.0 |
|---|
| | | }, |
|---|
| | | duration: 0.5 // 定位的时间间隔 |
|---|
| | | }) |
|---|
| | | // overii(); |
|---|
| | | } |
|---|
| | | that.butbut = function () { |
|---|
| | | // 放大 |
|---|
| | | document.querySelector('.dc-zoom-controller').children[0].onclick = |
|---|
| | | function () { |
|---|
| | | if (that.dimension == '2.5D') { |
|---|
| | | const height = Math.ceil( |
|---|
| | | viewer.camera.positionCartographic.height |
|---|
| | | ) |
|---|
| | | // if (height > 180) { |
|---|
| | | // butSetViews(160); |
|---|
| | | // return; |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // if (height > 140) { |
|---|
| | | // butSetViews(120); |
|---|
| | | // return; |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // if (height > 100) { |
|---|
| | | // butSetViews(80); |
|---|
| | | // } |
|---|
| | | if (height > that.forlayerNum - that.intervallayerNum) { |
|---|
| | | butSetViews(that.threelayerNum) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (height > that.threelayerNum - that.intervallayerNum) { |
|---|
| | | butSetViews(that.towlayerNum) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (height > that.towlayerNum - that.intervallayerNum) { |
|---|
| | | butSetViews(that.onelayerNum) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // 缩小 |
|---|
| | | document.querySelector('.dc-zoom-controller').children[2].onclick = |
|---|
| | | function () { |
|---|
| | | if (that.dimension == '2.5D') { |
|---|
| | | const height = Math.ceil( |
|---|
| | | viewer.camera.positionCartographic.height |
|---|
| | | ) |
|---|
| | | console.log(height) |
|---|
| | | |
|---|
| | | // if (height <= 100) { |
|---|
| | | // butSetViews(120); |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // if (height > 100 && height <= 140) { |
|---|
| | | // butSetViews(160); |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // if (height > 140 && height < 180) { |
|---|
| | | // butSetViews(200); |
|---|
| | | // } |
|---|
| | | |
|---|
| | | if (height <= that.towlayerNum - that.intervallayerNum) { |
|---|
| | | butSetViews(that.towlayerNum) |
|---|
| | | } |
|---|
| | | |
|---|
| | | if ( |
|---|
| | | height > that.towlayerNum - that.intervallayerNum && |
|---|
| | | height <= that.threelayerNum - that.intervallayerNum |
|---|
| | | ) { |
|---|
| | | butSetViews(that.threelayerNum) |
|---|
| | | } |
|---|
| | | |
|---|
| | | if ( |
|---|
| | | height > that.threelayerNum - that.intervallayerNum && |
|---|
| | | height < that.forlayerNum - that.intervallayerNum |
|---|
| | | ) { |
|---|
| | | butSetViews(that.forlayerNum) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // 滚轮事件 |
|---|
| | | // 指示器 |
|---|
| | | var ii = 1 |
|---|
| | | var startHeight = 0 |
|---|
| | | var cutHeight = 0 |
|---|
| | | var overii = function () { |
|---|
| | | ii = 1 |
|---|
| | | startHeight = 0 |
|---|
| | | cutHeight = 0 |
|---|
| | | } |
|---|
| | | var setViews = (num) => { |
|---|
| | | viewer.camera.flyTo({ |
|---|
| | | destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians( |
|---|
| | | viewer.camera.positionCartographic.longitude, |
|---|
| | | viewer.camera.positionCartographic.latitude, |
|---|
| | | num |
|---|
| | | ), |
|---|
| | | orientation: { |
|---|
| | | // 指向 |
|---|
| | | heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0), |
|---|
| | | // 视角 |
|---|
| | | pitch: that.DC.Namespace.Cesium.Math.toRadians(-90), |
|---|
| | | roll: 0.0 |
|---|
| | | }, |
|---|
| | | duration: 0.5 // 定位的时间间隔 |
|---|
| | | }) |
|---|
| | | overii() |
|---|
| | | } |
|---|
| | | var isCameraTime = null |
|---|
| | | viewer.on(that.DC.SceneEventType.CAMERA_CHANGED, (e) => { |
|---|
| | | if (that.dimension == '2.5D') { |
|---|
| | | // console.log(e); |
|---|
| | | const height = Math.ceil(viewer.camera.positionCartographic.height) |
|---|
| | | if (ii == 1 && startHeight == 0) { |
|---|
| | | startHeight = height |
|---|
| | | } |
|---|
| | | ii++ |
|---|
| | | cutHeight = height - startHeight |
|---|
| | | // console.log(cutHeight); |
|---|
| | | console.log(height, 'see') |
|---|
| | | that.heights = height |
|---|
| | | that.heights1 = cutHeight |
|---|
| | | // return; |
|---|
| | | if (isCameraTime) { |
|---|
| | | clearTimeout(isCameraTime) |
|---|
| | | isCameraTime = setTimeout(() => { |
|---|
| | | takes() |
|---|
| | | isCameraTime = null |
|---|
| | | }, 200) |
|---|
| | | } else { |
|---|
| | | isCameraTime = setTimeout(() => { |
|---|
| | | takes() |
|---|
| | | isCameraTime = null |
|---|
| | | }, 200) |
|---|
| | | } |
|---|
| | | const takes = () => { |
|---|
| | | if (ii != 1) { |
|---|
| | | if (cutHeight >= 0) { |
|---|
| | | if (cutHeight > 2) { |
|---|
| | | // if (height >= 83 && height < 120) { |
|---|
| | | // setViews(120); |
|---|
| | | // } |
|---|
| | | // if (height >= 123 && height < 160) { |
|---|
| | | // setViews(160); |
|---|
| | | // } |
|---|
| | | // if (height >= 163 && height < 200) { |
|---|
| | | // setViews(200); |
|---|
| | | // } |
|---|
| | | if ( |
|---|
| | | height >= that.onelayerNum + 2 && |
|---|
| | | height < that.towlayerNum |
|---|
| | | ) { |
|---|
| | | setViews(that.towlayerNum) |
|---|
| | | } |
|---|
| | | if ( |
|---|
| | | height >= that.towlayerNum + 2 && |
|---|
| | | height < that.threelayerNum |
|---|
| | | ) { |
|---|
| | | setViews(that.threelayerNum) |
|---|
| | | } |
|---|
| | | if ( |
|---|
| | | height >= that.threelayerNum + 2 && |
|---|
| | | height < that.forlayerNum |
|---|
| | | ) { |
|---|
| | | setViews(that.forlayerNum) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // 放大 |
|---|
| | | } else { |
|---|
| | | // 缩小 |
|---|
| | | // if (cutHeight < -3) { |
|---|
| | | // if (height <= 200 && height > 157) { |
|---|
| | | // setViews(160); |
|---|
| | | // } |
|---|
| | | // if (height <= 157 && height > 117) { |
|---|
| | | // setViews(120); |
|---|
| | | // } |
|---|
| | | // if (height <= 117 && height > 80) { |
|---|
| | | // setViews(80); |
|---|
| | | // } |
|---|
| | | if (cutHeight < -2) { |
|---|
| | | if ( |
|---|
| | | height <= that.forlayerNum && |
|---|
| | | height > that.threelayerNum - 2 |
|---|
| | | ) { |
|---|
| | | setViews(that.threelayerNum) |
|---|
| | | } |
|---|
| | | if ( |
|---|
| | | height <= that.threelayerNum - 2 && |
|---|
| | | height > that.towlayerNum - 2 |
|---|
| | | ) { |
|---|
| | | setViews(that.towlayerNum) |
|---|
| | | } |
|---|
| | | if ( |
|---|
| | | height <= that.towlayerNum - 2 && |
|---|
| | | height > that.onelayerNum |
|---|
| | | ) { |
|---|
| | | setViews(that.onelayerNum) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) { // 判断是否支持图像渲染像素化处理 |
|---|
| | | global.viewer.setOptions({ |
|---|
| | | resolutionScale: window.devicePixelRatio |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 地图点击事件 |
|---|
| | | // viewer.on(DC.MouseEventType.CLICK, (e) => { |
|---|
| | | // // console.log(e); |
|---|
| | | // // 定制化窗体 |
|---|
| | | // that.openPopupS( |
|---|
| | | // e.position, |
|---|
| | | // [e.wgs84SurfacePosition.lng, e.wgs84SurfacePosition.lat], |
|---|
| | | // { |
|---|
| | | // name: "地图点击", |
|---|
| | | // address: [e.wgs84SurfacePosition.lng, e.wgs84SurfacePosition.lat], |
|---|
| | | // introduce: [e.windowPosition.x, e.windowPosition.y], |
|---|
| | | // from: "地图点击", |
|---|
| | | // } |
|---|
| | | // ); |
|---|
| | | // }); |
|---|
| | | global.viewer.compass.enable = false |
|---|
| | | global.viewer.zoomController.enable = true |
|---|
| | | global.viewer.locationBar.enable = false |
|---|
| | | global.viewer.distanceLegend.enable = false |
|---|
| | | |
|---|
| | | // 白模型↓ |
|---|
| | | // const layer = new DC.TilesetLayer("layer"); |
|---|
| | | // viewer.addLayer(layer); |
|---|
| | | // const tileset = new DC.Tileset( |
|---|
| | | // "http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json" |
|---|
| | | // ); |
|---|
| | | // const style = new DC.TilesetStyle(); |
|---|
| | | // style.color = { |
|---|
| | | // conditions: [ |
|---|
| | | // ["${Height} >= 300", "rgba(45, 0, 75, 0.5)"], |
|---|
| | | // ["${Height} >= 200", "rgb(102, 71, 151)"], |
|---|
| | | // ["${Height} >= 100", "rgb(170, 162, 204)"], |
|---|
| | | // ["${Height} >= 50", "rgb(224, 226, 238)"], |
|---|
| | | // ["${Height} >= 25", "rgb(252, 230, 200)"], |
|---|
| | | // ["${Height} >= 10", "rgb(248, 176, 87)"], |
|---|
| | | // ["${Height} >= 5", "rgb(198, 106, 11)"], |
|---|
| | | // ["true", "rgb(127, 59, 8)"], |
|---|
| | | // ], |
|---|
| | | // }; |
|---|
| | | |
|---|
| | | // viewer.use(new DC.Measure()); |
|---|
| | | |
|---|
| | | // tileset.setStyle(style); |
|---|
| | | // layer.addOverlay(tileset); |
|---|
| | | // viewer.flyTo(tileset); |
|---|
| | | // 白模型↑ |
|---|
| | | |
|---|
| | | // 精细模型↓ |
|---|
| | | const tilesetLayer = new that.DC.TilesetLayer('tilesetLayer') |
|---|
| | | viewer.addLayer(tilesetLayer) |
|---|
| | | const tileset = new that.DC.Tileset('/mx/tileset.json', { |
|---|
| | | luminanceAtZenith: 0.5 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // tilesetLayer.addOverlay(tileset); |
|---|
| | | // tilesetLayer.show = false; |
|---|
| | | |
|---|
| | | const silhouetteBlue = |
|---|
| | | that.DC.Namespace.Cesium.PostProcessStageLibrary.createEdgeDetectionStage() |
|---|
| | | silhouetteBlue.uniforms.color = that.DC.Namespace.Cesium.Color.fromBytes( |
|---|
| | | 9, |
|---|
| | | 162, |
|---|
| | | 40 |
|---|
| | | ) |
|---|
| | | silhouetteBlue.uniforms.length = 0.01 |
|---|
| | | silhouetteBlue.selected = [] |
|---|
| | | |
|---|
| | | viewer.scene.postProcessStages.add( |
|---|
| | | that.DC.Namespace.Cesium.PostProcessStageLibrary.createSilhouetteStage([ |
|---|
| | | silhouetteBlue |
|---|
| | | ]) |
|---|
| | | ) |
|---|
| | | |
|---|
| | | var highlighted = { |
|---|
| | | feature: undefined, |
|---|
| | | originalColor: new that.DC.Namespace.Cesium.Color() |
|---|
| | | } |
|---|
| | | |
|---|
| | | var selected = { |
|---|
| | | feature: undefined, |
|---|
| | | originalColor: new that.DC.Namespace.Cesium.Color() |
|---|
| | | } |
|---|
| | | // 点击事件 |
|---|
| | | tileset.on(DC.MouseEventType.CLICK, (e) => { |
|---|
| | | viewer.scene.globe.depthTestAgainstTerrain = false |
|---|
| | | // console.log(e); |
|---|
| | | |
|---|
| | | viewer.flyToPosition( |
|---|
| | | new that.DC.Position(115.87186406, 28.74449337, 1800, 0, 45, 0) |
|---|
| | | ) |
|---|
| | | |
|---|
| | | // 定制化窗体 |
|---|
| | | that.openPopupS( |
|---|
| | | e.position, |
|---|
| | | [e.wgs84Position.lng, e.wgs84Position.lat], |
|---|
| | | { |
|---|
| | | name: e.overlay.attr.name, |
|---|
| | | address: e.layer._id, |
|---|
| | | introduce: e.overlay.attr.id, |
|---|
| | | data: e |
|---|
| | | } |
|---|
| | | ) |
|---|
| | | // 高亮 |
|---|
| | | silhouetteBlue.selected = [] |
|---|
| | | |
|---|
| | | if (that.DC.Namespace.Cesium.defined(highlighted.feature)) { |
|---|
| | | highlighted.feature.color = highlighted.originalColor |
|---|
| | | highlighted.feature = undefined |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (e.feature !== selected.feature) { |
|---|
| | | silhouetteBlue.selected = [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 |
|---|
| | | ) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | // 移动事件 |
|---|
| | | // tileset.on(that.DC.MouseEventType.MOUSE_MOVE, (e) => { |
|---|
| | | // silhouetteBlue.selected = []; |
|---|
| | | |
|---|
| | | // if (that.DC.Namespace.Cesium.defined(highlighted.feature)) { |
|---|
| | | // highlighted.feature.color = highlighted.originalColor; |
|---|
| | | // highlighted.feature = undefined; |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // if (e.feature !== selected.feature) { |
|---|
| | | // silhouetteBlue.selected = [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 |
|---|
| | | // ); |
|---|
| | | // } |
|---|
| | | // }); |
|---|
| | | // tilesetLayer["changesilhouetteBlue"] = () => { |
|---|
| | | // silhouetteBlue.selected = []; |
|---|
| | | // }; |
|---|
| | | // tilesetLayer.show = false; |
|---|
| | | // 精细模型↑ |
|---|
| | | |
|---|
| | | // 2.5D贴图↓ |
|---|
| | | const usetowpointfive = () => { |
|---|
| | | 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", |
|---|
| | | // ], |
|---|
| | | // }); |
|---|
| | | // new that.DC.Namespace.Cesium.ArcGisMapServerImageryProvider({ |
|---|
| | | // url: "http://arcgis.jxpskj.com:6080/arcgis/rest/services/PingXiang25DMapDN/MapServer", |
|---|
| | | // }); |
|---|
| | | new that.DC.Namespace.Cesium.UrlTemplateImageryProvider({ |
|---|
| | | url: '/wp/{z}/{x}/{y}.png', |
|---|
| | | fileExtension: 'png' |
|---|
| | | }) |
|---|
| | | return viewer.imageryLayers.addImageryProvider(provider) |
|---|
| | | } |
|---|
| | | |
|---|
| | | const newLayer = usetowpointfive() |
|---|
| | | // 2.5d贴图事件 |
|---|
| | | const layerGroup = new that.DC.LayerGroup('modelBox') |
|---|
| | | viewer.addLayerGroup(layerGroup) |
|---|
| | | |
|---|
| | | const areaLayer = new that.DC.VectorLayer('areaLayer') |
|---|
| | | layerGroup.addLayer(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.attr = item.attributes |
|---|
| | | |
|---|
| | | polygon.setStyle({ |
|---|
| | | material: that.DC.Namespace.Cesium.Color.fromBytes( |
|---|
| | | 255, |
|---|
| | | 255, |
|---|
| | | 255, |
|---|
| | | 1 |
|---|
| | | ) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | areaLayer.addOverlay(polygon) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | areaLayer.show = true |
|---|
| | | }) |
|---|
| | | that.$store.commit('MSET_areaLayer', areaLayer) |
|---|
| | | // var select = { |
|---|
| | | // overlay: undefined, |
|---|
| | | // color: undefined, |
|---|
| | | // }; |
|---|
| | | viewer.on(that.DC.MouseEventType.CLICK, (e) => { |
|---|
| | | // console.log(e); |
|---|
| | | if (e.overlay != undefined && e.layer.id == 'areaLayer') { |
|---|
| | | if (that.areaLayerSelect.overlay != undefined) { |
|---|
| | | if (e.overlay != that.areaLayerSelect.overlay) { |
|---|
| | | that.areaLayerSelect.overlay.setStyle({ |
|---|
| | | material: that.areaLayerSelect.color, |
|---|
| | | outline: false |
|---|
| | | }) |
|---|
| | | |
|---|
| | | that.$store.commit('mset_changeSelect', [undefined, undefined]) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (that.areaLayerSelect.overlay == undefined) { |
|---|
| | | that.areaLayerSelect.overlay = e.overlay |
|---|
| | | |
|---|
| | | that.areaLayerSelect.color = e.overlay._style.material |
|---|
| | | that.areaLayerSelect.overlay.setStyle({ |
|---|
| | | outline: true, |
|---|
| | | outlineColor: that.DC.Namespace.Cesium.Color.fromBytes( |
|---|
| | | 3, |
|---|
| | | 255, |
|---|
| | | 13, |
|---|
| | | 255 |
|---|
| | | ), // 边框颜色 |
|---|
| | | outlineWidth: 10, // 边框大小， |
|---|
| | | height: 0.01, |
|---|
| | | material: that.DC.Namespace.Cesium.Color.fromBytes( |
|---|
| | | 108, |
|---|
| | | 245, |
|---|
| | | 113, |
|---|
| | | 158 |
|---|
| | | ) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 如果是地图点击建筑，调用接口查详情 |
|---|
| | | const ids = |
|---|
| | | e.overlay.attr['楼栋号'] == '8栋' |
|---|
| | | ? '9栋' |
|---|
| | | : e.overlay.attr['楼栋号'] == '9栋' |
|---|
| | | ? '8栋' |
|---|
| | | : e.overlay.attr['楼栋号'] |
|---|
| | | const eIntlat = [ |
|---|
| | | e.wgs84SurfacePosition.lng, |
|---|
| | | e.wgs84SurfacePosition.lat |
|---|
| | | ] |
|---|
| | | getBuildClock({ |
|---|
| | | mechanismname: '香琴湾' + ids |
|---|
| | | }).then((res) => { |
|---|
| | | const item = res.data.data |
|---|
| | | // data.query.bgImg = ds.mechanismname; |
|---|
| | | // data.query.name = ds.tpurl; |
|---|
| | | // data.query.panoramaurl = ds.panoramaurl; |
|---|
| | | // data.query.bgImg = ds.tpurl; |
|---|
| | | // data.query.bgImg = ds.tpurl; |
|---|
| | | const useData = { |
|---|
| | | name: item.mechanismname, |
|---|
| | | lntLat: eIntlat, |
|---|
| | | alt: item.gd, |
|---|
| | | heading: item.heading, |
|---|
| | | pitch: item.pitch, |
|---|
| | | roll: item.roll, |
|---|
| | | bgImg: item.tpurl, |
|---|
| | | QRImg: item.codeurl, |
|---|
| | | websiteUrl: item.websiteurl, |
|---|
| | | telePhone: item.telephone, |
|---|
| | | address: item.address, |
|---|
| | | introduce: item.introduce, |
|---|
| | | video: item.videourl, |
|---|
| | | buts: ['定位', '实景', '图集'], |
|---|
| | | panoramaurl: item.panoramaurl, // 全景 |
|---|
| | | fromTo: 'mapClick' |
|---|
| | | } |
|---|
| | | // 定制化窗体 |
|---|
| | | // console.log(item, useData, "111111"); |
|---|
| | | // return; |
|---|
| | | that.openPopupS({}, eIntlat, useData) |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | if (that.areaLayerSelect.overlay != undefined) { |
|---|
| | | that.areaLayerSelect.overlay.setStyle({ |
|---|
| | | material: that.areaLayerSelect.color, |
|---|
| | | outline: false |
|---|
| | | }) |
|---|
| | | |
|---|
| | | that.$store.commit('mset_changeSelect', [undefined, undefined]) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 2.5D贴图↑ |
|---|
| | | let startPoint |
|---|
| | | if (true) { |
|---|
| | | startPoint = () => { |
|---|
| | | const doit2 = (int, h) => { |
|---|
| | | viewer.camera.setView({ |
|---|
| | | // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州 |
|---|
| | | // fromDegrees()方法，将经纬度和高程转换为世界坐标 |
|---|
| | | destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees( |
|---|
| | | // 114.0351, |
|---|
| | | // 27.6314, |
|---|
| | | // 200.0 |
|---|
| | | int[0], |
|---|
| | | int[1], |
|---|
| | | int[2] |
|---|
| | | ), |
|---|
| | | orientation: { |
|---|
| | | // 指向 |
|---|
| | | heading: that.DC.Namespace.Cesium.Math.toRadians(h[0]), |
|---|
| | | // 视角 |
|---|
| | | pitch: that.DC.Namespace.Cesium.Math.toRadians(h[1]), |
|---|
| | | roll: h[2] |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | that.dimension == '2.5D' |
|---|
| | | ? doit2( |
|---|
| | | [that.mapCenter[0], that.mapCenter[1], that.frislayertHeight], |
|---|
| | | // [114.04062292, 27.62666834, 220.0], |
|---|
| | | [ |
|---|
| | | that.dimensionData.heading, |
|---|
| | | that.dimensionData.pitch, |
|---|
| | | that.dimensionData.roll |
|---|
| | | ] |
|---|
| | | ) |
|---|
| | | : doit2([114.0351, 27.6314, 300.0], [108, -26.46, 0.0]) |
|---|
| | | // : doit([116.39038494750986, 39.902393222208644, 330.0]); |
|---|
| | | // doit("建模"); |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | // startPoint(1); |
|---|
| | | } |
|---|
| | | // 传递默认位置 |
|---|
| | | that.$store.commit('MSET_MORENWEIZHI', startPoint) |
|---|
| | | // let position = Cesium.Cartesian3.fromDegrees(108, 25, 0); //中心点位置 |
|---|
| | | // let cameraLimit = new xt3d.CameraDominate.CameraLimit( |
|---|
| | | // viewer, |
|---|
| | | // position, |
|---|
| | | // { |
|---|
| | | // radius: 2000, |
|---|
| | | // debugExtent: true, |
|---|
| | | // } |
|---|
| | | // ); |
|---|
| | | |
|---|
| | | // const currentViewRect = viewer.camera.computeViewRectangle();//东南西北数据 |
|---|
| | | // console.log(currentViewRect, 78); |
|---|
| | | |
|---|
| | | // 瀑布流↓ |
|---|
| | | const wallLayer = new that.DC.VectorLayer('wallLayer') |
|---|
| | | // viewer.addLayer(wallLayer); |
|---|
| | | // var arr = that.wallArr; |
|---|
| | | // arr.forEach((item) => { |
|---|
| | | // item = item.join(","); |
|---|
| | | // }); |
|---|
| | | // arr = arr.join(";"); |
|---|
| | | // const wall = new that.DC.Wall(arr); |
|---|
| | | // wall.setStyle({ |
|---|
| | | // material: new that.DC.WallTrailMaterialProperty({ |
|---|
| | | // color: that.DC.Namespace.Cesium.Color.fromBytes(0, 142, 255, 150), |
|---|
| | | // // color: that.DC.Color.DEEPSKYBLUE, |
|---|
| | | // speed: 4, |
|---|
| | | // }), |
|---|
| | | // }); |
|---|
| | | // wallLayer.addOverlay(wall); |
|---|
| | | |
|---|
| | | // viewer.use(new that.DC.Measure()); |
|---|
| | | // 瀑布流↑ |
|---|
| | | |
|---|
| | | // 传入store |
|---|
| | | that.$store.commit('MSET_MODEOLS', { |
|---|
| | | tilesetLayer: tilesetLayer, |
|---|
| | | // tileset: tileset, |
|---|
| | | newLayer: newLayer, |
|---|
| | | wallLayer: wallLayer, |
|---|
| | | usetowpointfive: usetowpointfive |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 飞入起始点 |
|---|
| | | // that.$store.dispatch("mapFlyTo", { |
|---|
| | | // lntLat: [115.87186406, 28.74449337, 1200], |
|---|
| | | // heading: 0, |
|---|
| | | // pitch: -45, |
|---|
| | | // roll: 0, |
|---|
| | | // noOpen: true, |
|---|
| | | // }); |
|---|
| | | // 地图渲染完成执行srore中MSET_CREADE |
|---|
| | | // that.$store.dispatch("MSET_CREADE"); |
|---|
| | | |
|---|
| | | viewer.compass.enable = false |
|---|
| | | viewer.zoomController.enable = true |
|---|
| | | viewer.locationBar.enable = false |
|---|
| | | viewer.distanceLegend.enable = false |
|---|
| | | // 判断默认维度 |
|---|
| | | // 原本默认是2.5d 改为3d默认时做出改变 |
|---|
| | | if (that.dimension == '2.5D') { |
|---|
| | | that.$store.commit('set_frislayertHeight', that.frislayertHeight) // 送入默认弹窗高度 |
|---|
| | | that.$store.commit('set_zoomRange', [ |
|---|
| | | that.onelayerNum, |
|---|
| | | that.forlayerNum |
|---|
| | | ]) // 送入移动端缩放范围 |
|---|
| | | that.$store.commit('MSET_DIMENSION', '2.5D') // 切换2.5D设置 |
|---|
| | | } else if (that.dimension == '3D') { |
|---|
| | | // setTimeout((res) => { |
|---|
| | | // that.$store.dispatch("mapFlyTo", { |
|---|
| | | // lntLat: [111.25036579, 34.83767277, 11443175.85], |
|---|
| | | // heading: 0, |
|---|
| | | // pitch: -90, |
|---|
| | | // roll: 0, |
|---|
| | | // noOpen: true, |
|---|
| | | // fn: function () { |
|---|
| | | // viewer.flyTo(tileset); |
|---|
| | | // viewer.flyTo(provider); |
|---|
| | | // 飞入起始点 |
|---|
| | | // that.$store.dispatch("mapFlyTo", { |
|---|
| | | // lntLat: [115.87186406, 28.74449337, 1200], |
|---|
| | | // heading: 0, |
|---|
| | | // pitch: -45, |
|---|
| | | // roll: 0, |
|---|
| | | // noOpen: true, |
|---|
| | | // }); |
|---|
| | | |
|---|
| | | // startPoint(); |
|---|
| | | that.$store.commit('MSET_DIMENSION', '3D') // 切换3D设置 |
|---|
| | | // }, |
|---|
| | | // }); |
|---|
| | | // }, 2000); |
|---|
| | | } |
|---|
| | | viewer.scene.screenSpaceCameraController._minimumZoomRate = 1000 |
|---|
| | | viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000 |
|---|
| | | that.viewerExist = true |
|---|
| | | } |
|---|
| | | |
|---|
| | | DC.ready(initViewer) |
|---|
| | | setTimeout(() => { |
|---|
| | | that.butbut() |
|---|
| | | |
|---|
| | | // 判断是否有url参数 |
|---|
| | | // console.log(that.urlParameterData); |
|---|
| | | if (typeof that.urlParameterData != 'string') { |
|---|
| | | // console.log(that.urlParameterData); |
|---|
| | | that.$store.commit('initurlParameterLayer') // 初始化自定义标签图层 |
|---|
| | | if (that.urlParameterData.methods == 'goto') { |
|---|
| | | // url有定位的参数 |
|---|
| | | // alert(that.urlParameterData.jd); |
|---|
| | | // alert(that.urlParameterData.wd); |
|---|
| | | // 创建标记 |
|---|
| | | const dsa = { |
|---|
| | | list: [ |
|---|
| | | { |
|---|
| | | name: that.urlParameterData.name || '无标题', |
|---|
| | | jd: that.urlParameterData.jd, |
|---|
| | | wd: that.urlParameterData.wd |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | clear: true |
|---|
| | | } |
|---|
| | | that.$store.dispatch('addurlParameterLayerIcon', dsa) |
|---|
| | | // that.flytos( |
|---|
| | | // //飞入标记 |
|---|
| | | // +that.urlParameterData.jd + 0.012, |
|---|
| | | // +that.urlParameterData.wd |
|---|
| | | // ); |
|---|
| | | |
|---|
| | | const d = { |
|---|
| | | position: {}, |
|---|
| | | lntLat: [+that.urlParameterData.jd, +that.urlParameterData.wd], |
|---|
| | | query: { |
|---|
| | | introduce: '自定义标签', |
|---|
| | | address: '', |
|---|
| | | ...(that.urlParameterData || {}), |
|---|
| | | lntLat: [+that.urlParameterData.jd, +that.urlParameterData.wd] |
|---|
| | | }, |
|---|
| | | useJWD: true // 仅使用经纬度 |
|---|
| | | } |
|---|
| | | that.$store.dispatch('setMobileWindows', d) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, 0) |
|---|
| | | global.DC.ready(window.initViewer) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | _getCameraFocus (scene) { |
|---|
| | | const ray = new global.DC.Namespace.Cesium.Ray( |
|---|
| | | scene.camera.positionWC, |
|---|
| | | scene.camera.directionWC |
|---|
| | | ) |
|---|
| | | const intersections = global.DC.Namespace.Cesium.IntersectionTests.rayEllipsoid( |
|---|
| | | ray, |
|---|
| | | global.DC.Namespace.Cesium.Ellipsoid.WGS84 |
|---|
| | | ) |
|---|
| | | if (intersections) { |
|---|
| | | return global.DC.Namespace.Cesium.Ray.getPoint(ray, intersections.start) |
|---|
| | | } |
|---|
| | | // Camera direction is not pointing at the globe, so use the ellipsoid horizon point as |
|---|
| | | // the focal point. |
|---|
| | | return global.DC.Namespace.Cesium.IntersectionTests.grazingAltitudeLocation( |
|---|
| | | ray, |
|---|
| | | global.DC.Namespace.Cesium.Ellipsoid.WGS84 |
|---|
| | | ) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | _getCameraPosition (camera, focus, scalar) { |
|---|
| | | const cartesian3Scratch = new global.DC.Namespace.Cesium.Cartesian3() |
|---|
| | | const direction = global.DC.Namespace.Cesium.Cartesian3.subtract( |
|---|
| | | focus, |
|---|
| | | camera.position, |
|---|
| | | cartesian3Scratch |
|---|
| | | ) |
|---|
| | | const movementVector = global.DC.Namespace.Cesium.Cartesian3.multiplyByScalar( |
|---|
| | | direction, |
|---|
| | | scalar, |
|---|
| | | cartesian3Scratch |
|---|
| | | ) |
|---|
| | | return global.DC.Namespace.Cesium.Cartesian3.add( |
|---|
| | | camera.position, |
|---|
| | | movementVector, |
|---|
| | | cartesian3Scratch |
|---|
| | | ) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | getViewExtend () { |
|---|
| | | const params = {} |
|---|
| | | const extend = global.viewer.camera.computeViewRectangle() |
|---|
| | | if (typeof extend === 'undefined') { |
|---|
| | | // 2D下会可能拾取不到坐标，extend返回undefined,所以做以下转换 |
|---|
| | | const canvas = global.viewer.scene.canvas |
|---|
| | | const upperLeft = new global.DC.Namespace.Cesium.Cartesian2(0, 0)// canvas左上角坐标转2d坐标 |
|---|
| | | const lowerRight = new global.DC.Namespace.Cesium.Cartesian2( |
|---|
| | | canvas.clientWidth, |
|---|
| | | canvas.clientHeight |
|---|
| | | )// canvas右下角坐标转2d坐标 |
|---|
| | | |
|---|
| | | const ellipsoid = global.viewer.scene.globe.ellipsoid |
|---|
| | | const upperLeft3 = global.viewer.camera.pickEllipsoid( |
|---|
| | | upperLeft, |
|---|
| | | ellipsoid |
|---|
| | | )// 2D转3D世界坐标 |
|---|
| | | |
|---|
| | | const lowerRight3 = global.viewer.camera.pickEllipsoid( |
|---|
| | | lowerRight, |
|---|
| | | ellipsoid |
|---|
| | | )// 2D转3D世界坐标 |
|---|
| | | |
|---|
| | | const upperLeftCartographic = global.viewer.scene.globe.ellipsoid.cartesianToCartographic( |
|---|
| | | upperLeft3 |
|---|
| | | )// 3D世界坐标转弧度 |
|---|
| | | const lowerRightCartographic = global.viewer.scene.globe.ellipsoid.cartesianToCartographic( |
|---|
| | | lowerRight3 |
|---|
| | | )// 3D世界坐标转弧度 |
|---|
| | | |
|---|
| | | const minx = global.DC.Namespace.Cesium.Math.toDegrees(upperLeftCartographic.longitude)// 弧度转经纬度 |
|---|
| | | const maxx = global.DC.Namespace.Cesium.Math.toDegrees(lowerRightCartographic.longitude)// 弧度转经纬度 |
|---|
| | | |
|---|
| | | const miny = global.DC.Namespace.Cesium.Math.toDegrees(lowerRightCartographic.latitude)// 弧度转经纬度 |
|---|
| | | const maxy = global.DC.Namespace.Cesium.Math.toDegrees(upperLeftCartographic.latitude)// 弧度转经纬度 |
|---|
| | | |
|---|
| | | // console.log('经度：' + minx + '----' + maxx) |
|---|
| | | // console.log('纬度：' + miny + '----' + maxy) |
|---|
| | | |
|---|
| | | params.minx = minx |
|---|
| | | params.maxx = maxx |
|---|
| | | params.miny = miny |
|---|
| | | params.maxy = maxy |
|---|
| | | } else { |
|---|
| | | // 3D获取方式 |
|---|
| | | params.maxx = global.DC.Namespace.Cesium.Math.toDegrees(extend.east) |
|---|
| | | params.maxy = global.DC.Namespace.Cesium.Math.toDegrees(extend.north) |
|---|
| | | |
|---|
| | | params.minx = global.DC.Namespace.Cesium.Math.toDegrees(extend.west) |
|---|
| | | params.miny = global.DC.Namespace.Cesium.Math.toDegrees(extend.south) |
|---|
| | | } |
|---|
| | | return params // 返回屏幕所在经纬度范围 |
|---|
| | | }, |
|---|
| | | |
|---|
| | | openPopupS (position, lntLat, query) { |
|---|
| | | const that = this |
|---|
| | | // 定制化窗体 |
|---|
| | |
|---|
| | | query: { introduce: position, address: lntLat, ...(query || {}) }, |
|---|
| | | useJWD: true // 仅使用经纬度 |
|---|
| | | } |
|---|
| | | // console.log(d) |
|---|
| | | that.$store.dispatch('setMobileWindows', d) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | flytos (jd, wd) { |
|---|
| | | const height = this.frislayertHeight |
|---|
| | | this.$store.dispatch('mapFlyTo', { |
|---|
| | |
|---|
| | | roll: 0, |
|---|
| | | noOpen: true |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | addBaseLayer () { |
|---|
| | | if (baseLayer.length > 0) { |
|---|
| | | baseLayer.forEach(item => { |
|---|
| | | global.viewer.imageryLayers.remove( |
|---|
| | | item.layer |
|---|
| | | ) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | baseLayer = [] |
|---|
| | | |
|---|
| | | this.updateBaseLayer(false) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | updateBaseLayer (flag) { |
|---|
| | | const extent = this.getViewExtend() |
|---|
| | | |
|---|
| | | const array = baseLayerImgUrl.filter(item => { |
|---|
| | | return item[viewerHeight] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | array[0][viewerHeight].forEach(sm => { |
|---|
| | | let startFlag = false |
|---|
| | | if (flag == true) { |
|---|
| | | startFlag = baseLayer.some(dt => { |
|---|
| | | return dt.id == sm.id |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (startFlag == true) return |
|---|
| | | |
|---|
| | | if ( |
|---|
| | | ( |
|---|
| | | sm.rectangle[0] > extent.minx && |
|---|
| | | sm.rectangle[1] > extent.miny && |
|---|
| | | sm.rectangle[2] < extent.maxx && |
|---|
| | | sm.rectangle[3] < extent.maxy |
|---|
| | | ) || |
|---|
| | | ( |
|---|
| | | sm.rectangle[0] < extent.minx && |
|---|
| | | sm.rectangle[1] < extent.maxy && |
|---|
| | | sm.rectangle[2] > extent.minx && |
|---|
| | | sm.rectangle[3] > extent.maxy |
|---|
| | | ) || |
|---|
| | | ( |
|---|
| | | sm.rectangle[0] < extent.maxx && |
|---|
| | | sm.rectangle[1] < extent.maxy && |
|---|
| | | sm.rectangle[2] > extent.maxx && |
|---|
| | | sm.rectangle[3] > extent.maxy |
|---|
| | | ) || |
|---|
| | | ( |
|---|
| | | sm.rectangle[0] < extent.maxx && |
|---|
| | | sm.rectangle[1] < extent.miny && |
|---|
| | | sm.rectangle[2] > extent.maxx && |
|---|
| | | sm.rectangle[3] > extent.miny |
|---|
| | | ) || |
|---|
| | | ( |
|---|
| | | sm.rectangle[0] < extent.minx && |
|---|
| | | sm.rectangle[1] < extent.miny && |
|---|
| | | sm.rectangle[2] > extent.minx && |
|---|
| | | sm.rectangle[3] > extent.miny |
|---|
| | | ) || |
|---|
| | | ( |
|---|
| | | sm.rectangle[0] > extent.minx && |
|---|
| | | sm.rectangle[1] < extent.maxy && |
|---|
| | | sm.rectangle[2] < extent.maxx && |
|---|
| | | sm.rectangle[3] > extent.maxy |
|---|
| | | ) || |
|---|
| | | ( |
|---|
| | | sm.rectangle[0] > extent.minx && |
|---|
| | | sm.rectangle[1] > extent.miny && |
|---|
| | | sm.rectangle[2] > extent.maxx && |
|---|
| | | sm.rectangle[3] < extent.maxy |
|---|
| | | ) || |
|---|
| | | ( |
|---|
| | | sm.rectangle[0] > extent.minx && |
|---|
| | | sm.rectangle[1] < extent.miny && |
|---|
| | | sm.rectangle[2] < extent.maxx && |
|---|
| | | sm.rectangle[3] > extent.miny |
|---|
| | | ) || |
|---|
| | | ( |
|---|
| | | sm.rectangle[0] < extent.minx && |
|---|
| | | sm.rectangle[1] > extent.miny && |
|---|
| | | sm.rectangle[2] > extent.minx && |
|---|
| | | sm.rectangle[3] < extent.maxy |
|---|
| | | ) |
|---|
| | | ) { |
|---|
| | | 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, id: sm.id }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 手动控制地图缩放得 |
|---|
| | | mapMouseMove () { |
|---|
| | | const that = this |
|---|
| | | |
|---|
| | | global.viewer.on(global.DC.SceneEventType.CAMERA_CHANGED, (e) => { |
|---|
| | | if (that.useZoom) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | heightChange = viewerHeight |
|---|
| | | var height = global.viewer.camera.positionCartographic.height |
|---|
| | | |
|---|
| | | that.heightChange(height) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | heightChange (height) { |
|---|
| | | var that = this |
|---|
| | | if (that.dimension == '2.5D') { |
|---|
| | | if (height > that.fivelayerNum - that.intervallayerNum) { |
|---|
| | | viewerHeight = that.fivelayerNum |
|---|
| | | } else if (height <= that.fourlayerNum + that.intervallayerNum && height > that.fourlayerNum - that.intervallayerNum) { |
|---|
| | | viewerHeight = that.fourlayerNum |
|---|
| | | } else if (height <= that.threelayerNum + that.intervallayerNum && height > that.threelayerNum - that.intervallayerNum) { |
|---|
| | | viewerHeight = that.threelayerNum |
|---|
| | | } else if (height <= that.twolayerNum + that.intervallayerNum && height > that.twolayerNum - that.intervallayerNum) { |
|---|
| | | viewerHeight = that.twolayerNum |
|---|
| | | } else if (height <= that.onelayerNum + that.intervallayerNum) { |
|---|
| | | viewerHeight = that.onelayerNum |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (heightChange != viewerHeight) { |
|---|
| | | that.addBaseLayer() |
|---|
| | | } |
|---|
| | | |
|---|
| | | that.updateBaseLayer(true) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | addMxTileset () { |
|---|
| | | const that = this |
|---|
| | | tilesetLayer = new global.DC.TilesetLayer('tilesetLayer') |
|---|
| | | global.viewer.addLayer(tilesetLayer) |
|---|
| | | tileset = new global.DC.Tileset('/mx/tileset.json', { |
|---|
| | | luminanceAtZenith: 0.4, |
|---|
| | | // cullWithChildrenBounds: false, |
|---|
| | | // cullRequestsWhileMoving: false, |
|---|
| | | // skipLevelOfDetail: false, |
|---|
| | | shadows: global.DC.Namespace.Cesium.ShadowMode.DISABLED |
|---|
| | | }) |
|---|
| | | tileset.setHeight(150) |
|---|
| | | tilesetLayer.addOverlay(tileset) |
|---|
| | | tileset.on(global.DC.MouseEventType.CLICK, that.tilesetClick) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | removeMxTileset () { |
|---|
| | | const that = this |
|---|
| | | tileset.off(global.DC.MouseEventType.CLICK, that.tilesetClick) |
|---|
| | | tilesetLayer.removeOverlay(tileset) |
|---|
| | | global.viewer.removeLayer(tilesetLayer) |
|---|
| | | tileset = null |
|---|
| | | tilesetLayer = null |
|---|
| | | }, |
|---|
| | | |
|---|
| | | dimensionChange (type, position) { |
|---|
| | | const that = this |
|---|
| | | |
|---|
| | | that.$store.commit('SET_DIMENSION', type) |
|---|
| | | |
|---|
| | | that.$store.commit('SET_DIMENSIONDATA', position) |
|---|
| | | |
|---|
| | | if (type == '2.5D') { |
|---|
| | | that.removeMxTileset() |
|---|
| | | global.viewer.camera.setView({ |
|---|
| | | // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州 |
|---|
| | | // fromDegrees()方法，将经纬度和高程转换为世界坐标 |
|---|
| | | destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees( |
|---|
| | | // 114.0351, |
|---|
| | | // 27.6314, |
|---|
| | | // 200.0 |
|---|
| | | that.mapCenter[0], |
|---|
| | | that.mapCenter[1], |
|---|
| | | that.frislayertHeight |
|---|
| | | ), |
|---|
| | | orientation: { |
|---|
| | | // 指向 |
|---|
| | | heading: global.DC.Namespace.Cesium.Math.toRadians(that.dimensionData.heading), |
|---|
| | | // 视角 |
|---|
| | | pitch: global.DC.Namespace.Cesium.Math.toRadians(that.dimensionData.pitch), |
|---|
| | | roll: that.dimensionData.roll |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 2.5D视角限制 |
|---|
| | | global.viewer.scene.screenSpaceCameraController.minimumZoomDistance = that.zoomRange[0] |
|---|
| | | // 最大 |
|---|
| | | // global.viewer.scene.screenSpaceCameraController.maximumZoomDistance = that.zoomRange[1] |
|---|
| | | // 设置相机缩小时的速率 |
|---|
| | | global.viewer.scene.screenSpaceCameraController._minimumZoomRate = 2000 |
|---|
| | | // 设置相机放大时的速率 |
|---|
| | | global.viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000 |
|---|
| | | // 视角平移 |
|---|
| | | global.viewer.scene.screenSpaceCameraController.enableRotate = true |
|---|
| | | // 视角缩放 |
|---|
| | | global.viewer.scene.screenSpaceCameraController.enableZoom = true |
|---|
| | | // 视角旋转 |
|---|
| | | global.viewer.scene.screenSpaceCameraController.enableTilt = false |
|---|
| | | } else { |
|---|
| | | that.addMxTileset() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
