Merge branch 'master' of http://192.168.0.105:10010/r/school-web
| | |
| | | <template> |
| | | <div class="m-left-control"> |
| | | <div class="m-l-inbut zoom-in" @click="zoomIn()"> |
| | | <div class="m-left-control"> |
| | | <!-- <div class="m-l-inbut zoom-in" @click="zoomIn()"> |
| | | <i class="el-icon-refresh"></i> |
| | | </div> |
| | | <!-- <div |
| | | </div> --> |
| | | <!-- <div |
| | | class="m-l-inbut zoom-in m-l-inbut-2d" |
| | | :class="{ active: dimension == '3D' }" |
| | | @click="zoomIn('3D')" |
| | | > |
| | | 3 维 |
| | | </div>--> |
| | | <div |
| | | class="m-l-inbut zoom-in m-l-inbut-3d" |
| | | :class="{ active: dimension == '2.5D' }" |
| | | @click="zoomIn('2.5D')" |
| | | >3D</div> |
| | | <div |
| | | class="m-l-inbut zoom-in m-l-inbut-3d" |
| | | :class="{ active: dimension == '2.5D' }" |
| | | @click="zoomIn('2.5D')" |
| | | > |
| | | 3D |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { mapGetters } from 'vuex' |
| | | import { mapGetters } from "vuex"; |
| | | export default { |
| | | name: 'mobileCortrol', |
| | | data () { |
| | | return { |
| | | name: "mobileCortrol", |
| | | data() { |
| | | return {}; |
| | | }, |
| | | computed: { |
| | | ...mapGetters(["mviewer", "startPointFn", "dimension"]), |
| | | }, |
| | | created() {}, |
| | | methods: { |
| | | zoomIn(val) { |
| | | // this.$store.dispatch("mapFlyTo", { |
| | | // //飞入 |
| | | // lntLat: [115.87988885, 28.72502592, 2100], |
| | | // // lntLat: [115.87186406, 28.74449337, 1200], |
| | | // // lntLat: [121.50492752204283, 31.21567802276832, 2530], |
| | | // heading: 0, |
| | | // pitch: -45, |
| | | // roll: 0, |
| | | // noOpen: true, |
| | | // }); |
| | | if (val) { |
| | | if (this.dimension != val) { |
| | | this.$store.dispatch("MSET_DIMENSIONS", val); |
| | | } |
| | | return; |
| | | } |
| | | this.startPointFn(); |
| | | }, |
| | | computed: { |
| | | ...mapGetters(['mviewer', 'startPointFn', 'dimension']) |
| | | }, |
| | | created () { |
| | | }, |
| | | methods: { |
| | | zoomIn (val) { |
| | | // this.$store.dispatch("mapFlyTo", { |
| | | // //飞入 |
| | | // lntLat: [115.87988885, 28.72502592, 2100], |
| | | // // lntLat: [115.87186406, 28.74449337, 1200], |
| | | // // lntLat: [121.50492752204283, 31.21567802276832, 2530], |
| | | // heading: 0, |
| | | // pitch: -45, |
| | | // roll: 0, |
| | | // noOpen: true, |
| | | // }); |
| | | if (val) { |
| | | if (this.dimension != val) { |
| | | this.$store.dispatch('MSET_DIMENSIONS', val) |
| | | } |
| | | return |
| | | } |
| | | this.startPointFn() |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .m-left-control { |
| | | position: fixed; |
| | | left: 20px; |
| | | top: 93px; |
| | | height: 10px; |
| | | z-index: 20 !important; |
| | | .m-l-inbut { |
| | | width: 35px; |
| | | height: 35px; |
| | | background-color: rgb(33, 150, 243); |
| | | // background-color: white; |
| | | // stroke-width: 10; |
| | | // stroke: #fff; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | color: white; |
| | | font-size: 22px; |
| | | margin-bottom: 12px; |
| | | border-radius: 5px; |
| | | } |
| | | .m-l-inbut-2d { |
| | | position: relative; |
| | | background-color: white; |
| | | top: 60px; |
| | | font-size: 12px; |
| | | color: #000; |
| | | border: 1px solid #a4d1ff; |
| | | border-radius: 5px 5px 0 0; |
| | | // box-shadow: 0px 0px 10px #409eff inset; |
| | | // &:hover { |
| | | // background-color: rgb(21, 136, 230); |
| | | // box-shadow: -2px -2px 3px rgb(3, 74, 136) inset; |
| | | // } |
| | | } |
| | | .m-l-inbut-3d { |
| | | @extend .m-l-inbut-2d; |
| | | top: 45px; |
| | | border-radius: 0 0 5px 5px; |
| | | } |
| | | position: fixed; |
| | | left: 20px; |
| | | top: 93px; |
| | | height: 10px; |
| | | z-index: 20 !important; |
| | | .m-l-inbut { |
| | | width: 35px; |
| | | height: 35px; |
| | | background-color: rgb(33, 150, 243); |
| | | // background-color: white; |
| | | // stroke-width: 10; |
| | | // stroke: #fff; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | color: white; |
| | | font-size: 22px; |
| | | margin-bottom: 12px; |
| | | border-radius: 5px; |
| | | } |
| | | .m-l-inbut-2d { |
| | | position: relative; |
| | | background-color: white; |
| | | top: 60px; |
| | | font-size: 12px; |
| | | color: #000; |
| | | border: 1px solid #a4d1ff; |
| | | border-radius: 5px 5px 0 0; |
| | | // box-shadow: 0px 0px 10px #409eff inset; |
| | | // &:hover { |
| | | // background-color: rgb(21, 136, 230); |
| | | // box-shadow: -2px -2px 3px rgb(3, 74, 136) inset; |
| | | // } |
| | | } |
| | | .m-l-inbut-3d { |
| | | @extend .m-l-inbut-2d; |
| | | top: 45px; |
| | | border-radius: 0 0 5px 5px; |
| | | } |
| | | |
| | | .active { |
| | | background-color: #409eff; |
| | | border: 1px solid #409eff; |
| | | color: #fff; |
| | | border-radius: 5px; |
| | | z-index: 10; |
| | | // box-shadow: -4px -4px 10px rgb(13, 98, 167) inset; |
| | | // color: rgb(0, 0, 0); |
| | | // box-shadow: -4px -4px 10px rgb(13, 98, 167) inset; |
| | | transform: translateY(1px); |
| | | // position: relative; |
| | | // &::before { |
| | | // top: 1px; |
| | | // left: 1px; |
| | | // position: absolute; |
| | | // content: ""; |
| | | // width: 100%; |
| | | // height: 100%; |
| | | // box-shadow: -2px -2px 15px rgb(4, 95, 170) inset; |
| | | // // border: 1px solid rgb(14, 54, 87); |
| | | // } |
| | | } |
| | | .active { |
| | | background-color: #409eff; |
| | | border: 1px solid #409eff; |
| | | color: #fff; |
| | | border-radius: 5px; |
| | | z-index: 10; |
| | | // box-shadow: -4px -4px 10px rgb(13, 98, 167) inset; |
| | | // color: rgb(0, 0, 0); |
| | | // box-shadow: -4px -4px 10px rgb(13, 98, 167) inset; |
| | | transform: translateY(1px); |
| | | // position: relative; |
| | | // &::before { |
| | | // top: 1px; |
| | | // left: 1px; |
| | | // position: absolute; |
| | | // content: ""; |
| | | // width: 100%; |
| | | // height: 100%; |
| | | // box-shadow: -2px -2px 15px rgb(4, 95, 170) inset; |
| | | // // border: 1px solid rgb(14, 54, 87); |
| | | // } |
| | | } |
| | | } |
| | | </style> |
| | |
| | | <template> |
| | | <div class="m-left-mobileCortrolButtom"> |
| | | <!-- <div class="m-l-inbut" @click="mubiao"><i class="el-icon-s-help"></i></div> --> |
| | | <div class="m-l-inbut" v-show="false"> |
| | | <!-- <i class="el-icon-s-flag"></i> --> |
| | | <el-dropdown trigger="click" @command="handleCommand"> |
| | | <span class="el-dropdown-link icons"> |
| | | <i class="el-icon-s-flag icon"></i> |
| | | </span> |
| | | <el-dropdown-menu slot="dropdown"> |
| | | <el-dropdown-item |
| | | v-for="(item, index) in tabTable" |
| | | :key="index" |
| | | :command="item" |
| | | >{{ item.title }}</el-dropdown-item> |
| | | </el-dropdown-menu> |
| | | </el-dropdown> |
| | | </div> |
| | | <div class="m-l-inbut" @click="openBigPopupAfter"> |
| | | <i class="el-icon-menu"></i> |
| | | </div> |
| | | <!-- <div class="m-l-inbut" @click="openActivity"> |
| | | <div class="m-left-mobileCortrolButtom"> |
| | | <!-- <div class="m-l-inbut" @click="mubiao"><i class="el-icon-s-help"></i></div> --> |
| | | <div class="m-l-inbut" v-show="false"> |
| | | <!-- <i class="el-icon-s-flag"></i> --> |
| | | <el-dropdown trigger="click" @command="handleCommand"> |
| | | <span class="el-dropdown-link icons"> |
| | | <i class="el-icon-s-flag icon"></i> |
| | | </span> |
| | | <el-dropdown-menu slot="dropdown"> |
| | | <el-dropdown-item |
| | | v-for="(item, index) in tabTable" |
| | | :key="index" |
| | | :command="item" |
| | | >{{ item.title }}</el-dropdown-item |
| | | > |
| | | </el-dropdown-menu> |
| | | </el-dropdown> |
| | | </div> |
| | | <div class="m-l-inbut" @click="openBigPopupAfter"> |
| | | <i class="el-icon-menu"></i> |
| | | </div> |
| | | <!-- <div class="m-l-inbut" @click="openActivity"> |
| | | <i class="el-icon-s-opportunity"></i> |
| | | </div>--> |
| | | <!-- <div class="m-l-inbut" @click="goOn"><i class="el-icon-location"></i></div> --> |
| | | <div class="m-l-inbut" @click="zoomIns"> |
| | | <i class="el-icon-refresh"></i> |
| | | </div> |
| | | <div class="m-l-inbut" @click="goOns"><i class="el-icon-location"></i></div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { mapGetters } from 'vuex' |
| | | import { getIp, getUsers } from '@/api/mobile/ip/index' |
| | | import { getListarc } from '@/api/mobile/public/arc' |
| | | import { getActivity } from '@/api/mobile/hd/hd' |
| | | import { mapGetters } from "vuex"; |
| | | import { getIp, getUsers } from "@/api/mobile/ip/index"; |
| | | import { getListarc } from "@/api/mobile/public/arc"; |
| | | import { getActivity } from "@/api/mobile/hd/hd"; |
| | | export default { |
| | | name: 'mobileCortrolButtom', |
| | | data () { |
| | | return { |
| | | tabTable: [], |
| | | ccData: [ |
| | | { |
| | | lnt: 114.03835559, |
| | | lat: 27.63057034 |
| | | }, |
| | | { |
| | | lnt: 114.03971446, |
| | | lat: 27.62986481 |
| | | }, |
| | | { |
| | | lnt: 114.03841654, |
| | | lat: 27.62919726 |
| | | }, |
| | | { |
| | | lnt: 114.039946, |
| | | lat: 27.62847544 |
| | | } |
| | | ] |
| | | name: "mobileCortrolButtom", |
| | | data() { |
| | | return { |
| | | tabTable: [], |
| | | ccData: [ |
| | | { |
| | | lnt: 114.03835559, |
| | | lat: 27.63057034, |
| | | }, |
| | | { |
| | | lnt: 114.03971446, |
| | | lat: 27.62986481, |
| | | }, |
| | | { |
| | | lnt: 114.03841654, |
| | | lat: 27.62919726, |
| | | }, |
| | | { |
| | | lnt: 114.039946, |
| | | lat: 27.62847544, |
| | | }, |
| | | ], |
| | | }; |
| | | }, |
| | | computed: { |
| | | ...mapGetters([ |
| | | "mviewer", |
| | | "openmobileGoTo", |
| | | "dimensionData", |
| | | "startPointFn", |
| | | "dimension", |
| | | ]), |
| | | }, |
| | | created() { |
| | | // this.getStreet(); |
| | | }, |
| | | mounted() {}, |
| | | methods: { |
| | | goOns() { |
| | | let that = this; |
| | | this.$store.commit("GET_NOWPOSITION", (res) => { |
| | | that.$store.dispatch("pcMoveView", { |
| | | jd: res[0], |
| | | wd: res[1], |
| | | viewer: that.mviewer, |
| | | }); |
| | | |
| | | let data = [ |
| | | { |
| | | name: "我的位置", |
| | | jd: res[0], |
| | | wd: res[1], |
| | | }, |
| | | ]; |
| | | that.$store.dispatch("addLabelLayerIconMobelUse", { |
| | | list: data, |
| | | clear: true, |
| | | mviewer: that.mviewer, |
| | | }); |
| | | }); |
| | | }, |
| | | zoomIns(val) { |
| | | // this.$store.dispatch("mapFlyTo", { |
| | | // //飞入 |
| | | // lntLat: [115.87988885, 28.72502592, 2100], |
| | | // // lntLat: [115.87186406, 28.74449337, 1200], |
| | | // // lntLat: [121.50492752204283, 31.21567802276832, 2530], |
| | | // heading: 0, |
| | | // pitch: -45, |
| | | // roll: 0, |
| | | // noOpen: true, |
| | | // }); |
| | | // if (val) { |
| | | // if (this.dimension != val) { |
| | | // this.$store.dispatch("MSET_DIMENSIONS", val); |
| | | // } |
| | | // return; |
| | | // } |
| | | this.startPointFn(); |
| | | }, |
| | | openActivity() { |
| | | const d = { |
| | | main: [ |
| | | { |
| | | name: "活动", |
| | | type: 1, |
| | | method: getActivity, |
| | | }, |
| | | ], |
| | | qurey: "活动", |
| | | }; |
| | | this.$store.commit("MSET_POPUPOUROPENDATA", d); |
| | | this.$store.commit("MSET_BIGPOPUP", { name: "活动" }); |
| | | // this.$store.commit("set_showActivity", true); |
| | | }, |
| | | mubiao() { |
| | | // 测试fllyTo |
| | | }, |
| | | handleCommand(command) { |
| | | const that = this; |
| | | const position = [+command.lnt + 0.00027, +command.lat + 0.00048, 450]; |
| | | console.log(command, "定位"); |
| | | // 定位 |
| | | // this.$store.commit("MSETCC_SETCC", { |
| | | // lntLat: position, |
| | | // }); |
| | | // this.$store.dispatch("mapFlyTo", { |
| | | // //飞入 |
| | | // lntLat: [...position, 450], |
| | | // heading: 0, |
| | | // pitch: -90, |
| | | // roll: 0, |
| | | // noOpen: true, |
| | | // }); |
| | | that.mviewer.camera.setView({ |
| | | // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州 |
| | | // fromDegrees()方法,将经纬度和高程转换为世界坐标 |
| | | // eslint-disable-next-line new-cap |
| | | destination: new global.DC.Namespace.Cesium.Cartesian3.fromDegrees( |
| | | // 114.0351, |
| | | // 27.6314, |
| | | // 200.0 |
| | | position[0], |
| | | position[1], |
| | | position[2] |
| | | ), |
| | | orientation: { |
| | | heading: global.DC.Namespace.Cesium.Math.toRadians( |
| | | that.dimensionData.heading |
| | | ), |
| | | pitch: global.DC.Namespace.Cesium.Math.toRadians( |
| | | that.dimensionData.pitch |
| | | ), |
| | | // heading: data.heading, |
| | | // pitch: data.pitch, |
| | | roll: that.dimensionData.roll, |
| | | }, |
| | | }); |
| | | }, |
| | | openBigPopupAfter() { |
| | | this.$store.commit("MSET_BIGPOPUPAFTER", true); |
| | | }, |
| | | goOn() { |
| | | const that = this; |
| | | this.$store.commit("MSET_OPENMOBILEGOTO", !that.openmobileGoTo); |
| | | // console.log(returnCitySN["cip"]); |
| | | // let data = { |
| | | // ip: returnCitySN["cip"], |
| | | // key: "7WKBZ-QDY62-WEEUG-C7KUN-ADAF5-L5BKZ", |
| | | // }; |
| | | // console.log("定位", data.ip); |
| | | // getIp(data).then((res) => { |
| | | // // getUsers(data).then((res) => { |
| | | // console.log(res); |
| | | // }); |
| | | }, |
| | | getStreet() { |
| | | const that = this; |
| | | getListarc().then((res) => { |
| | | const title = []; |
| | | const data = res.data.data; |
| | | for (let k = 0; k < data.length; k++) { |
| | | title.push({ |
| | | title: data[k].dictValue, |
| | | flag: false, |
| | | key: data[k].dictKey, |
| | | child: [], |
| | | lnt: that.ccData[k].lnt, |
| | | lat: that.ccData[k].lat, |
| | | }); |
| | | } |
| | | // res.data.data.forEach((item) => { |
| | | // title.push({ |
| | | // title: item.dictValue, |
| | | // flag: false, |
| | | // key: item.dictKey, |
| | | // child: [], |
| | | // }); |
| | | // }); |
| | | this.tabTable = title; |
| | | this.$store.commit("MSET_POPUPTABLENAME", title); |
| | | }); |
| | | }, |
| | | computed: { |
| | | ...mapGetters(['mviewer', 'openmobileGoTo', 'dimensionData']) |
| | | }, |
| | | created () { |
| | | // this.getStreet(); |
| | | }, |
| | | mounted () { }, |
| | | methods: { |
| | | openActivity () { |
| | | const d = { |
| | | main: [ |
| | | { |
| | | name: '活动', |
| | | type: 1, |
| | | method: getActivity |
| | | } |
| | | ], |
| | | qurey: '活动' |
| | | } |
| | | this.$store.commit('MSET_POPUPOUROPENDATA', d) |
| | | this.$store.commit('MSET_BIGPOPUP', { name: '活动' }) |
| | | // this.$store.commit("set_showActivity", true); |
| | | }, |
| | | mubiao () { |
| | | // 测试fllyTo |
| | | }, |
| | | handleCommand (command) { |
| | | const that = this |
| | | const position = [+command.lnt + 0.00027, +command.lat + 0.00048, 450] |
| | | console.log(command, '定位') |
| | | // 定位 |
| | | // this.$store.commit("MSETCC_SETCC", { |
| | | // lntLat: position, |
| | | // }); |
| | | // this.$store.dispatch("mapFlyTo", { |
| | | // //飞入 |
| | | // lntLat: [...position, 450], |
| | | // heading: 0, |
| | | // pitch: -90, |
| | | // roll: 0, |
| | | // noOpen: true, |
| | | // }); |
| | | that.mviewer.camera.setView({ |
| | | // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州 |
| | | // fromDegrees()方法,将经纬度和高程转换为世界坐标 |
| | | // eslint-disable-next-line new-cap |
| | | destination: new global.DC.Namespace.Cesium.Cartesian3.fromDegrees( |
| | | // 114.0351, |
| | | // 27.6314, |
| | | // 200.0 |
| | | position[0], |
| | | position[1], |
| | | position[2] |
| | | ), |
| | | orientation: { |
| | | heading: global.DC.Namespace.Cesium.Math.toRadians( |
| | | that.dimensionData.heading |
| | | ), |
| | | pitch: global.DC.Namespace.Cesium.Math.toRadians( |
| | | that.dimensionData.pitch |
| | | ), |
| | | // heading: data.heading, |
| | | // pitch: data.pitch, |
| | | roll: that.dimensionData.roll |
| | | } |
| | | }) |
| | | }, |
| | | openBigPopupAfter () { |
| | | this.$store.commit('MSET_BIGPOPUPAFTER', true) |
| | | }, |
| | | goOn () { |
| | | const that = this |
| | | this.$store.commit('MSET_OPENMOBILEGOTO', !that.openmobileGoTo) |
| | | // console.log(returnCitySN["cip"]); |
| | | // let data = { |
| | | // ip: returnCitySN["cip"], |
| | | // key: "7WKBZ-QDY62-WEEUG-C7KUN-ADAF5-L5BKZ", |
| | | // }; |
| | | // console.log("定位", data.ip); |
| | | // getIp(data).then((res) => { |
| | | // // getUsers(data).then((res) => { |
| | | // console.log(res); |
| | | // }); |
| | | }, |
| | | getStreet () { |
| | | const that = this |
| | | getListarc().then((res) => { |
| | | const title = [] |
| | | const data = res.data.data |
| | | for (let k = 0; k < data.length; k++) { |
| | | title.push({ |
| | | title: data[k].dictValue, |
| | | flag: false, |
| | | key: data[k].dictKey, |
| | | child: [], |
| | | lnt: that.ccData[k].lnt, |
| | | lat: that.ccData[k].lat |
| | | }) |
| | | } |
| | | // res.data.data.forEach((item) => { |
| | | // title.push({ |
| | | // title: item.dictValue, |
| | | // flag: false, |
| | | // key: item.dictKey, |
| | | // child: [], |
| | | // }); |
| | | // }); |
| | | this.tabTable = title |
| | | this.$store.commit('MSET_POPUPTABLENAME', title) |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .m-left-mobileCortrolButtom { |
| | | position: fixed; |
| | | bottom: 35px; |
| | | left: 20px; |
| | | z-index: 200; |
| | | .m-l-inbut { |
| | | float: left; |
| | | width: 39px; |
| | | height: 39px; |
| | | background-color: rgb(33, 150, 243); |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | color: white; |
| | | font-size: 32px; |
| | | margin-left: 12px; |
| | | border-radius: 5px; |
| | | .icons { |
| | | display: inline-block; |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | .icon { |
| | | font-size: 32px; |
| | | color: #fff; |
| | | &::before { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | position: fixed; |
| | | bottom: 35px; |
| | | left: 20px; |
| | | z-index: 200; |
| | | .m-l-inbut { |
| | | float: left; |
| | | width: 39px; |
| | | height: 39px; |
| | | background-color: rgb(33, 150, 243); |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | color: white; |
| | | font-size: 32px; |
| | | margin-left: 12px; |
| | | border-radius: 5px; |
| | | .icons { |
| | | display: inline-block; |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | .icon { |
| | | font-size: 32px; |
| | | color: #fff; |
| | | &::before { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | |
| | | this.$store.commit("MSET_BIGPOPUP", false); |
| | | }, |
| | | getDataHeardDown() { |
| | | if (this.choiceMain == "机构单位" || this.choiceMain == "活动") { |
| | | if (this.choiceMain == "活动") { |
| | | //不请求头部标签页数据 |
| | | this.getOutList(this.choiceKey); |
| | | return; |
| | | } |
| | | if (this.choiceMain == "机构单位") { |
| | | this.getOutList("", this.choiceKey); |
| | | return; |
| | | } |
| | | //获取头下部标签页 |
| | |
| | | }, |
| | | //请求 |
| | | getOutList(campus, type) { |
| | | console.log(this.choiceMain, campus, type, "see"); |
| | | let that = this; |
| | | let d; |
| | | if (this.choiceMain == "机构单位") { |
| | |
| | | height: auto; |
| | | @extend .flexCenter; |
| | | flex-direction: column; |
| | | padding: 5px 0; |
| | | padding: 10px 0; |
| | | .m_p_a_center_group { |
| | | width: 100%; |
| | | height: auto; |
| | |
| | | /* 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"; |
| | | 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, 400.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, //默认高度 |
| | | } |
| | | 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: 80, |
| | | // towlayerNum: 200, |
| | | // threelayerNum: 320, |
| | | // forlayerNum: 440, |
| | | // intervallayerNum: 60, |
| | | // frislayertHeight: 320, //默认高度 |
| | | }; |
| | | }, |
| | | computed: { |
| | | ...mapGetters([ |
| | | "mviewer", |
| | | "MobileWindowsHide", |
| | | "mBigPopup", |
| | | "mBigPopupAfter", |
| | | "iconHide", |
| | | "popupsDom", |
| | | "MobileWindowsHideFixed", |
| | | "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', |
| | | 'MobileWindowsHideFixed', |
| | | '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; |
| | | |
| | | function distanceSurface () { |
| | | viewer.measure.distanceSurface() |
| | | } |
| | | |
| | | 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 global.DC.Viewer('mobile-viewer-container', { |
| | | contextOptions: { |
| | | webgl: { |
| | | stencil: true, |
| | | preserveDrawingBuffer: 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() |
| | | |
| | | // const baselayer = DC.ImageryLayerFactory.createArcGisImageryLayer({ |
| | | // url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", |
| | | // }); |
| | | const 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' // 行政区划 |
| | | } |
| | | ) |
| | | // 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(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(viewer.camera.positionCartographic.height); |
| | | // console.log(height); |
| | | }) |
| | | |
| | | // viewer.on(global.DC.SceneEventType.CAMERA_MOVE_END, (e) => { |
| | | viewer.on(global.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: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | viewer.camera.positionCartographic.longitude, |
| | | 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 (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: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | viewer.camera.positionCartographic.longitude, |
| | | 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(); |
| | | } |
| | | 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: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | viewer.camera.positionCartographic.longitude, |
| | | 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 |
| | | viewer.on(global.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); |
| | | 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) |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | |
| | | // 地图点击事件 |
| | | // 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"); |
| | | // 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 global.DC.TilesetLayer('tilesetLayer') |
| | | viewer.addLayer(tilesetLayer) |
| | | const tileset = new global.DC.Tileset('/mx/tileset.json', { |
| | | luminanceAtZenith: 0.5 |
| | | }) |
| | | |
| | | // tilesetLayer.addOverlay(tileset); |
| | | // tilesetLayer.show = false; |
| | | |
| | | const 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 = [] |
| | | |
| | | viewer.scene.postProcessStages.add( |
| | | global.DC.Namespace.Cesium.PostProcessStageLibrary.createSilhouetteStage([ |
| | | silhouetteBlue |
| | | ]) |
| | | ) |
| | | |
| | | var highlighted = { |
| | | feature: undefined, |
| | | originalColor: new global.DC.Namespace.Cesium.Color() |
| | | } |
| | | |
| | | var selected = { |
| | | feature: undefined, |
| | | originalColor: new global.DC.Namespace.Cesium.Color() |
| | | } |
| | | // 点击事件 |
| | | tileset.on(global.DC.MouseEventType.CLICK, (e) => { |
| | | viewer.scene.globe.depthTestAgainstTerrain = false |
| | | // console.log(e); |
| | | |
| | | 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 |
| | | } |
| | | ) |
| | | // 高亮 |
| | | silhouetteBlue.selected = [] |
| | | |
| | | if (global.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 |
| | | |
| | | global.DC.Namespace.Cesium.Color.clone( |
| | | e.feature.color, |
| | | highlighted.originalColor |
| | | ) |
| | | e.feature.color = global.DC.Namespace.Cesium.Color.fromBytes( |
| | | 155, |
| | | 255, |
| | | 175 |
| | | ) |
| | | } |
| | | }) |
| | | // 移动事件 |
| | | // tileset.on(global.DC.MouseEventType.MOUSE_MOVE, (e) => { |
| | | // silhouetteBlue.selected = []; |
| | | |
| | | // if (global.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; |
| | | |
| | | // global.DC.Namespace.Cesium.Color.clone( |
| | | // e.feature.color, |
| | | // highlighted.originalColor |
| | | // ); |
| | | // e.feature.color = global.DC.Namespace.Cesium.Color.fromBytes( |
| | | // 155, |
| | | // 255, |
| | | // 175 |
| | | // ); |
| | | // } |
| | | // }); |
| | | // tilesetLayer["changesilhouetteBlue"] = () => { |
| | | // silhouetteBlue.selected = []; |
| | | // }; |
| | | // tilesetLayer.show = false; |
| | | // 精细模型↑ |
| | | |
| | | // 2.5D贴图↓ |
| | | const usetowpointfive = () => { |
| | | var 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 viewer.imageryLayers.addImageryProvider(provider) |
| | | } |
| | | |
| | | const newLayer = usetowpointfive() |
| | | // 2.5d贴图事件 |
| | | const layerGroup = new global.DC.LayerGroup('modelBox') |
| | | viewer.addLayerGroup(layerGroup) |
| | | |
| | | const areaLayer = new global.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 global.DC.Polygon(item.geometry.rings[0]) |
| | | polygon.attr = item.attributes |
| | | |
| | | polygon.setStyle({ |
| | | material: global.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(global.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: 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 (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: 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' |
| | | ? 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 global.DC.VectorLayer('wallLayer') |
| | | // 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); |
| | | |
| | | // viewer.use(new global.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 |
| | | } |
| | | |
| | | global.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) |
| | | }, |
| | | methods: { |
| | | openPopupS (position, lntLat, query) { |
| | | const that = this |
| | | // 定制化窗体 |
| | | const d = { |
| | | position, |
| | | lntLat, |
| | | query: { introduce: position, address: lntLat, ...(query || {}) }, |
| | | useJWD: true // 仅使用经纬度 |
| | | } |
| | | 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 |
| | | }) |
| | | } |
| | | function distanceSurface() { |
| | | viewer.measure.distanceSurface(); |
| | | } |
| | | } |
| | | |
| | | 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 global.DC.Viewer("mobile-viewer-container", { |
| | | contextOptions: { |
| | | webgl: { |
| | | stencil: true, |
| | | preserveDrawingBuffer: 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(); |
| | | |
| | | // const baselayer = DC.ImageryLayerFactory.createArcGisImageryLayer({ |
| | | // url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", |
| | | // }); |
| | | const 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", // 行政区划 |
| | | } |
| | | ); |
| | | // 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(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(viewer.camera.positionCartographic.height); |
| | | // console.log(height); |
| | | }); |
| | | |
| | | // viewer.on(global.DC.SceneEventType.CAMERA_MOVE_END, (e) => { |
| | | viewer.on(global.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: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | viewer.camera.positionCartographic.longitude, |
| | | 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 (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); |
| | | // } |
| | | let usMun = that.forlayerNum ? that.forlayerNum : that.threelayerNum; |
| | | if (height > usMun && isSet) { |
| | | conBack(usMun); |
| | | } |
| | | }); |
| | | |
| | | // 按钮事件 |
| | | const butSetViews = (num) => { |
| | | viewer.camera.flyTo({ |
| | | destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | viewer.camera.positionCartographic.longitude, |
| | | 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(); |
| | | }; |
| | | 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 (that.forlayerNum) { |
| | | 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 (that.forlayerNum) { |
| | | 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: global.DC.Namespace.Cesium.Cartesian3.fromRadians( |
| | | viewer.camera.positionCartographic.longitude, |
| | | 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; |
| | | viewer.on(global.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); |
| | | 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 (that.forlayerNum) { |
| | | 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 (that.forlayerNum) { |
| | | 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); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | // 地图点击事件 |
| | | // 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"); |
| | | // 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 global.DC.TilesetLayer("tilesetLayer"); |
| | | viewer.addLayer(tilesetLayer); |
| | | const tileset = new global.DC.Tileset("/mx/tileset.json", { |
| | | luminanceAtZenith: 0.5, |
| | | }); |
| | | |
| | | // tilesetLayer.addOverlay(tileset); |
| | | // tilesetLayer.show = false; |
| | | |
| | | const 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 = []; |
| | | |
| | | viewer.scene.postProcessStages.add( |
| | | global.DC.Namespace.Cesium.PostProcessStageLibrary.createSilhouetteStage( |
| | | [silhouetteBlue] |
| | | ) |
| | | ); |
| | | |
| | | var highlighted = { |
| | | feature: undefined, |
| | | originalColor: new global.DC.Namespace.Cesium.Color(), |
| | | }; |
| | | |
| | | var selected = { |
| | | feature: undefined, |
| | | originalColor: new global.DC.Namespace.Cesium.Color(), |
| | | }; |
| | | // 点击事件 |
| | | tileset.on(global.DC.MouseEventType.CLICK, (e) => { |
| | | viewer.scene.globe.depthTestAgainstTerrain = false; |
| | | // console.log(e); |
| | | |
| | | 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, |
| | | } |
| | | ); |
| | | // 高亮 |
| | | silhouetteBlue.selected = []; |
| | | |
| | | if (global.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; |
| | | |
| | | global.DC.Namespace.Cesium.Color.clone( |
| | | e.feature.color, |
| | | highlighted.originalColor |
| | | ); |
| | | e.feature.color = global.DC.Namespace.Cesium.Color.fromBytes( |
| | | 155, |
| | | 255, |
| | | 175 |
| | | ); |
| | | } |
| | | }); |
| | | // 移动事件 |
| | | // tileset.on(global.DC.MouseEventType.MOUSE_MOVE, (e) => { |
| | | // silhouetteBlue.selected = []; |
| | | |
| | | // if (global.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; |
| | | |
| | | // global.DC.Namespace.Cesium.Color.clone( |
| | | // e.feature.color, |
| | | // highlighted.originalColor |
| | | // ); |
| | | // e.feature.color = global.DC.Namespace.Cesium.Color.fromBytes( |
| | | // 155, |
| | | // 255, |
| | | // 175 |
| | | // ); |
| | | // } |
| | | // }); |
| | | // tilesetLayer["changesilhouetteBlue"] = () => { |
| | | // silhouetteBlue.selected = []; |
| | | // }; |
| | | // tilesetLayer.show = false; |
| | | // 精细模型↑ |
| | | |
| | | // 2.5D贴图↓ |
| | | const usetowpointfive = () => { |
| | | var 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 viewer.imageryLayers.addImageryProvider(provider); |
| | | }; |
| | | |
| | | const newLayer = usetowpointfive(); |
| | | // 2.5d贴图事件 |
| | | const layerGroup = new global.DC.LayerGroup("modelBox"); |
| | | viewer.addLayerGroup(layerGroup); |
| | | |
| | | const areaLayer = new global.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 global.DC.Polygon(item.geometry.rings[0]); |
| | | polygon.attr = item.attributes; |
| | | |
| | | polygon.setStyle({ |
| | | material: global.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(global.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: 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 (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: 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" |
| | | ? 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 global.DC.VectorLayer("wallLayer"); |
| | | // 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); |
| | | |
| | | // viewer.use(new global.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.forlayerNum : that.threelayerNum, |
| | | ]); // 送入移动端缩放范围 |
| | | 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; |
| | | } |
| | | |
| | | global.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); |
| | | }, |
| | | methods: { |
| | | openPopupS(position, lntLat, query) { |
| | | const that = this; |
| | | // 定制化窗体 |
| | | const d = { |
| | | position, |
| | | lntLat, |
| | | query: { introduce: position, address: lntLat, ...(query || {}) }, |
| | | useJWD: true, // 仅使用经纬度 |
| | | }; |
| | | 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> |
| | |
| | | }, |
| | | mutations: { |
| | | ...leftNavsData.mutations, |
| | | SET_POPUPBGURL (state, popupBgUrl) { |
| | | SET_POPUPBGURL(state, popupBgUrl) { |
| | | // console.log(popupBgUrl, "see33333") |
| | | if (!popupBgUrl) { |
| | | return |
| | | } |
| | | state.popupBgUrl = popupBgUrl |
| | | }, |
| | | SET_POPUPQRURL (state, pupupQRUrl) { |
| | | SET_POPUPQRURL(state, pupupQRUrl) { |
| | | state.pupupQRUrl = pupupQRUrl |
| | | }, |
| | | SET_TERMINUS (state, terminus) { |
| | | SET_TERMINUS(state, terminus) { |
| | | state.terminus = terminus |
| | | }, |
| | | SET_STARTINGPOINT (state, startingPoint) { |
| | | SET_STARTINGPOINT(state, startingPoint) { |
| | | state.startingPoint = startingPoint |
| | | }, |
| | | SET_POINTPOSITION (state, pointPosition) { |
| | | SET_POINTPOSITION(state, pointPosition) { |
| | | state.pointPosition = pointPosition |
| | | }, |
| | | SET_STATENAME (state, stateName) { |
| | | SET_STATENAME(state, stateName) { |
| | | state.stateName = stateName |
| | | }, |
| | | SET_SITENAME (state, siteName) { |
| | | SET_SITENAME(state, siteName) { |
| | | state.siteName = siteName |
| | | }, |
| | | SET_TELEPHONE (state, telephone) { |
| | | SET_TELEPHONE(state, telephone) { |
| | | state.telephone = telephone |
| | | }, |
| | | SET_INTRODUCETEXT (state, introduceText) { |
| | | SET_INTRODUCETEXT(state, introduceText) { |
| | | state.introduceText = introduceText |
| | | }, |
| | | SET_PANORAMAURL (state, panoramaUrl) { |
| | | SET_PANORAMAURL(state, panoramaUrl) { |
| | | state.panoramaUrl = panoramaUrl |
| | | }, |
| | | SET_PANORAMAPOPUP (state, panoramaPopup) { |
| | | SET_PANORAMAPOPUP(state, panoramaPopup) { |
| | | state.panoramaPopup = panoramaPopup |
| | | }, |
| | | SET_MONITORURL (state, monitorUrl) { |
| | | SET_MONITORURL(state, monitorUrl) { |
| | | state.monitorUrl = monitorUrl |
| | | }, |
| | | SET_MONITORPOPUP (state, monitorPopup) { |
| | | SET_MONITORPOPUP(state, monitorPopup) { |
| | | state.monitorPopup = monitorPopup |
| | | }, |
| | | SET_DETAILSPOPUP (state, detailsPopup) { |
| | | SET_DETAILSPOPUP(state, detailsPopup) { |
| | | state.detailsPopup = detailsPopup |
| | | }, |
| | | SET_POPUPIMGATLAS (state, popupImgAtlas) { |
| | | SET_POPUPIMGATLAS(state, popupImgAtlas) { |
| | | state.popupImgAtlas = popupImgAtlas |
| | | }, |
| | | SET_TEACHLIST (state, teachList) { |
| | | SET_TEACHLIST(state, teachList) { |
| | | state.teachList = teachList |
| | | }, |
| | | SET_LIVELIST (state, liveList) { |
| | | SET_LIVELIST(state, liveList) { |
| | | state.liveList = liveList |
| | | }, |
| | | |
| | | SET_ADDTAGPOPUP (state, addTagPopup) { |
| | | SET_ADDTAGPOPUP(state, addTagPopup) { |
| | | state.addTagPopup = addTagPopup |
| | | }, |
| | | |
| | | SET_ADDTAGPOSITION (state, addTagPosition) { |
| | | SET_ADDTAGPOSITION(state, addTagPosition) { |
| | | state.addTagPosition = addTagPosition |
| | | }, |
| | | initLabelLayer (state, val) { |
| | | initLabelLayer(state, val) { |
| | | if (!state.labelLayer) { |
| | | state.labelLayer = new global.DC.HtmlLayer('labelLayer') |
| | | val.addLayer(state.labelLayer) |
| | |
| | | state.myviewer = val |
| | | }, |
| | | |
| | | clearLabelLayerIcon (state, val) { |
| | | clearLabelLayerIcon(state, val) { |
| | | if (state.labelLayer) { |
| | | state.labelLayer.clear() |
| | | } |
| | | }, |
| | | openLabelLayer (state, val) { |
| | | openLabelLayer(state, val) { |
| | | // console.log(val, "see") |
| | | if (val.show) { |
| | | state.nowlabelLayerData = val.data |
| | |
| | | state.labelLayerDataShow = false |
| | | } |
| | | }, |
| | | CLEAR_ALL (state, param) { |
| | | CLEAR_ALL(state, param) { |
| | | state.siteName = param |
| | | state.introduceText = param |
| | | state.telephone = param |
| | |
| | | state.teachList = [] |
| | | state.liveList = [] |
| | | }, |
| | | set_closeMapClick (state, val) { |
| | | set_closeMapClick(state, val) { |
| | | state.closeMapClick = val |
| | | } |
| | | }, |
| | | actions: { |
| | | ...leftNavsData.actions, |
| | | openPopups ({ |
| | | openPopups({ |
| | | state, |
| | | commit, |
| | | dispatch |
| | |
| | | viewer: this.viewer |
| | | }) |
| | | }, |
| | | setOurDataInPoput ({ |
| | | setOurDataInPoput({ |
| | | state, |
| | | commit, |
| | | dispatch |
| | |
| | | ]) |
| | | commit('SET_DETAILSPOPUP', true) |
| | | }, |
| | | pcMoveView ({ |
| | | pcMoveView({ |
| | | state, |
| | | commit, |
| | | dispatch |
| | |
| | | } |
| | | }) |
| | | }, |
| | | pcFlyView ({ |
| | | pcFlyView({ |
| | | state, |
| | | commit, |
| | | dispatch |
| | | }, val) { |
| | | val.viewer.flyToPosition( |
| | | new global.DC.Position(Number(val.jd), Number(val.wd), Number(300), Number(0), Number(-90), Number(0)), |
| | | function () { }, |
| | | function () {}, |
| | | 2 |
| | | ) |
| | | }, |
| | | addLabelLayerIcon ({ |
| | | addLabelLayerIcon({ |
| | | state, |
| | | commit, |
| | | dispatch |
| | |
| | | }) |
| | | state.labelLayer.addOverlay(divIcon) |
| | | } |
| | | }, |
| | | addLabelLayerIconMobelUse({ |
| | | state, |
| | | commit, |
| | | dispatch |
| | | }, val) { |
| | | const list = val.list |
| | | if (!state.labelLayer) { |
| | | state.labelLayer = new global.DC.HtmlLayer('labelLayer') |
| | | val.mviewer.addLayer(state.labelLayer); |
| | | state.myviewer = val.mviewer; |
| | | } |
| | | if (val.clear) { |
| | | // state.labelLayer.remove(); |
| | | state.labelLayer.clear() |
| | | } |
| | | if (val.add) { // 刷新列表 |
| | | state.addSignList = !state.addSignList |
| | | return |
| | | } |
| | | for (const i in list) { |
| | | const divIcon = new global.DC.DivIcon( |
| | | new global.DC.Position( |
| | | Number(list[i].jd), |
| | | Number(list[i].wd), |
| | | 0 |
| | | ), |
| | | ` |
| | | <div class="tag-entitys-box"> |
| | | <div class="tag-content"> |
| | | ${list[i].name} |
| | | </div> |
| | | <div class="tag-angle-content"> |
| | | <img src="https://map.hit.edu.cn/images/tarrow_xq.png"> |
| | | </div> |
| | | </div> |
| | | ` |
| | | ) |
| | | // 订阅事件 |
| | | divIcon.on(global.DC.MouseEventType.CLICK, (e) => { |
| | | // console.log(e); |
| | | // return; |
| | | // 定制化窗体 |
| | | const position = e.position |
| | | const lntLat = [e.overlay._position._lng, e.overlay._position._lat] |
| | | // console.log(position, lntLat, list[i], state.myviewer, "see") |
| | | new global.DC.DivForms(state.myviewer, { |
| | | domId: 'labelLayerid', |
| | | position: [ |
| | | global.DC.Transform.transformWGS84ToCartesian( |
| | | new global.DC.Position( |
| | | Number(lntLat[0]), |
| | | Number(lntLat[1]), |
| | | Number(0) |
| | | ) |
| | | ) |
| | | ] |
| | | }) |
| | | state.myviewer.camera.setView({ |
| | | // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州 |
| | | // fromDegrees()方法,将经纬度和高程转换为世界坐标 |
| | | destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees( |
| | | lntLat[0], |
| | | lntLat[1], |
| | | 400.0 |
| | | ), |
| | | orientation: { |
| | | // 指向 |
| | | heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), |
| | | // 视角 |
| | | pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), |
| | | roll: 0.0 |
| | | } |
| | | }) |
| | | commit('openLabelLayer', { |
| | | show: true, |
| | | data: list[i] |
| | | }) |
| | | }) |
| | | state.labelLayer.addOverlay(divIcon) |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | export default popupParams |
| | | export default popupParams |
| | |
| | | width: 100%; |
| | | height: 35px; |
| | | // background-image: linear-gradient(135deg, transparent 25px, #29baf1 25px); |
| | | background-image: linear-gradient( |
| | | rgba(41, 186, 241, 0.5), |
| | | rgba(41, 186, 241, 0.5) |
| | | ); |
| | | background-image: linear-gradient(rgba(41, 186, 241, 0.5), rgba(41, 186, 241, 0.5)); |
| | | |
| | | // background-image: linear-gradient(#29baf1, #28bbf0); |
| | | // background-color: #f7f7f7; |
| | |
| | | border-radius: 0 0 10px 10px; |
| | | display: flex; |
| | | align-items: center; |
| | | background-image: linear-gradient( |
| | | rgba(41, 186, 241, 0.5), |
| | | rgba(41, 186, 241, 0.5) |
| | | ); |
| | | background-image: linear-gradient(rgba(41, 186, 241, 0.5), rgba(41, 186, 241, 0.5)); |
| | | // background-image: linear-gradient(#29baf1, #28bbf0); |
| | | justify-content: center; |
| | | position: relative; |
| | |
| | | |
| | | div:nth-child(1) { |
| | | // border-bottom: 1px solid #ebebeb; |
| | | margin-bottom: 49px !important; |
| | | // margin-bottom: 49px !important; |
| | | margin-bottom: 5px !important; |
| | | } |
| | | |
| | | div:nth-child(2) { |