1

mayisheng

2022-08-15 81f54040c2cb65537c6c6e1db8358a39a57dea0d

 src/components/leftNav/index.vue

@@ -22,12 +22,26 @@
    getTagList
} from '@/api/pc/leftNav/index'
import { mapGetters } from 'vuex'

const LeftNavLayer = {
    leftTagLayer: null,
    leftWayLayer: null,
    leftSceneLayer: null,
    leftMonitorLayer: null,
    leftActivityLayer: null,
    leftAedLayer: null,
    leftParkLayer: null,
    leftComeLayer: null
}

export default {
    name: 'leftNav',
    computed: {
        ...mapGetters([
            'closeMapClick', // 关闭地图点击，防止新增标签误触
            'addIconsLayerIconPopup' // 传送关闭编辑窗口，刷新标签数据
            'addIconsLayerIconPopup', // 传送关闭编辑窗口，刷新标签数据
            'calenderShow',
            'twoOrThree'
        ])
    },
    data () {
@@ -39,7 +53,7 @@
                    img: '/img/leftnav/tag-checked.png',
                    normal: '/img/leftnav/tag.png',
                    checked: '/img/leftnav/tag-checked.png',
                    layer: 'tagLayer'
                    layer: 'leftTagLayer'
                },
                {
                    flag: false,
@@ -47,7 +61,7 @@
                    img: '/img/leftnav/way.png',
                    normal: '/img/leftnav/way.png',
                    checked: '/img/leftnav/way-checked.png',
                    layer: 'wayLayer'
                    layer: 'leftWayLayer'
                },
                {
                    flag: false,
@@ -55,31 +69,31 @@
                    img: '/img/leftnav/scene.png',
                    normal: '/img/leftnav/scene.png',
                    checked: '/img/leftnav/scene-checked.png',
                    layer: 'sceneLayer'
                },
                {
                    flag: false,
                    label: '监控',
                    img: '/img/leftnav/monitor.png',
                    normal: '/img/leftnav/monitor.png',
                    checked: '/img/leftnav/monitor-checked.png',
                    layer: 'monitorLayer'
                    layer: 'leftSceneLayer'
                },
                // {
                //     flag: false,
                //     label: '活动',
                //     img: '/img/leftnav/activity.png',
                //     normal: '/img/leftnav/activity.png',
                //     checked: '/img/leftnav/activity-checked.png',
                //     layer: 'activityLayer'
                //     label: '监控',
                //     img: '/img/leftnav/monitor.png',
                //     normal: '/img/leftnav/monitor.png',
                //     checked: '/img/leftnav/monitor-checked.png',
                //     layer: 'leftMonitorLayer'
                // },
                {
                    flag: false,
                    label: '活动',
                    img: '/img/leftnav/activity.png',
                    normal: '/img/leftnav/activity.png',
                    checked: '/img/leftnav/activity-checked.png',
                    layer: 'leftActivityLayer'
                },
                // {
                //     flag: false,
                //     label: 'AED',
                //     img: '/img/leftnav/aed.png',
                //     normal: '/img/leftnav/aed.png',
                //     checked: '/img/leftnav/aed-checked.png',
                //     layer: 'aedLayer'
                //     layer: 'leftAedLayer'
                // },
                {
                    flag: false,
@@ -87,7 +101,7 @@
                    img: '/img/leftnav/park.png',
                    normal: '/img/leftnav/park.png',
                    checked: '/img/leftnav/park-checked.png',
                    layer: 'parkLayer'
                    layer: 'leftParkLayer'
                },
                {
                    flag: false,
@@ -95,17 +109,9 @@
                    img: '/img/leftnav/come.png',
                    normal: '/img/leftnav/come.png',
                    checked: '/img/leftnav/come-checked.png',
                    layer: 'comeLayer'
                    layer: 'leftComeLayer'
                }
            ],
            tagLayer: null,
            wayLayer: null,
            sceneLayer: null,
            monitorLayer: null,
            activityLayer: null,
            aedLayer: null,
            parkLayer: null,
            comeLayer: null
            ]
        }
    },
    created () {
@@ -119,14 +125,55 @@
            if (!this.addIconsLayerIconPopup) {
                this.reself()
            }
        },
        calenderShow: {
            handler (newData, oldData) {
                if (newData == false) {
                    this.leftNavData.forEach(item => {
                        if (item.label == '活动') {
                            item.flag = false
                            item.img = item.normal
                        }
                    })
                }
            },
            immediate: true
        },
        twoOrThree: {
            handler (newData, oldData) {
                if (newData == '三 维') {
                    for (const key in LeftNavLayer) {
                        if (LeftNavLayer[key] != null) {
                            LeftNavLayer[key].eachOverlay((item) => {
                                if (item.attr.params.x && item.attr.params.x != '') {
                                    const position = this.coordinate(item.attr.params.x)
                                    item.position = new global.DC.Position(Number(position.lng), Number(position.lat), 0)
                                } else {
                                    item.position = new global.DC.Position(Number(item.position.lng), Number(item.position.lat), 0)
                                }
                            })
                        }
                    }
                } else {
                    for (const key in LeftNavLayer) {
                        if (LeftNavLayer[key] != null) {
                            LeftNavLayer[key].eachOverlay((item) => {
                                item.position = new global.DC.Position(Number(item.attr.params.jd), Number(item.attr.params.wd), 50)
                            })
                        }
                    }
                }
            },
            immediate: true
        }
    },
    methods: {
        reself () {
            const that = this
            if (this.tagLayer) {
                this.tagLayer.clear()
            if (LeftNavLayer.leftTagLayer) {
                LeftNavLayer.leftTagLayer.clear()
            }

            getTagList().then((res) => {
                res.data.data.forEach((item) => {
                    const divIcon = new global.DC.DivIcon(
@@ -137,7 +184,7 @@
                                ${item.mechanismname}
                            </div>
                            <div class="tag-angle-content">
                                <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
                                <img src="/img/icon/tarrow_xq.png">
                            </div>
                        </div>
                    `
@@ -153,13 +200,23 @@
                            item: item
                        })
                    })
                    this.tagLayer.addOverlay(divIcon)
                    LeftNavLayer.leftTagLayer.addOverlay(divIcon)
                    if (!this.leftNavData[0].flag) {
                        this.tagLayer.show = false
                        LeftNavLayer.leftTagLayer.show = false
                    }
                })
            })
        },

        coordinate (item) {
            const arr = item.split(',')

            return {
                lng: arr[0],
                lat: arr[1]
            }
        },

        addIcons () {
            if (this.closeMapClick) {
                // 若正在加标签，退出
@@ -179,6 +236,7 @@
                }
            })
        },

        generatePosition (num) {
            const list = []
            for (let i = 0; i < num; i++) {
@@ -188,90 +246,158 @@
            }
            return list
        },

        leftNavClick (item) {
            item.flag = !item.flag
            if (item.flag == true) {
                item.img = item.checked
                this[item.layer].show = true
            } else {
                item.img = item.normal
                this[item.layer].show = false
            }

            if (item.label == '活动') {
                this.$store.commit('SET_CALENDERSHOW', item.flag)
            } else {
                if (item.flag == true) {
                    LeftNavLayer[item.layer].show = true
                } else {
                    LeftNavLayer[item.layer].show = false
                }
            }
        },

        initialize () {
            var that = this
            global.viewer.scene.globe.depthTestAgainstTerrain = false
            this.tagLayer = new global.DC.HtmlLayer('tagLayer')
            global.viewer.addLayer(this.tagLayer)
            this.wayLayer = new global.DC.HtmlLayer('wayLayer')
            global.viewer.addLayer(this.wayLayer)
            this.sceneLayer = new global.DC.HtmlLayer('sceneLayer')
            global.viewer.addLayer(this.sceneLayer)
            this.monitorLayer = new global.DC.HtmlLayer('monitorLayer')
            global.viewer.addLayer(this.monitorLayer)
            this.aedLayer = new global.DC.VectorLayer('aedLayer')
            global.viewer.addLayer(this.aedLayer)
            this.parkLayer = new global.DC.HtmlLayer('parkLayer')
            global.viewer.addLayer(this.parkLayer)
            this.comeLayer = new global.DC.VectorLayer('comeLayer')
            global.viewer.addLayer(this.comeLayer)

            LeftNavLayer.leftTagLayer = new global.DC.HtmlLayer('leftTagLayer')
            global.viewer.addLayer(LeftNavLayer.leftTagLayer)

            LeftNavLayer.leftWayLayer = new global.DC.HtmlLayer('leftWayLayer')
            global.viewer.addLayer(LeftNavLayer.leftWayLayer)

            LeftNavLayer.leftSceneLayer = new global.DC.HtmlLayer('leftSceneLayer')
            global.viewer.addLayer(LeftNavLayer.leftSceneLayer)

            LeftNavLayer.leftMonitorLayer = new global.DC.HtmlLayer('leftMonitorLayer')
            global.viewer.addLayer(LeftNavLayer.leftMonitorLayer)

            LeftNavLayer.leftAedLayer = new global.DC.VectorLayer('leftAedLayer')
            global.viewer.addLayer(LeftNavLayer.leftAedLayer)

            LeftNavLayer.leftParkLayer = new global.DC.HtmlLayer('leftParkLayer')
            global.viewer.addLayer(LeftNavLayer.leftParkLayer)

            LeftNavLayer.leftComeLayer = new global.DC.VectorLayer('leftComeLayer')
            global.viewer.addLayer(LeftNavLayer.leftComeLayer)

            getTagList().then((res) => {
                res.data.data.forEach((item) => {
                    let obj = {}
                    if (item.x && item.x != '') {
                        const position = that.coordinate(item.x)
                        obj = {
                            lng: position.lng, lat: position.lat
                        }
                    } else {
                        obj = {
                            lng: item.jd, lat: item.wd
                        }
                    }

                    const divIcon = new global.DC.DivIcon(
                        new global.DC.Position(Number(item.jd), Number(item.wd), 0),
                        new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
                        `
                        <div class="tag-entitys-box">
                            <div class="tag-content">
                                ${item.mechanismname}
                            </div>
                            <div class="tag-angle-content">
                                <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
                            </div>
                        </div>
                    `
                                <div class="tag-entitys-box">
                                    <div class="tag-content">
                                        ${item.mechanismname}
                                    </div>
                                    <div class="tag-angle-content">
                                        <img src="/img/icon/tarrow_xq.png">
                                    </div>
                                </div>
                            `
                    )

                    divIcon.attr.params = item

                    // 订阅事件
                    divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
                        if (that.closeMapClick) {
                            return
                        }

                        if (that.twoOrThree == '三 维') {
                            that.openPopups({
                                lng: Number(obj.lng),
                                lat: Number(obj.lat),
                                item: item
                            })
                        } else {
                            that.openPopups({
                                lng: Number(item.jd),
                                lat: Number(item.wd),
                                item: item
                            })
                        }
                        // console.log(item, "see11111");
                        that.openPopups({
                            lng: e.overlay.position.lng,
                            lat: e.overlay.position.lat,
                            item: item
                        })
                    })
                    this.tagLayer.addOverlay(divIcon)
                    LeftNavLayer.leftTagLayer.addOverlay(divIcon)
                })
                // this.tagLayer.show = false
                // LeftNavLayer.leftTagLayer.show = false
            })

            getWayList().then((res) => {
                res.data.data.forEach((item) => {
                    let obj = {}
                    if (item.x && item.x != '') {
                        const position = that.coordinate(item.x)
                        obj = {
                            lng: position.lng, lat: position.lat
                        }
                    } else {
                        obj = {
                            lng: item.jd, lat: item.wd
                        }
                    }

                    const divIcon = new global.DC.DivIcon(
                        new global.DC.Position(Number(item.jd), Number(item.wd), 0),
                        new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
                        `
                        <div  class="way-entitys-box">
                            <div  class="way-title" style="border: white 1px solid; font-size: 0.875rem; background: #0066ff;  width: 18px; line-height: 14px; padding: 6px 2px 6px 2px; color: white; text-align: center;">
                                 ${item.roadname}
                            </div>
                            <div  class="way-sign-box">
                                <img src="https://map.hit.edu.cn/images/roadsign3.png">
                            </div>
                        </div>
                    `
                                <div  class="way-entitys-box">
                                    <div  class="way-title" style="border: white 1px solid; font-size: 0.875rem; background: #0066ff;  width: 18px; line-height: 14px; padding: 6px 2px 6px 2px; color: white; text-align: center;">
                                        ${item.roadname}
                                    </div>
                                    <div  class="way-sign-box">
                                        <img src="/img/icon/roadsign3.png">
                                    </div>
                                </div>
                            `
                    )
                    this.wayLayer.addOverlay(divIcon)

                    divIcon.attr.params = item

                    LeftNavLayer.leftWayLayer.addOverlay(divIcon)
                })
                this.wayLayer.show = false
                LeftNavLayer.leftWayLayer.show = false
            })

            getMonitorList().then((res) => {
                res.data.data.records.forEach((item) => {
                    let obj = {}
                    if (item.x && item.x != '') {
                        const position = that.coordinate(item.x)
                        obj = {
                            lng: position.lng, lat: position.lat
                        }
                    } else {
                        obj = {
                            lng: item.jd, lat: item.wd
                        }
                    }

                    const divIcon = new global.DC.DivIcon(
                        new global.DC.Position(Number(item.jd), Number(item.wd), 0),
                        new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
                        `
                        <div class="monitor-entitys-box">
                            <div>${item.vrname}</div>
@@ -279,8 +405,11 @@
                        </div>
                        `
                    )

                    divIcon.attr.params = item

                    divIcon.attrParams = item
                    this.monitorLayer.addOverlay(divIcon)
                    LeftNavLayer.leftMonitorLayer.addOverlay(divIcon)

                    divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
                        global.viewer.flyToPosition(
@@ -319,13 +448,25 @@
                    })
                })

                this.monitorLayer.show = false
                LeftNavLayer.leftMonitorLayer.show = false
            })

            getSceneList().then((res) => {
                res.data.data.records.forEach((item) => {
                    let obj = {}
                    if (item.x && item.x != '') {
                        const position = that.coordinate(item.x)
                        obj = {
                            lng: position.lng, lat: position.lat
                        }
                    } else {
                        obj = {
                            lng: item.jd, lat: item.wd
                        }
                    }

                    const divIcon = new global.DC.DivIcon(
                        new global.DC.Position(Number(item.jd), Number(item.wd), 0),
                        new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
                        `
                        <div class="scene-entitys-box">
                            <div>${item.vrname}</div>
@@ -333,8 +474,11 @@
                        </div>
                        `
                    )

                    divIcon.attr.params = item

                    divIcon.attrParams = item
                    this.sceneLayer.addOverlay(divIcon)
                    LeftNavLayer.leftSceneLayer.addOverlay(divIcon)

                    divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
                        global.viewer.flyToPosition(
@@ -376,15 +520,28 @@
                    })
                })

                this.sceneLayer.show = false
                LeftNavLayer.leftSceneLayer.show = false
            })

            getLifeList({ lifetype: 9 }).then((res) => {
                res.data.data.forEach((item) => {
                    let obj = {}
                    if (item.x && item.x != '') {
                        const position = that.coordinate(item.x)
                        obj = {
                            lng: position.lng, lat: position.lat
                        }
                    } else {
                        obj = {
                            lng: item.jd, lat: item.wd
                        }
                    }

                    const label = new global.DC.Label(
                        new global.DC.Position(Number(item.jd), Number(item.wd), 0),
                        new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
                        item.mechanismname
                    )

                    label.setStyle({
                        fillColor: global.DC.Color.CRIMSON,
                        style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
@@ -393,47 +550,79 @@
                        font: '14px sans-serif',
                        pixelOffset: { x: 0, y: -24 }
                    })
                    this.aedLayer.addOverlay(label)

                    label.attr.params = item

                    LeftNavLayer.leftAedLayer.addOverlay(label)

                    const billboard = new global.DC.Billboard(
                        new global.DC.Position(Number(item.jd), Number(item.wd), 0),
                        new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
                        '/img/leftnav/map-aed.png'
                    )
                    billboard.size = [20, 20]

                    this.aedLayer.addOverlay(billboard)
                    billboard.attr.params = item

                    LeftNavLayer.leftAedLayer.addOverlay(billboard)
                })
                this.aedLayer.show = false
                LeftNavLayer.leftAedLayer.show = false
            })

            getLifeList({ lifetype: 11 }).then((res) => {
                res.data.data.forEach((item) => {
                    let obj = {}
                    if (item.x && item.x != '') {
                        const position = that.coordinate(item.x)
                        obj = {
                            lng: position.lng, lat: position.lat
                        }
                    } else {
                        obj = {
                            lng: item.jd, lat: item.wd
                        }
                    }

                    const divIcon = new global.DC.DivIcon(
                        new global.DC.Position(Number(item.jd), Number(item.wd), 0),
                        new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
                        `
                        <div class="park-entitys-box">
                            <div class="park-title" alt="${item.mechanismname}">
                            </div>
                            <div class="park-sign-box">
                                <div>
                                    <img src="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="${item.mechanismname}" title="${item.mechanismname}">
                                    <img src="/img/icon/p-biao.png" width="14" height="14" alt="${item.mechanismname}" title="${item.mechanismname}">
                                </div>
                                <div>
                                    <img src="https://map.hit.edu.cn/images/roadsign.png" width="5" height="21">
                                    <img src="/img/icon/roadsign.png" width="5" height="21">
                                </div>
                            </div>
                        </div>
                    `
                    )
                    this.parkLayer.addOverlay(divIcon)

                    divIcon.attr.params = item

                    LeftNavLayer.leftParkLayer.addOverlay(divIcon)
                })
                this.parkLayer.show = false
                LeftNavLayer.leftParkLayer.show = false
            })

            getLifeList({ lifetype: 12 }).then((res) => {
                res.data.data.forEach((item) => {
                    let obj = {}
                    if (item.x && item.x != '') {
                        const position = that.coordinate(item.x)
                        obj = {
                            lng: position.lng, lat: position.lat
                        }
                    } else {
                        obj = {
                            lng: item.jd, lat: item.wd
                        }
                    }

                    const label = new global.DC.Label(
                        new global.DC.Position(Number(item.jd), Number(item.wd), 0),
                        new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
                        item.mechanismname
                    )
                    label.setStyle({
@@ -444,10 +633,13 @@
                        font: '14px sans-serif',
                        pixelOffset: { x: 0, y: -40 }
                    })
                    that.comeLayer.addOverlay(label)

                    label.attr.params = item

                    LeftNavLayer.leftComeLayer.addOverlay(label)

                    const billboard = new global.DC.Billboard(
                        new global.DC.Position(Number(item.jd), Number(item.wd), 0),
                        new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
                        '/img/leftnav/map-activity.png'
                    )
                    billboard.size = [20, 20]
@@ -455,11 +647,14 @@
                        pixelOffset: { x: 0, y: -16 }
                    })

                    that.comeLayer.addOverlay(billboard)
                    billboard.attr.params = item

                    LeftNavLayer.leftComeLayer.addOverlay(billboard)
                })
                this.comeLayer.show = false
                LeftNavLayer.leftComeLayer.show = false
            })
        },

        openPopups (value) {
            var popup = new global.DC.DivForms(global.viewer, {
                domId: 'divFormsDomBox',
@@ -473,7 +668,6 @@
                    )
                ]
            })
            // console.log(value, "see");
            this.$store.dispatch('setOurDataInPoput', value)
            this.$store.dispatch('pcFlyView', {
                jd: value.lng,