| | |
| | | <template> |
| | | <div class="m-left-nav" :style="[navStyle]"> |
| | | <!-- :style="[coutrolStyle]" --> |
| | | <div class="m-left-coutrol" @click="iconHide = !iconHide"> |
| | | <div class="m-left-coutrol" @click="changeIconHide"> |
| | | <i :class="icons"></i> |
| | | </div> |
| | | <ul> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { mapGetters } from "vuex"; |
| | | export default { |
| | | name: "mobileLeftNav", |
| | | computed: {}, |
| | | watch: { |
| | | iconHide() { |
| | | if (this.iconHide) { |
| | |
| | | } |
| | | }, |
| | | }, |
| | | computed: { |
| | | ...mapGetters(["iconHide"]), |
| | | }, |
| | | data() { |
| | | return { |
| | | icons: "el-icon-d-arrow-right", |
| | | iconHide: false, |
| | | navStyle: { |
| | | right: "0px", |
| | | }, |
| | |
| | | }, |
| | | mounted() {}, |
| | | methods: { |
| | | changeIconHide() { |
| | | let isif = this.iconHide; |
| | | this.$store.commit("MSET_ICONHIDE", !isif); |
| | | }, |
| | | generatePosition(num) { |
| | | const list = []; |
| | | for (let i = 0; i < num; i++) { |
| | |
| | | item.img = item.normal; |
| | | this[item.layer].show = false; |
| | | } |
| | | this.$store.dispatch("closeMobileWindowsDom"); //关闭弹窗 |
| | | }, |
| | | initialize(viewer) { |
| | | var that = this; |
| | | viewer.scene.globe.depthTestAgainstTerrain = false; |
| | | this.viewer = viewer; |
| | | this.tagLayer = new this.DC.HtmlLayer("tagLayer"); |
| | | viewer.addLayer(this.tagLayer); |
| | | |
| | | this.wayLayer = new this.DC.HtmlLayer("wayLayer"); |
| | | viewer.addLayer(this.wayLayer); |
| | | |
| | | this.sceneLayer = new this.DC.VectorLayer("sceneLayer"); |
| | | viewer.addLayer(this.sceneLayer); |
| | | |
| | | this.activityLayer = new this.DC.VectorLayer("activityLayer"); |
| | | viewer.addLayer(this.activityLayer); |
| | | |
| | | this.aedLayer = new this.DC.VectorLayer("aedLayer"); |
| | | viewer.addLayer(this.aedLayer); |
| | | |
| | | this.parkLayer = new this.DC.HtmlLayer("parkLayer"); |
| | | viewer.addLayer(this.parkLayer); |
| | | |
| | | this.comeLayer = new this.DC.VectorLayer("comeLayer"); |
| | | viewer.addLayer(this.comeLayer); |
| | | |
| | |
| | | </div> |
| | | ` |
| | | ); |
| | | this.tagLayer.addOverlay(divIcon); |
| | | // e.overlay._position._lng, |
| | | // e.overlay._position._lat - 0.012, |
| | | //订阅事件1 |
| | | divIcon.on(DC.MouseEventType.CLICK, (e) => { |
| | | // 定制化窗体 |
| | | that.openPopupS( |
| | | e.position, |
| | | [e.overlay._position._lng, e.overlay._position._lat], |
| | | { name: "标签" } |
| | | ); |
| | | }); |
| | | this.tagLayer.addOverlay(divIcon); //标签 |
| | | }); |
| | | |
| | | const positions2 = this.generatePosition(50); |
| | |
| | | </div> |
| | | ` |
| | | ); |
| | | this.wayLayer.addOverlay(divIcon); |
| | | //订阅事件2 |
| | | divIcon.on(DC.MouseEventType.CLICK, (e) => { |
| | | // 定制化窗体 |
| | | that.openPopupS( |
| | | e.position, |
| | | [e.overlay._position._lng, e.overlay._position._lat], |
| | | { name: "道路" } |
| | | ); |
| | | }); |
| | | this.wayLayer.addOverlay(divIcon); //道路 |
| | | }); |
| | | |
| | | const positions3 = this.generatePosition(50); |
| | |
| | | "/img/leftnav/map-panorama.png" |
| | | ); |
| | | billboard.size = [16, 16]; |
| | | this.sceneLayer.addOverlay(billboard); |
| | | //订阅事件3 |
| | | billboard.on(DC.MouseEventType.CLICK, (e) => { |
| | | // 定制化窗体 |
| | | that.openPopupS( |
| | | e.position, |
| | | [e.wgs84Position.lng, e.wgs84Position.lat], |
| | | { name: "实景" } |
| | | ); |
| | | }); |
| | | this.sceneLayer.addOverlay(billboard); //实景 |
| | | }); |
| | | |
| | | const positions10 = this.generatePosition(50); |
| | | positions10.forEach((item) => { |
| | | const label = new this.DC.Label(item, "活动"); |
| | | label.setStyle({ |
| | | fillColor: this.DC.Color.ORANGERED, |
| | | font: "10px sans-serif", |
| | | pixelOffset: { x: 0, y: -16 }, |
| | | }); |
| | | this.activityLayer.addOverlay(label); |
| | | |
| | | const billboard = new this.DC.Billboard( |
| | | item, |
| | | "/img/leftnav/map-aed.png" |
| | | // "/img/leftnav/map-panorama.png" |
| | | ); |
| | | billboard.size = [16, 16]; |
| | | //订阅事件10 |
| | | billboard.on(DC.MouseEventType.CLICK, (e) => { |
| | | // 定制化窗体 |
| | | that.openPopupS( |
| | | e.position, |
| | | [e.wgs84Position.lng, e.wgs84Position.lat], |
| | | { name: "活动" } |
| | | ); |
| | | }); |
| | | this.activityLayer.addOverlay(billboard); //活动 |
| | | }); |
| | | |
| | | const positions4 = this.generatePosition(10); |
| | |
| | | "/img/leftnav/map-aed.png" |
| | | ); |
| | | billboard.size = [16, 16]; |
| | | |
| | | this.aedLayer.addOverlay(billboard); |
| | | //订阅事件4 |
| | | billboard.on(DC.MouseEventType.CLICK, (e) => { |
| | | // 定制化窗体 |
| | | that.openPopupS( |
| | | e.position, |
| | | [e.wgs84Position.lng, e.wgs84Position.lat], |
| | | { name: "建筑AED" } |
| | | ); |
| | | }); |
| | | this.aedLayer.addOverlay(billboard); //AED |
| | | }); |
| | | |
| | | const positions5 = this.generatePosition(120); |
| | |
| | | </div> |
| | | ` |
| | | ); |
| | | //订阅事件5 |
| | | divIcon.on(DC.MouseEventType.CLICK, (e) => { |
| | | // 定制化窗体 |
| | | that.openPopupS( |
| | | e.position, |
| | | [e.overlay._position._lng, e.overlay._position._lat], |
| | | { name: "校外街路侧停车场" } |
| | | ); |
| | | }); |
| | | this.parkLayer.addOverlay(divIcon); |
| | | }); |
| | | |
| | |
| | | "/img/leftnav/map-activity.png" |
| | | ); |
| | | billboard.size = [16, 16]; |
| | | |
| | | //订阅事件6 |
| | | billboard.on(DC.MouseEventType.CLICK, (e) => { |
| | | // 定制化窗体 |
| | | that.openPopupS( |
| | | e.position, |
| | | [e.wgs84Position.lng, e.wgs84Position.lat], |
| | | { name: "123" } |
| | | ); |
| | | }); |
| | | this.comeLayer.addOverlay(billboard); |
| | | }); |
| | | |
| | | this.tagLayer.show = false; |
| | | this.wayLayer.show = false; |
| | | this.sceneLayer.show = false; |
| | | this.activityLayer.show = false; |
| | | this.aedLayer.show = false; |
| | | this.parkLayer.show = false; |
| | | this.comeLayer.show = false; |
| | | }, |
| | | mobileOpenImgs1() { |
| | | let imgsDom = document.getElementById("mobileBigImgs"); |
| | | imgsDom.click(); |
| | | }, |
| | | goOn1() {}, |
| | | openPopupS(position, lntLat, query) { |
| | | let that = this; |
| | | // 定制化窗体 |
| | | let d = { |
| | | position, |
| | | lntLat, |
| | | query: { ...(query || {}), position, lntLat }, |
| | | useJWD: true, //仅使用经纬度 |
| | | }; |
| | | that.$store.dispatch("setMobileWindows", d); |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |