| | |
| | | /* eslint-disable camelcase */ |
| | | <template> |
| | | <div id="mobile-viewer-container"> |
| | | <!-- 随地图改变图标弹窗↓ --> |
| | | <div id="mobile-map_popup_content"></div> |
| | | <mobileWindow></mobileWindow> |
| | | <!-- 地图固定弹窗 --> |
| | | <!-- <mobileWindowFixed></mobileWindowFixed> --> |
| | | <!-- 地图图标弹窗↑ --> |
| | | <!-- 控制↓ --> |
| | | <mobileLeftNav ref="mobileLeftNav"></mobileLeftNav> |
| | | <mobileCortrol ref="mobileCortrol"></mobileCortrol> |
| | | <mobileCortrolButtom ref="mobileCortrolButtom"></mobileCortrolButtom> |
| | | <mobileCortrolSearch ref="mobileCortrolSearch"></mobileCortrolSearch> |
| | | <!-- 控制↑ --> |
| | | <!-- 控制大弹窗的弹窗 --> |
| | | <!-- v-if="mBigPopupAfter" --> |
| | | <mobilePopupOurAfter></mobilePopupOurAfter> |
| | | <!-- 大弹窗 --> |
| | | <mobilePopupOur :style="[bigPopup]" v-if="mBigPopup"></mobilePopupOur> |
| | | <!-- 测试-跳转位置 --> |
| | | <!-- <mobileGoTo></mobileGoTo> --> |
| | | <!-- 实景窗口 --> |
| | | <mobilePanorama></mobilePanorama> |
| | | <!-- 退出导航 --> |
| | | <mobileCloseRouter></mobileCloseRouter> |
| | | <!-- 退出活动 --> |
| | | <mobileCloseRouterMany></mobileCloseRouterMany> |
| | | <!-- 活动窗口 --> |
| | | <mobileActivity></mobileActivity> |
| | | <!-- 盖住左下角 --> |
| | | <div class="cover_mobileMap">智慧校区</div> |
| | | <!-- 指示器 --> |
| | | <!-- <div class="heights">{{ heights }}---{{ heights1 }}</div> --> |
| | | </div> |
| | | <div id="mobile-viewer-container"> |
| | | <!-- 随地图改变图标弹窗↓ --> |
| | | <div id="mobile-map_popup_content"></div> |
| | | <mobileWindow></mobileWindow> |
| | | <!-- 地图固定弹窗 --> |
| | | <!-- <mobileWindowFixed></mobileWindowFixed> --> |
| | | <!-- 地图图标弹窗↑ --> |
| | | <!-- 控制↓ --> |
| | | <mobileLeftNav ref="mobileLeftNav"></mobileLeftNav> |
| | | <mobileCortrol ref="mobileCortrol"></mobileCortrol> |
| | | <mobileCortrolButtom ref="mobileCortrolButtom"></mobileCortrolButtom> |
| | | <mobileCortrolSearch ref="mobileCortrolSearch"></mobileCortrolSearch> |
| | | <!-- 控制↑ --> |
| | | <!-- 控制大弹窗的弹窗 --> |
| | | <!-- v-if="mBigPopupAfter" --> |
| | | <mobilePopupOurAfter></mobilePopupOurAfter> |
| | | <!-- 大弹窗 --> |
| | | <mobilePopupOur :style="[bigPopup]" v-if="mBigPopup"></mobilePopupOur> |
| | | <!-- 测试-跳转位置 --> |
| | | <!-- <mobileGoTo></mobileGoTo> --> |
| | | <!-- 实景窗口 --> |
| | | <mobilePanorama></mobilePanorama> |
| | | <!-- 退出导航 --> |
| | | <mobileCloseRouter></mobileCloseRouter> |
| | | <!-- 退出活动 --> |
| | | <mobileCloseRouterMany></mobileCloseRouterMany> |
| | | <!-- 活动窗口 --> |
| | | <mobileActivity></mobileActivity> |
| | | <!-- 盖住左下角 --> |
| | | <div class="cover_mobileMap">智慧校区</div> |
| | | <!-- 指示器 --> |
| | | <!-- <div class="heights">{{ heights }}---{{ heights1 }}</div> --> |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import axios from 'axios' |
| | | import { getBuildClock } from '@/api/mobile/buildsClock/buildsClock' // 楼栋详情 |
| | | import { mapGetters } from 'vuex' |
| | | import axios from "axios"; |
| | | import { getBuildClock } from "@/api/mobile/buildsClock/buildsClock"; // 楼栋详情 |
| | | import { mapGetters } from "vuex"; |
| | | |
| | | // baselayer |
| | | window.baselayer = null |
| | | window.conBack = null |
| | | window.butbut = null |
| | | window.butSetViews = null |
| | | window.setViews = null |
| | | window.tilesetLayer = null |
| | | window.tileset = null |
| | | window.silhouetteBlue = null |
| | | window.highlighted = null |
| | | window.selected = null |
| | | window.usetowpointfive = null |
| | | window.provider = null |
| | | window.newLayer = null |
| | | window.layerGroup = null |
| | | window.areaLayer = null |
| | | window.polygon = null |
| | | window.doit2 = null |
| | | window.wallLayer = null |
| | | window.initViewer = null // 主方法 |
| | | window.baselayer = null; |
| | | window.conBack = null; |
| | | window.butbut = null; |
| | | window.butSetViews = null; |
| | | window.setViews = null; |
| | | window.tilesetLayer = null; |
| | | window.tileset = null; |
| | | window.silhouetteBlue = null; |
| | | window.highlighted = null; |
| | | window.selected = null; |
| | | window.usetowpointfive = null; |
| | | window.provider = null; |
| | | window.newLayer = null; |
| | | window.layerGroup = null; |
| | | window.areaLayer = null; |
| | | window.polygon = null; |
| | | window.doit2 = null; |
| | | window.wallLayer = null; |
| | | window.initViewer = null; // 主方法 |
| | | |
| | | window.takes = null |
| | | window.height1s = null |
| | | window.height2s = null |
| | | window.height3s = null |
| | | window.height4s = null |
| | | window.takes = null; |
| | | window.height1s = null; |
| | | window.height2s = null; |
| | | window.height3s = null; |
| | | window.height4s = null; |
| | | |
| | | export default { |
| | | name: 'mobilemapBox', |
| | | data () { |
| | | return { |
| | | // butbut: null, |
| | | heights: 0, |
| | | heights1: 0, |
| | | bigPopup: { |
| | | width: 0, |
| | | height: 0 |
| | | }, |
| | | // transition: "all 3s", |
| | | wallArr: [ |
| | | [116.41526036, 27.95352217, 100], |
| | | [116.41128018, 27.95789328, 100], |
| | | [116.40246486, 27.9639711, 100], |
| | | [116.39728537, 27.96779573, 100], |
| | | [116.39588026, 27.96862679, 100], |
| | | [116.38903705, 27.97029865, 100], |
| | | [116.38872398, 27.97051829, 100], |
| | | [116.38892229, 27.9709012, 100], |
| | | [116.38906721, 27.97190632, 100], |
| | | [116.38706808, 27.97195638, 100], |
| | | [116.38649076, 27.97114448, 100], |
| | | [116.3821407, 27.97312735, 100], |
| | | [116.37876213, 27.97582549, 100], |
| | | [116.3785131, 27.97664153, 100], |
| | | [116.37634915, 27.98039526, 100], |
| | | [116.3743922, 27.98131916, 100], |
| | | [116.36995935, 27.97936074, 100], |
| | | [116.37217247, 27.97498147, 100], |
| | | [116.35099819, 27.97539586, 100], |
| | | [116.35103749, 27.9808805, 100], |
| | | [116.3397246, 27.97987911, 100], |
| | | [116.33950071, 27.97372028, 100], |
| | | [116.32313266, 27.97004136, 100], |
| | | [116.32606743, 27.95863979, 100], |
| | | [116.34788837, 27.92538024, 100], |
| | | [116.3456631, 27.92338627, 100], |
| | | [116.3487449, 27.91718915, 100], |
| | | [116.35311999, 27.91804451, 100], |
| | | [116.35109257, 27.92284807, 100], |
| | | [116.35975153, 27.92900526, 100], |
| | | [116.35660704, 27.93816236, 100], |
| | | [116.39585177, 27.93945304, 100], |
| | | [116.41526036, 27.95352217, 100] |
| | | ], |
| | | // areaLayer: null, |
| | | // mapCenter: [115.871863, 28.743861, 160.0], |
| | | mapCenter: [114.04062292 - 0.00035, 27.62666834 + 0.0025, 160.0], |
| | | // 控制4层缩放 |
| | | // onelayerNum: 80, |
| | | // towlayerNum: 120, |
| | | // threelayerNum: 160, |
| | | // forlayerNum: null, |
| | | // intervallayerNum: 20, |
| | | // frislayertHeight: 120, // 默认高度 |
| | | onelayerNum: 40, |
| | | towlayerNum: 80, |
| | | threelayerNum: 120, |
| | | forlayerNum: 160, |
| | | name: "mobilemapBox", |
| | | data() { |
| | | return { |
| | | // butbut: null, |
| | | heights: 0, |
| | | heights1: 0, |
| | | bigPopup: { |
| | | width: 0, |
| | | height: 0, |
| | | }, |
| | | // transition: "all 3s", |
| | | wallArr: [ |
| | | [116.41526036, 27.95352217, 100], |
| | | [116.41128018, 27.95789328, 100], |
| | | [116.40246486, 27.9639711, 100], |
| | | [116.39728537, 27.96779573, 100], |
| | | [116.39588026, 27.96862679, 100], |
| | | [116.38903705, 27.97029865, 100], |
| | | [116.38872398, 27.97051829, 100], |
| | | [116.38892229, 27.9709012, 100], |
| | | [116.38906721, 27.97190632, 100], |
| | | [116.38706808, 27.97195638, 100], |
| | | [116.38649076, 27.97114448, 100], |
| | | [116.3821407, 27.97312735, 100], |
| | | [116.37876213, 27.97582549, 100], |
| | | [116.3785131, 27.97664153, 100], |
| | | [116.37634915, 27.98039526, 100], |
| | | [116.3743922, 27.98131916, 100], |
| | | [116.36995935, 27.97936074, 100], |
| | | [116.37217247, 27.97498147, 100], |
| | | [116.35099819, 27.97539586, 100], |
| | | [116.35103749, 27.9808805, 100], |
| | | [116.3397246, 27.97987911, 100], |
| | | [116.33950071, 27.97372028, 100], |
| | | [116.32313266, 27.97004136, 100], |
| | | [116.32606743, 27.95863979, 100], |
| | | [116.34788837, 27.92538024, 100], |
| | | [116.3456631, 27.92338627, 100], |
| | | [116.3487449, 27.91718915, 100], |
| | | [116.35311999, 27.91804451, 100], |
| | | [116.35109257, 27.92284807, 100], |
| | | [116.35975153, 27.92900526, 100], |
| | | [116.35660704, 27.93816236, 100], |
| | | [116.39585177, 27.93945304, 100], |
| | | [116.41526036, 27.95352217, 100], |
| | | ], |
| | | // areaLayer: null, |
| | | // mapCenter: [115.871863, 28.743861, 160.0], |
| | | // mapCenter: [114.04062292 - 0.00035, 27.62666834 + 0.0025, 160.0], |
| | | mapCenter: [116.35381525 - 0.00035, 27.95839468 + 0.0025, 160.0], |
| | | // 控制4层缩放 |
| | | // onelayerNum: 80, |
| | | // towlayerNum: 120, |
| | | // threelayerNum: 160, |
| | | // forlayerNum: null, |
| | | // intervallayerNum: 20, |
| | | // frislayertHeight: 120, // 默认高度 |
| | | onelayerNum: 40, |
| | | towlayerNum: 80, |
| | | threelayerNum: 120, |
| | | forlayerNum: 160, |
| | | |
| | | fivelayerNum: 200, |
| | | sixlayerNum: 240, |
| | | fivelayerNum: 200, |
| | | sixlayerNum: 240, |
| | | |
| | | intervallayerNum: 15, |
| | | frislayertHeight: 160 // 默认高度 |
| | | } |
| | | intervallayerNum: 15, |
| | | frislayertHeight: 160, // 默认高度 |
| | | }; |
| | | }, |
| | | computed: { |
| | | ...mapGetters([ |
| | | // "mviewer", |
| | | // "MobileWindowsHide", |
| | | "mBigPopup", |
| | | // "mBigPopupAfter", |
| | | "iconHide", |
| | | // "popupsDom", |
| | | "dimension", |
| | | "dimensionData", |
| | | // "areaLayer", // 绿布 |
| | | // "areaLayerSelect", // 绿布颜色控制 |
| | | "urlParameterData", // url 参数 |
| | | ]), |
| | | }, |
| | | watch: { |
| | | mBigPopup() { |
| | | if (this.mBigPopup) { |
| | | this.bigPopup.width = "100%"; |
| | | this.bigPopup.height = "100%"; |
| | | this.bigPopup.display = "inline-block"; |
| | | } else { |
| | | this.bigPopup.width = "0"; |
| | | this.bigPopup.height = "0"; |
| | | this.bigPopup.display = "none"; |
| | | } |
| | | }, |
| | | computed: { |
| | | ...mapGetters([ |
| | | // "mviewer", |
| | | // "MobileWindowsHide", |
| | | 'mBigPopup', |
| | | // "mBigPopupAfter", |
| | | 'iconHide', |
| | | // "popupsDom", |
| | | 'dimension', |
| | | 'dimensionData', |
| | | // "areaLayer", // 绿布 |
| | | // "areaLayerSelect", // 绿布颜色控制 |
| | | 'urlParameterData' // url 参数 |
| | | ]) |
| | | }, |
| | | watch: { |
| | | mBigPopup () { |
| | | if (this.mBigPopup) { |
| | | this.bigPopup.width = '100%' |
| | | this.bigPopup.height = '100%' |
| | | this.bigPopup.display = 'inline-block' |
| | | } else { |
| | | this.bigPopup.width = '0' |
| | | this.bigPopup.height = '0' |
| | | this.bigPopup.display = 'none' |
| | | } |
| | | } |
| | | }, |
| | | mounted () { |
| | | // return; |
| | | var that = this |
| | | }, |
| | | mounted() { |
| | | // return; |
| | | var that = this; |
| | | |
| | | // let viewer; |
| | | // let viewer; |
| | | |
| | | window.initViewer = () => { |
| | | global.viewer = new global.DC.Viewer('mobile-viewer-container', { |
| | | contextOptions: { |
| | | webgl: { |
| | | stencil: true, |
| | | preserveDrawingBuffer: true |
| | | } |
| | | } |
| | | }) |
| | | |
| | | // viewer = global.viewer; |
| | | that.$refs.mobileLeftNav.initialize() |
| | | // that.$store.commit("MSET_VIEWER", viewer); |
| | | // window.mviewer = viewer; |
| | | // that.$store.commit("MSET_DC", DC); |
| | | global.viewer.popup.hide() |
| | | |
| | | // const baselayer = DC.ImageryLayerFactory.createArcGisImageryLayer({ |
| | | // url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", |
| | | // }); |
| | | window.baselayer = global.DC.ImageryLayerFactory.createImageryLayer( |
| | | global.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' // 行政区划 |
| | | } |
| | | ) |
| | | // global.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", |
| | | // }); |
| | | // global.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", |
| | | // }); |
| | | // global.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", |
| | | // }); |
| | | // global.viewer.addBaseLayer(baselayer_ter, { |
| | | // iconUrl: "examples/images/icon/ter.png", |
| | | // name: "地形", |
| | | // }); |
| | | |
| | | // 地图移动事件 |
| | | 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.SceneEventType.CAMERA_MOVE_END, (e) => { |
| | | global.viewer.on(global.DC.SceneEventType.CAMERA_CHANGED, (e) => { |
| | | // 相机移动最后参数 |
| | | // 控制高度 |
| | | // return; |
| | | const isSet = that.dimension != '3D' |
| | | window.height1s = Math.ceil( |
| | | global.viewer.camera.positionCartographic.height |
| | | ) |
| | | window.conBack = (height) => { |
| | | global.viewer.camera.setView({ |
| | | destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | global.viewer.camera.positionCartographic.longitude, |
| | | |
| | | global.viewer.camera.positionCartographic.latitude, |
| | | height |
| | | ), |
| | | 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 |
| | | } |
| | | }) |
| | | } |
| | | // if (height < 300) { |
| | | // conBack(300); |
| | | // } |
| | | // if (height > 2000) { |
| | | // conBack(2000); |
| | | // } |
| | | // if (height <= 79 && isSet) { |
| | | // conBack(79); |
| | | // } |
| | | if (window.height1s <= that.onelayerNum - 1 && isSet) { |
| | | window.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); |
| | | // } |
| | | // const usMun = that.forlayerNum ? that.forlayerNum : that.threelayerNum; |
| | | const usMun = that.sixlayerNum |
| | | if (window.height1s > usMun && isSet) { |
| | | window.conBack(usMun) |
| | | } |
| | | }) |
| | | |
| | | // 按钮事件 |
| | | window.butSetViews = (num) => { |
| | | global.viewer.camera.flyTo({ |
| | | destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | global.viewer.camera.positionCartographic.longitude, |
| | | global.viewer.camera.positionCartographic.latitude, |
| | | num |
| | | ), |
| | | orientation: { |
| | | // 指向 |
| | | heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), |
| | | // 视角 |
| | | pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), |
| | | roll: 0.0 |
| | | }, |
| | | duration: 0.5 // 定位的时间间隔 |
| | | }) |
| | | // overii(); |
| | | } |
| | | window.butbut = function () { |
| | | // return; |
| | | // 放大 |
| | | document.querySelector('.dc-zoom-controller').children[0].onclick = |
| | | function () { |
| | | if (that.dimension == '2.5D') { |
| | | window.height2s = Math.ceil( |
| | | global.viewer.camera.positionCartographic.height |
| | | ) |
| | | // if (height > 180) { |
| | | // butSetViews(160); |
| | | // return; |
| | | // } |
| | | |
| | | // if (height > 140) { |
| | | // butSetViews(120); |
| | | // return; |
| | | // } |
| | | |
| | | // if (height > 100) { |
| | | // butSetViews(80); |
| | | // } |
| | | if (that.sixlayerNum) { |
| | | if ( |
| | | window.height2s > |
| | | that.sixlayerNum - that.intervallayerNum |
| | | ) { |
| | | window.butSetViews(that.fivelayerNum) |
| | | return |
| | | } |
| | | } |
| | | if (that.fivelayerNum) { |
| | | if ( |
| | | window.height2s > |
| | | that.fivelayerNum - that.intervallayerNum |
| | | ) { |
| | | window.butSetViews(that.forlayerNum) |
| | | return |
| | | } |
| | | } |
| | | if (that.forlayerNum) { |
| | | if ( |
| | | window.height2s > |
| | | that.forlayerNum - that.intervallayerNum |
| | | ) { |
| | | window.butSetViews(that.threelayerNum) |
| | | return |
| | | } |
| | | } |
| | | |
| | | if ( |
| | | window.height2s > |
| | | that.threelayerNum - that.intervallayerNum |
| | | ) { |
| | | window.butSetViews(that.towlayerNum) |
| | | return |
| | | } |
| | | |
| | | if (window.height2s > that.towlayerNum - that.intervallayerNum) { |
| | | window.butSetViews(that.onelayerNum) |
| | | } |
| | | } |
| | | } |
| | | |
| | | // 缩小 |
| | | document.querySelector('.dc-zoom-controller').children[2].onclick = |
| | | function () { |
| | | if (that.dimension == '2.5D') { |
| | | window.height3s = Math.ceil( |
| | | global.viewer.camera.positionCartographic.height |
| | | ) |
| | | console.log(window.height3s) |
| | | |
| | | // if (height <= 100) { |
| | | // butSetViews(120); |
| | | // } |
| | | |
| | | // if (height > 100 && height <= 140) { |
| | | // butSetViews(160); |
| | | // } |
| | | |
| | | // if (height > 140 && height < 180) { |
| | | // butSetViews(200); |
| | | // } |
| | | |
| | | if (window.height3s <= that.towlayerNum - that.intervallayerNum) { |
| | | window.butSetViews(that.towlayerNum) |
| | | } |
| | | |
| | | if ( |
| | | window.height3s > that.towlayerNum - that.intervallayerNum && |
| | | window.height3s <= that.threelayerNum - that.intervallayerNum |
| | | ) { |
| | | window.butSetViews(that.threelayerNum) |
| | | } |
| | | |
| | | if (that.forlayerNum) { |
| | | if ( |
| | | window.height3s > |
| | | that.threelayerNum - that.intervallayerNum && |
| | | window.height3s < that.forlayerNum - that.intervallayerNum |
| | | ) { |
| | | window.butSetViews(that.forlayerNum) |
| | | } |
| | | } |
| | | if (that.fivelayerNum) { |
| | | if ( |
| | | window.height3s > that.forlayerNum - that.intervallayerNum && |
| | | window.height3s < that.fivelayerNum - that.intervallayerNum |
| | | ) { |
| | | window.butSetViews(that.fivelayerNum) |
| | | } |
| | | } |
| | | if (that.sixlayerNum) { |
| | | if ( |
| | | window.height3s > that.fivelayerNum - that.intervallayerNum && |
| | | window.height3s < that.sixlayerNum - that.intervallayerNum |
| | | ) { |
| | | window.butSetViews(that.sixlayerNum) |
| | | } |
| | | } |
| | | } |
| | | } |
| | | // 滚轮事件 |
| | | // 指示器 |
| | | var ii = 1 |
| | | var startHeight = 0 |
| | | var cutHeight = 0 |
| | | var overii = function () { |
| | | ii = 1 |
| | | startHeight = 0 |
| | | cutHeight = 0 |
| | | } |
| | | window.setViews = (num) => { |
| | | global.viewer.camera.flyTo({ |
| | | destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | global.viewer.camera.positionCartographic.longitude, |
| | | global.viewer.camera.positionCartographic.latitude, |
| | | num |
| | | ), |
| | | orientation: { |
| | | // 指向 |
| | | heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), |
| | | // 视角 |
| | | pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), |
| | | roll: 0.0 |
| | | }, |
| | | duration: 0.5 // 定位的时间间隔 |
| | | }) |
| | | overii() |
| | | } |
| | | var isCameraTime = null |
| | | global.viewer.on(global.DC.SceneEventType.CAMERA_CHANGED, (e) => { |
| | | if (that.dimension == '2.5D') { |
| | | // console.log(e); |
| | | window.height4s = Math.ceil( |
| | | global.viewer.camera.positionCartographic.height |
| | | ) |
| | | if (ii == 1 && startHeight == 0) { |
| | | startHeight = window.height4s |
| | | } |
| | | ii++ |
| | | cutHeight = window.height4s - startHeight |
| | | // console.log(cutHeight); |
| | | // that.heights = window.height4s; |
| | | // that.heights1 = cutHeight; |
| | | // return; |
| | | if (isCameraTime) { |
| | | clearTimeout(isCameraTime) |
| | | isCameraTime = setTimeout(() => { |
| | | window.takes() |
| | | isCameraTime = null |
| | | }, 200) |
| | | } else { |
| | | isCameraTime = setTimeout(() => { |
| | | window.takes() |
| | | isCameraTime = null |
| | | }, 200) |
| | | } |
| | | window.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 ( |
| | | window.height4s >= that.onelayerNum + 2 && |
| | | window.height4s < that.towlayerNum |
| | | ) { |
| | | window.setViews(that.towlayerNum) |
| | | } |
| | | if ( |
| | | window.height4s >= that.towlayerNum + 2 && |
| | | window.height4s < that.threelayerNum |
| | | ) { |
| | | window.setViews(that.threelayerNum) |
| | | } |
| | | if (that.forlayerNum) { |
| | | if ( |
| | | window.height4s >= that.threelayerNum + 2 && |
| | | window.height4s < that.forlayerNum |
| | | ) { |
| | | window.setViews(that.forlayerNum) |
| | | } |
| | | } |
| | | if (that.fivelayerNum) { |
| | | if ( |
| | | window.height4s >= that.forlayerNum + 2 && |
| | | window.height4s < that.fivelayerNum |
| | | ) { |
| | | window.setViews(that.fivelayerNum) |
| | | } |
| | | } |
| | | if (that.sixlayerNum) { |
| | | if ( |
| | | window.height4s >= that.fivelayerNum + 2 && |
| | | window.height4s < that.sixlayerNum |
| | | ) { |
| | | window.setViews(that.sixlayerNum) |
| | | } |
| | | } |
| | | } |
| | | // 放大 |
| | | } 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 (that.sixlayerNum) { |
| | | if ( |
| | | window.height4s <= that.sixlayerNum && |
| | | window.height4s > that.fivelayerNum - 2 |
| | | ) { |
| | | window.setViews(that.fivelayerNum) |
| | | } |
| | | } |
| | | if (that.fivelayerNum) { |
| | | if ( |
| | | window.height4s <= that.fivelayerNum && |
| | | window.height4s > that.forlayerNum - 2 |
| | | ) { |
| | | window.setViews(that.forlayerNum) |
| | | } |
| | | } |
| | | if (that.forlayerNum) { |
| | | if ( |
| | | window.height4s <= that.forlayerNum && |
| | | window.height4s > that.threelayerNum - 2 |
| | | ) { |
| | | window.setViews(that.threelayerNum) |
| | | } |
| | | } |
| | | if ( |
| | | window.height4s <= that.threelayerNum - 2 && |
| | | window.height4s > that.towlayerNum - 2 |
| | | ) { |
| | | window.setViews(that.towlayerNum) |
| | | } |
| | | if ( |
| | | window.height4s <= that.towlayerNum - 2 && |
| | | window.height4s > that.onelayerNum |
| | | ) { |
| | | window.setViews(that.onelayerNum) |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | |
| | | // 地图点击事件 |
| | | // global.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: "地图点击", |
| | | // } |
| | | // ); |
| | | // }); |
| | | |
| | | // 白模型↓ |
| | | // const layer = new DC.TilesetLayer("layer"); |
| | | // global.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)"], |
| | | // ], |
| | | // }; |
| | | |
| | | // global.viewer.use(new DC.Measure()); |
| | | |
| | | // tileset.setStyle(style); |
| | | // layer.addOverlay(tileset); |
| | | // global.viewer.flyTo(tileset); |
| | | // 白模型↑ |
| | | |
| | | // 精细模型↓ |
| | | window.tilesetLayer = new global.DC.TilesetLayer('tilesetLayer') |
| | | global.viewer.addLayer(window.tilesetLayer) |
| | | window.tileset = new global.DC.Tileset('/mx/tileset.json', { |
| | | luminanceAtZenith: 0.5 |
| | | }) |
| | | |
| | | // window.tilesetLayer.addOverlay(window.tileset); |
| | | // window.tilesetLayer.show = false; |
| | | |
| | | window.silhouetteBlue = |
| | | global.DC.Namespace.Cesium.PostProcessStageLibrary.createEdgeDetectionStage() |
| | | window.silhouetteBlue.uniforms.color = |
| | | global.DC.Namespace.Cesium.Color.fromBytes(9, 162, 40) |
| | | window.silhouetteBlue.uniforms.length = 0.01 |
| | | window.silhouetteBlue.selected = [] |
| | | |
| | | global.viewer.scene.postProcessStages.add( |
| | | global.DC.Namespace.Cesium.PostProcessStageLibrary.createSilhouetteStage( |
| | | [window.silhouetteBlue] |
| | | ) |
| | | ) |
| | | |
| | | window.highlighted = { |
| | | feature: undefined, |
| | | originalColor: new global.DC.Namespace.Cesium.Color() |
| | | } |
| | | |
| | | window.selected = { |
| | | feature: undefined, |
| | | originalColor: new global.DC.Namespace.Cesium.Color() |
| | | } |
| | | |
| | | // 点击事件 |
| | | window.tileset.on(global.DC.MouseEventType.CLICK, (e) => { |
| | | global.viewer.scene.globe.depthTestAgainstTerrain = false |
| | | // console.log(e); |
| | | |
| | | // global.viewer.flyToPosition( |
| | | // new global.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, |
| | | } |
| | | ) |
| | | // return; |
| | | // 高亮 |
| | | window.silhouetteBlue.selected = [] |
| | | |
| | | if (global.DC.Namespace.Cesium.defined(window.highlighted.feature)) { |
| | | window.highlighted.feature.color = window.highlighted.originalColor |
| | | window.highlighted.feature = undefined |
| | | } |
| | | |
| | | if (e.feature !== window.selected.feature) { |
| | | window.silhouetteBlue.selected = [e.feature] |
| | | |
| | | window.highlighted.feature = e.feature |
| | | |
| | | global.DC.Namespace.Cesium.Color.clone( |
| | | e.feature.color, |
| | | window.highlighted.originalColor |
| | | ) |
| | | e.feature.color = global.DC.Namespace.Cesium.Color.fromBytes( |
| | | 155, |
| | | 255, |
| | | 175 |
| | | ) |
| | | } |
| | | }) |
| | | |
| | | // 移动事件 |
| | | // window.tileset.on(global.DC.MouseEventType.MOUSE_MOVE, (e) => { |
| | | // window.silhouetteBlue.selected = []; |
| | | |
| | | // if (global.DC.Namespace.Cesium.defined(window.highlighted.feature)) { |
| | | // window.highlighted.feature.color = window.highlighted.originalColor; |
| | | // window.highlighted.feature = undefined; |
| | | // } |
| | | |
| | | // if (e.feature !== window.selected.feature) { |
| | | // window.silhouetteBlue.selected = [e.feature]; |
| | | |
| | | // window.highlighted.feature = e.feature; |
| | | |
| | | // global.DC.Namespace.Cesium.Color.clone( |
| | | // e.feature.color, |
| | | // window.highlighted.originalColor |
| | | // ); |
| | | // e.feature.color = global.DC.Namespace.Cesium.Color.fromBytes( |
| | | // 155, |
| | | // 255, |
| | | // 175 |
| | | // ); |
| | | // } |
| | | // }); |
| | | // window.tilesetLayer["changesilhouetteBlue"] = () => { |
| | | // window.silhouetteBlue.selected = []; |
| | | // }; |
| | | // window.tilesetLayer.show = false; |
| | | // 精细模型↑ |
| | | |
| | | // 2.5D贴图↓ |
| | | window.usetowpointfive = () => { |
| | | window.provider = |
| | | // new global.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 global.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 global.DC.Namespace.Cesium.ArcGisMapServerImageryProvider({ |
| | | // url: "http://arcgis.jxpskj.com:6080/arcgis/rest/services/PingXiang25DMapDN/MapServer", |
| | | // }); |
| | | new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ |
| | | url: '/wp/{z}/{x}/{y}.png', |
| | | fileExtension: 'png' |
| | | }) |
| | | return global.viewer.imageryLayers.addImageryProvider(window.provider) |
| | | } |
| | | |
| | | window.newLayer = window.usetowpointfive() |
| | | // 2.5d贴图事件 |
| | | |
| | | 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) |
| | | |
| | | // var select = { |
| | | // overlay: undefined, |
| | | // color: undefined, |
| | | // }; |
| | | global.viewer.on(global.DC.MouseEventType.CLICK, (e) => { |
| | | // console.log(e); |
| | | 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]) |
| | | } |
| | | } |
| | | }) |
| | | |
| | | // 2.5D贴图↑ |
| | | // let startPoint; |
| | | if (true) { |
| | | window.startPointFn = () => { |
| | | window.doit2 = (int, h) => { |
| | | global.viewer.camera.setView({ |
| | | // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州 |
| | | // fromDegrees()方法,将经纬度和高程转换为世界坐标 |
| | | destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees( |
| | | // 114.0351, |
| | | // 27.6314, |
| | | // 200.0 |
| | | int[0], |
| | | int[1], |
| | | int[2] |
| | | ), |
| | | orientation: { |
| | | // 指向 |
| | | heading: global.DC.Namespace.Cesium.Math.toRadians(h[0]), |
| | | // 视角 |
| | | pitch: global.DC.Namespace.Cesium.Math.toRadians(h[1]), |
| | | roll: h[2] |
| | | } |
| | | }) |
| | | } |
| | | that.dimension == '2.5D' |
| | | ? window.doit2( |
| | | [that.mapCenter[0], that.mapCenter[1], that.frislayertHeight], |
| | | // [114.04062292, 27.62666834, 220.0], |
| | | [ |
| | | that.dimensionData.heading, |
| | | that.dimensionData.pitch, |
| | | that.dimensionData.roll |
| | | ] |
| | | ) |
| | | : window.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( |
| | | // global.viewer, |
| | | // position, |
| | | // { |
| | | // radius: 2000, |
| | | // debugExtent: true, |
| | | // } |
| | | // ); |
| | | |
| | | // const currentViewRect = global.viewer.camera.computeViewRectangle();//东南西北数据 |
| | | // console.log(currentViewRect, 78); |
| | | |
| | | // 瀑布流↓ |
| | | window.wallLayer = new global.DC.VectorLayer('wallLayer') |
| | | // global.viewer.addLayer(wallLayer); |
| | | // var arr = that.wallArr; |
| | | // arr.forEach((item) => { |
| | | // item = item.join(","); |
| | | // }); |
| | | // arr = arr.join(";"); |
| | | // const wall = new global.DC.Wall(arr); |
| | | // wall.setStyle({ |
| | | // material: new global.DC.WallTrailMaterialProperty({ |
| | | // color: global.DC.Namespace.Cesium.Color.fromBytes(0, 142, 255, 150), |
| | | // // color: global.DC.Color.DEEPSKYBLUE, |
| | | // speed: 4, |
| | | // }), |
| | | // }); |
| | | // wallLayer.addOverlay(wall); |
| | | |
| | | // global.viewer.use(new global.DC.Measure()); |
| | | // 瀑布流↑ |
| | | |
| | | // 传入store |
| | | // that.$store.commit("MSET_MODEOLS", { |
| | | // tilesetLayer: window.tilesetLayer, |
| | | // // tileset: window.tileset, |
| | | // newLayer: window.newLayer, |
| | | // wallLayer: window.wallLayer, |
| | | // usetowpointfive: window.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"); |
| | | |
| | | global.viewer.compass.enable = false |
| | | global.viewer.zoomController.enable = true |
| | | global.viewer.locationBar.enable = false |
| | | global.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.forlayerNum : that.threelayerNum, |
| | | that.sixlayerNum |
| | | ]) // 送入移动端缩放范围 |
| | | 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 () { |
| | | // global.viewer.flyTo(window.tileset); |
| | | // global.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); |
| | | } |
| | | global.viewer.scene.screenSpaceCameraController._minimumZoomRate = 1000 |
| | | global.viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000 |
| | | // 渲染后操作 |
| | | setTimeout(() => { |
| | | window.butbut() |
| | | // return; |
| | | |
| | | // 判断是否有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) |
| | | } |
| | | } |
| | | }, 0) |
| | | } |
| | | global.DC.ready(window.initViewer) |
| | | }, |
| | | methods: { |
| | | openPopupS (position, lntLat, query) { |
| | | const that = this |
| | | // 定制化窗体 |
| | | const d = { |
| | | position, |
| | | lntLat, |
| | | query: { introduce: position, address: lntLat, ...(query || {}) }, |
| | | useJWD: true // 仅使用经纬度 |
| | | } |
| | | console.log(d) |
| | | that.$store.dispatch('setMobileWindows', d) |
| | | window.initViewer = () => { |
| | | global.viewer = new global.DC.Viewer("mobile-viewer-container", { |
| | | contextOptions: { |
| | | webgl: { |
| | | stencil: true, |
| | | preserveDrawingBuffer: true, |
| | | }, |
| | | }, |
| | | flytos (jd, wd) { |
| | | const height = this.frislayertHeight |
| | | this.$store.dispatch('mapFlyTo', { |
| | | lntLat: [jd, wd, height], // 114.04020791, 27.62934732 |
| | | heading: 0, |
| | | pitch: -90, |
| | | roll: 0, |
| | | noOpen: true |
| | | }) |
| | | }); |
| | | |
| | | // viewer = global.viewer; |
| | | that.$refs.mobileLeftNav.initialize(); |
| | | // that.$store.commit("MSET_VIEWER", viewer); |
| | | // window.mviewer = viewer; |
| | | // that.$store.commit("MSET_DC", DC); |
| | | global.viewer.popup.hide(); |
| | | |
| | | // const baselayer = DC.ImageryLayerFactory.createArcGisImageryLayer({ |
| | | // url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", |
| | | // }); |
| | | window.baselayer = global.DC.ImageryLayerFactory.createImageryLayer( |
| | | global.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", // 行政区划 |
| | | } |
| | | } |
| | | } |
| | | ); |
| | | // global.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", |
| | | // }); |
| | | // global.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", |
| | | // }); |
| | | // global.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", |
| | | // }); |
| | | // global.viewer.addBaseLayer(baselayer_ter, { |
| | | // iconUrl: "examples/images/icon/ter.png", |
| | | // name: "地形", |
| | | // }); |
| | | |
| | | // 地图移动事件 |
| | | 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.SceneEventType.CAMERA_MOVE_END, (e) => { |
| | | global.viewer.on(global.DC.SceneEventType.CAMERA_CHANGED, (e) => { |
| | | // 相机移动最后参数 |
| | | // 控制高度 |
| | | // return; |
| | | const isSet = that.dimension != "3D"; |
| | | window.height1s = Math.ceil( |
| | | global.viewer.camera.positionCartographic.height |
| | | ); |
| | | window.conBack = (height) => { |
| | | global.viewer.camera.setView({ |
| | | destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | global.viewer.camera.positionCartographic.longitude, |
| | | |
| | | global.viewer.camera.positionCartographic.latitude, |
| | | height |
| | | ), |
| | | 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, |
| | | }, |
| | | }); |
| | | }; |
| | | // if (height < 300) { |
| | | // conBack(300); |
| | | // } |
| | | // if (height > 2000) { |
| | | // conBack(2000); |
| | | // } |
| | | // if (height <= 79 && isSet) { |
| | | // conBack(79); |
| | | // } |
| | | if (window.height1s <= that.onelayerNum - 1 && isSet) { |
| | | window.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); |
| | | // } |
| | | // const usMun = that.forlayerNum ? that.forlayerNum : that.threelayerNum; |
| | | const usMun = that.sixlayerNum; |
| | | if (window.height1s > usMun && isSet) { |
| | | window.conBack(usMun); |
| | | } |
| | | }); |
| | | |
| | | // 按钮事件 |
| | | window.butSetViews = (num) => { |
| | | global.viewer.camera.flyTo({ |
| | | destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | global.viewer.camera.positionCartographic.longitude, |
| | | global.viewer.camera.positionCartographic.latitude, |
| | | num |
| | | ), |
| | | orientation: { |
| | | // 指向 |
| | | heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), |
| | | // 视角 |
| | | pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), |
| | | roll: 0.0, |
| | | }, |
| | | duration: 0.5, // 定位的时间间隔 |
| | | }); |
| | | // overii(); |
| | | }; |
| | | window.butbut = function () { |
| | | // return; |
| | | // 放大 |
| | | document.querySelector(".dc-zoom-controller").children[0].onclick = |
| | | function () { |
| | | if (that.dimension == "2.5D") { |
| | | window.height2s = Math.ceil( |
| | | global.viewer.camera.positionCartographic.height |
| | | ); |
| | | // if (height > 180) { |
| | | // butSetViews(160); |
| | | // return; |
| | | // } |
| | | |
| | | // if (height > 140) { |
| | | // butSetViews(120); |
| | | // return; |
| | | // } |
| | | |
| | | // if (height > 100) { |
| | | // butSetViews(80); |
| | | // } |
| | | if (that.sixlayerNum) { |
| | | if ( |
| | | window.height2s > |
| | | that.sixlayerNum - that.intervallayerNum |
| | | ) { |
| | | window.butSetViews(that.fivelayerNum); |
| | | return; |
| | | } |
| | | } |
| | | if (that.fivelayerNum) { |
| | | if ( |
| | | window.height2s > |
| | | that.fivelayerNum - that.intervallayerNum |
| | | ) { |
| | | window.butSetViews(that.forlayerNum); |
| | | return; |
| | | } |
| | | } |
| | | if (that.forlayerNum) { |
| | | if ( |
| | | window.height2s > |
| | | that.forlayerNum - that.intervallayerNum |
| | | ) { |
| | | window.butSetViews(that.threelayerNum); |
| | | return; |
| | | } |
| | | } |
| | | |
| | | if ( |
| | | window.height2s > |
| | | that.threelayerNum - that.intervallayerNum |
| | | ) { |
| | | window.butSetViews(that.towlayerNum); |
| | | return; |
| | | } |
| | | |
| | | if (window.height2s > that.towlayerNum - that.intervallayerNum) { |
| | | window.butSetViews(that.onelayerNum); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | // 缩小 |
| | | document.querySelector(".dc-zoom-controller").children[2].onclick = |
| | | function () { |
| | | if (that.dimension == "2.5D") { |
| | | window.height3s = Math.ceil( |
| | | global.viewer.camera.positionCartographic.height |
| | | ); |
| | | console.log(window.height3s); |
| | | |
| | | // if (height <= 100) { |
| | | // butSetViews(120); |
| | | // } |
| | | |
| | | // if (height > 100 && height <= 140) { |
| | | // butSetViews(160); |
| | | // } |
| | | |
| | | // if (height > 140 && height < 180) { |
| | | // butSetViews(200); |
| | | // } |
| | | |
| | | if (window.height3s <= that.towlayerNum - that.intervallayerNum) { |
| | | window.butSetViews(that.towlayerNum); |
| | | } |
| | | |
| | | if ( |
| | | window.height3s > that.towlayerNum - that.intervallayerNum && |
| | | window.height3s <= that.threelayerNum - that.intervallayerNum |
| | | ) { |
| | | window.butSetViews(that.threelayerNum); |
| | | } |
| | | |
| | | if (that.forlayerNum) { |
| | | if ( |
| | | window.height3s > |
| | | that.threelayerNum - that.intervallayerNum && |
| | | window.height3s < that.forlayerNum - that.intervallayerNum |
| | | ) { |
| | | window.butSetViews(that.forlayerNum); |
| | | } |
| | | } |
| | | if (that.fivelayerNum) { |
| | | if ( |
| | | window.height3s > that.forlayerNum - that.intervallayerNum && |
| | | window.height3s < that.fivelayerNum - that.intervallayerNum |
| | | ) { |
| | | window.butSetViews(that.fivelayerNum); |
| | | } |
| | | } |
| | | if (that.sixlayerNum) { |
| | | if ( |
| | | window.height3s > that.fivelayerNum - that.intervallayerNum && |
| | | window.height3s < that.sixlayerNum - that.intervallayerNum |
| | | ) { |
| | | window.butSetViews(that.sixlayerNum); |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | // 滚轮事件 |
| | | // 指示器 |
| | | var ii = 1; |
| | | var startHeight = 0; |
| | | var cutHeight = 0; |
| | | var overii = function () { |
| | | ii = 1; |
| | | startHeight = 0; |
| | | cutHeight = 0; |
| | | }; |
| | | window.setViews = (num) => { |
| | | global.viewer.camera.flyTo({ |
| | | destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | global.viewer.camera.positionCartographic.longitude, |
| | | global.viewer.camera.positionCartographic.latitude, |
| | | num |
| | | ), |
| | | orientation: { |
| | | // 指向 |
| | | heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), |
| | | // 视角 |
| | | pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), |
| | | roll: 0.0, |
| | | }, |
| | | duration: 0.5, // 定位的时间间隔 |
| | | }); |
| | | overii(); |
| | | }; |
| | | var isCameraTime = null; |
| | | global.viewer.on(global.DC.SceneEventType.CAMERA_CHANGED, (e) => { |
| | | if (that.dimension == "2.5D") { |
| | | // console.log(e); |
| | | window.height4s = Math.ceil( |
| | | global.viewer.camera.positionCartographic.height |
| | | ); |
| | | if (ii == 1 && startHeight == 0) { |
| | | startHeight = window.height4s; |
| | | } |
| | | ii++; |
| | | cutHeight = window.height4s - startHeight; |
| | | // console.log(cutHeight); |
| | | // that.heights = window.height4s; |
| | | // that.heights1 = cutHeight; |
| | | // return; |
| | | if (isCameraTime) { |
| | | clearTimeout(isCameraTime); |
| | | isCameraTime = setTimeout(() => { |
| | | window.takes(); |
| | | isCameraTime = null; |
| | | }, 200); |
| | | } else { |
| | | isCameraTime = setTimeout(() => { |
| | | window.takes(); |
| | | isCameraTime = null; |
| | | }, 200); |
| | | } |
| | | window.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 ( |
| | | window.height4s >= that.onelayerNum + 2 && |
| | | window.height4s < that.towlayerNum |
| | | ) { |
| | | window.setViews(that.towlayerNum); |
| | | } |
| | | if ( |
| | | window.height4s >= that.towlayerNum + 2 && |
| | | window.height4s < that.threelayerNum |
| | | ) { |
| | | window.setViews(that.threelayerNum); |
| | | } |
| | | if (that.forlayerNum) { |
| | | if ( |
| | | window.height4s >= that.threelayerNum + 2 && |
| | | window.height4s < that.forlayerNum |
| | | ) { |
| | | window.setViews(that.forlayerNum); |
| | | } |
| | | } |
| | | if (that.fivelayerNum) { |
| | | if ( |
| | | window.height4s >= that.forlayerNum + 2 && |
| | | window.height4s < that.fivelayerNum |
| | | ) { |
| | | window.setViews(that.fivelayerNum); |
| | | } |
| | | } |
| | | if (that.sixlayerNum) { |
| | | if ( |
| | | window.height4s >= that.fivelayerNum + 2 && |
| | | window.height4s < that.sixlayerNum |
| | | ) { |
| | | window.setViews(that.sixlayerNum); |
| | | } |
| | | } |
| | | } |
| | | // 放大 |
| | | } 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 (that.sixlayerNum) { |
| | | if ( |
| | | window.height4s <= that.sixlayerNum && |
| | | window.height4s > that.fivelayerNum - 2 |
| | | ) { |
| | | window.setViews(that.fivelayerNum); |
| | | } |
| | | } |
| | | if (that.fivelayerNum) { |
| | | if ( |
| | | window.height4s <= that.fivelayerNum && |
| | | window.height4s > that.forlayerNum - 2 |
| | | ) { |
| | | window.setViews(that.forlayerNum); |
| | | } |
| | | } |
| | | if (that.forlayerNum) { |
| | | if ( |
| | | window.height4s <= that.forlayerNum && |
| | | window.height4s > that.threelayerNum - 2 |
| | | ) { |
| | | window.setViews(that.threelayerNum); |
| | | } |
| | | } |
| | | if ( |
| | | window.height4s <= that.threelayerNum - 2 && |
| | | window.height4s > that.towlayerNum - 2 |
| | | ) { |
| | | window.setViews(that.towlayerNum); |
| | | } |
| | | if ( |
| | | window.height4s <= that.towlayerNum - 2 && |
| | | window.height4s > that.onelayerNum |
| | | ) { |
| | | window.setViews(that.onelayerNum); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | // 地图点击事件 |
| | | // global.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: "地图点击", |
| | | // } |
| | | // ); |
| | | // }); |
| | | |
| | | // 白模型↓ |
| | | // const layer = new DC.TilesetLayer("layer"); |
| | | // global.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)"], |
| | | // ], |
| | | // }; |
| | | |
| | | // global.viewer.use(new DC.Measure()); |
| | | |
| | | // tileset.setStyle(style); |
| | | // layer.addOverlay(tileset); |
| | | // global.viewer.flyTo(tileset); |
| | | // 白模型↑ |
| | | |
| | | // 精细模型↓ |
| | | window.tilesetLayer = new global.DC.TilesetLayer("tilesetLayer"); |
| | | global.viewer.addLayer(window.tilesetLayer); |
| | | window.tileset = new global.DC.Tileset("/mx/tileset.json", { |
| | | luminanceAtZenith: 0.5, |
| | | }); |
| | | |
| | | // window.tilesetLayer.addOverlay(window.tileset); |
| | | // window.tilesetLayer.show = false; |
| | | |
| | | window.silhouetteBlue = |
| | | global.DC.Namespace.Cesium.PostProcessStageLibrary.createEdgeDetectionStage(); |
| | | window.silhouetteBlue.uniforms.color = |
| | | global.DC.Namespace.Cesium.Color.fromBytes(9, 162, 40); |
| | | window.silhouetteBlue.uniforms.length = 0.01; |
| | | window.silhouetteBlue.selected = []; |
| | | |
| | | global.viewer.scene.postProcessStages.add( |
| | | global.DC.Namespace.Cesium.PostProcessStageLibrary.createSilhouetteStage( |
| | | [window.silhouetteBlue] |
| | | ) |
| | | ); |
| | | |
| | | window.highlighted = { |
| | | feature: undefined, |
| | | originalColor: new global.DC.Namespace.Cesium.Color(), |
| | | }; |
| | | |
| | | window.selected = { |
| | | feature: undefined, |
| | | originalColor: new global.DC.Namespace.Cesium.Color(), |
| | | }; |
| | | |
| | | // 点击事件 |
| | | window.tileset.on(global.DC.MouseEventType.CLICK, (e) => { |
| | | global.viewer.scene.globe.depthTestAgainstTerrain = false; |
| | | // console.log(e); |
| | | |
| | | // global.viewer.flyToPosition( |
| | | // new global.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, |
| | | } |
| | | ); |
| | | // return; |
| | | // 高亮 |
| | | window.silhouetteBlue.selected = []; |
| | | |
| | | if (global.DC.Namespace.Cesium.defined(window.highlighted.feature)) { |
| | | window.highlighted.feature.color = window.highlighted.originalColor; |
| | | window.highlighted.feature = undefined; |
| | | } |
| | | |
| | | if (e.feature !== window.selected.feature) { |
| | | window.silhouetteBlue.selected = [e.feature]; |
| | | |
| | | window.highlighted.feature = e.feature; |
| | | |
| | | global.DC.Namespace.Cesium.Color.clone( |
| | | e.feature.color, |
| | | window.highlighted.originalColor |
| | | ); |
| | | e.feature.color = global.DC.Namespace.Cesium.Color.fromBytes( |
| | | 155, |
| | | 255, |
| | | 175 |
| | | ); |
| | | } |
| | | }); |
| | | |
| | | // 移动事件 |
| | | // window.tileset.on(global.DC.MouseEventType.MOUSE_MOVE, (e) => { |
| | | // window.silhouetteBlue.selected = []; |
| | | |
| | | // if (global.DC.Namespace.Cesium.defined(window.highlighted.feature)) { |
| | | // window.highlighted.feature.color = window.highlighted.originalColor; |
| | | // window.highlighted.feature = undefined; |
| | | // } |
| | | |
| | | // if (e.feature !== window.selected.feature) { |
| | | // window.silhouetteBlue.selected = [e.feature]; |
| | | |
| | | // window.highlighted.feature = e.feature; |
| | | |
| | | // global.DC.Namespace.Cesium.Color.clone( |
| | | // e.feature.color, |
| | | // window.highlighted.originalColor |
| | | // ); |
| | | // e.feature.color = global.DC.Namespace.Cesium.Color.fromBytes( |
| | | // 155, |
| | | // 255, |
| | | // 175 |
| | | // ); |
| | | // } |
| | | // }); |
| | | // window.tilesetLayer["changesilhouetteBlue"] = () => { |
| | | // window.silhouetteBlue.selected = []; |
| | | // }; |
| | | // window.tilesetLayer.show = false; |
| | | // 精细模型↑ |
| | | |
| | | // 2.5D贴图↓ |
| | | window.usetowpointfive = () => { |
| | | window.provider = |
| | | // new global.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 global.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 global.DC.Namespace.Cesium.ArcGisMapServerImageryProvider({ |
| | | // url: "http://arcgis.jxpskj.com:6080/arcgis/rest/services/PingXiang25DMapDN/MapServer", |
| | | // }); |
| | | new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ |
| | | url: "/wp/{z}/{x}/{y}.png", |
| | | fileExtension: "png", |
| | | }); |
| | | return global.viewer.imageryLayers.addImageryProvider(window.provider); |
| | | }; |
| | | |
| | | window.newLayer = window.usetowpointfive(); |
| | | // 2.5d贴图事件 |
| | | |
| | | 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); |
| | | |
| | | // var select = { |
| | | // overlay: undefined, |
| | | // color: undefined, |
| | | // }; |
| | | global.viewer.on(global.DC.MouseEventType.CLICK, (e) => { |
| | | // console.log(e); |
| | | 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]); |
| | | } |
| | | } |
| | | }); |
| | | |
| | | // 2.5D贴图↑ |
| | | // let startPoint; |
| | | if (true) { |
| | | window.startPointFn = () => { |
| | | window.doit2 = (int, h) => { |
| | | global.viewer.camera.setView({ |
| | | // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州 |
| | | // fromDegrees()方法,将经纬度和高程转换为世界坐标 |
| | | destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees( |
| | | // 114.0351, |
| | | // 27.6314, |
| | | // 200.0 |
| | | int[0], |
| | | int[1], |
| | | int[2] |
| | | ), |
| | | orientation: { |
| | | // 指向 |
| | | heading: global.DC.Namespace.Cesium.Math.toRadians(h[0]), |
| | | // 视角 |
| | | pitch: global.DC.Namespace.Cesium.Math.toRadians(h[1]), |
| | | roll: h[2], |
| | | }, |
| | | }); |
| | | }; |
| | | that.dimension == "2.5D" |
| | | ? window.doit2( |
| | | [that.mapCenter[0], that.mapCenter[1], that.frislayertHeight], |
| | | // [114.04062292, 27.62666834, 220.0], |
| | | [ |
| | | that.dimensionData.heading, |
| | | that.dimensionData.pitch, |
| | | that.dimensionData.roll, |
| | | ] |
| | | ) |
| | | : window.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( |
| | | // global.viewer, |
| | | // position, |
| | | // { |
| | | // radius: 2000, |
| | | // debugExtent: true, |
| | | // } |
| | | // ); |
| | | |
| | | // const currentViewRect = global.viewer.camera.computeViewRectangle();//东南西北数据 |
| | | // console.log(currentViewRect, 78); |
| | | |
| | | // 瀑布流↓ |
| | | window.wallLayer = new global.DC.VectorLayer("wallLayer"); |
| | | // global.viewer.addLayer(wallLayer); |
| | | // var arr = that.wallArr; |
| | | // arr.forEach((item) => { |
| | | // item = item.join(","); |
| | | // }); |
| | | // arr = arr.join(";"); |
| | | // const wall = new global.DC.Wall(arr); |
| | | // wall.setStyle({ |
| | | // material: new global.DC.WallTrailMaterialProperty({ |
| | | // color: global.DC.Namespace.Cesium.Color.fromBytes(0, 142, 255, 150), |
| | | // // color: global.DC.Color.DEEPSKYBLUE, |
| | | // speed: 4, |
| | | // }), |
| | | // }); |
| | | // wallLayer.addOverlay(wall); |
| | | |
| | | // global.viewer.use(new global.DC.Measure()); |
| | | // 瀑布流↑ |
| | | |
| | | // 传入store |
| | | // that.$store.commit("MSET_MODEOLS", { |
| | | // tilesetLayer: window.tilesetLayer, |
| | | // // tileset: window.tileset, |
| | | // newLayer: window.newLayer, |
| | | // wallLayer: window.wallLayer, |
| | | // usetowpointfive: window.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"); |
| | | |
| | | global.viewer.compass.enable = false; |
| | | global.viewer.zoomController.enable = true; |
| | | global.viewer.locationBar.enable = false; |
| | | global.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.forlayerNum : that.threelayerNum, |
| | | that.sixlayerNum, |
| | | ]); // 送入移动端缩放范围 |
| | | 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 () { |
| | | // global.viewer.flyTo(window.tileset); |
| | | // global.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); |
| | | } |
| | | global.viewer.scene.screenSpaceCameraController._minimumZoomRate = 1000; |
| | | global.viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000; |
| | | // 渲染后操作 |
| | | setTimeout(() => { |
| | | window.butbut(); |
| | | // return; |
| | | |
| | | // 判断是否有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); |
| | | } |
| | | } |
| | | }, 0); |
| | | }; |
| | | global.DC.ready(window.initViewer); |
| | | }, |
| | | methods: { |
| | | openPopupS(position, lntLat, query) { |
| | | const that = this; |
| | | // 定制化窗体 |
| | | const d = { |
| | | position, |
| | | lntLat, |
| | | 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", { |
| | | lntLat: [jd, wd, height], // 114.04020791, 27.62934732 |
| | | heading: 0, |
| | | pitch: -90, |
| | | roll: 0, |
| | | noOpen: true, |
| | | }); |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scope> |
| | | #mobile-viewer-container { |
| | | width: 100%; |
| | | height: 100%; |
| | | position: relative; |
| | | width: 100%; |
| | | height: 100%; |
| | | position: relative; |
| | | } |
| | | .heights { |
| | | background-color: #fff; |
| | | font-size: 24px; |
| | | position: fixed; |
| | | top: 0; |
| | | right: 0; |
| | | z-index: 9999999; |
| | | background-color: #fff; |
| | | font-size: 24px; |
| | | position: fixed; |
| | | top: 0; |
| | | right: 0; |
| | | z-index: 9999999; |
| | | } |
| | | </style> |