shuishen
2022-03-18 bf58722dfd03ea1513f3acc7331d4d4403fca76e
src/components/leftNav/index.vue
@@ -22,11 +22,22 @@
    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([
            'viewer',
            'closeMapClick', // 关闭地图点击,防止新增标签误触
            'addIconsLayerIconPopup' // 传送关闭编辑窗口,刷新标签数据
        ])
@@ -40,7 +51,7 @@
                    img: '/img/leftnav/tag-checked.png',
                    normal: '/img/leftnav/tag.png',
                    checked: '/img/leftnav/tag-checked.png',
                    layer: 'tagLayer'
                    layer: 'leftTagLayer'
                },
                {
                    flag: false,
@@ -48,7 +59,7 @@
                    img: '/img/leftnav/way.png',
                    normal: '/img/leftnav/way.png',
                    checked: '/img/leftnav/way-checked.png',
                    layer: 'wayLayer'
                    layer: 'leftWayLayer'
                },
                {
                    flag: false,
@@ -56,7 +67,7 @@
                    img: '/img/leftnav/scene.png',
                    normal: '/img/leftnav/scene.png',
                    checked: '/img/leftnav/scene-checked.png',
                    layer: 'sceneLayer'
                    layer: 'leftSceneLayer'
                },
                {
                    flag: false,
@@ -64,7 +75,7 @@
                    img: '/img/leftnav/monitor.png',
                    normal: '/img/leftnav/monitor.png',
                    checked: '/img/leftnav/monitor-checked.png',
                    layer: 'monitorLayer'
                    layer: 'leftMonitorLayer'
                },
                // {
                //     flag: false,
@@ -72,7 +83,7 @@
                //     img: '/img/leftnav/activity.png',
                //     normal: '/img/leftnav/activity.png',
                //     checked: '/img/leftnav/activity-checked.png',
                //     layer: 'activityLayer'
                //     layer: 'leftActivityLayer'
                // },
                // {
                //     flag: false,
@@ -80,7 +91,7 @@
                //     img: '/img/leftnav/aed.png',
                //     normal: '/img/leftnav/aed.png',
                //     checked: '/img/leftnav/aed-checked.png',
                //     layer: 'aedLayer'
                //     layer: 'leftAedLayer'
                // },
                {
                    flag: false,
@@ -88,7 +99,7 @@
                    img: '/img/leftnav/park.png',
                    normal: '/img/leftnav/park.png',
                    checked: '/img/leftnav/park-checked.png',
                    layer: 'parkLayer'
                    layer: 'leftParkLayer'
                },
                {
                    flag: false,
@@ -96,27 +107,16 @@
                    img: '/img/leftnav/come.png',
                    normal: '/img/leftnav/come.png',
                    checked: '/img/leftnav/come-checked.png',
                    layer: 'comeLayer'
                    layer: 'leftComeLayer'
                }
            ],
            viewer: null,
            DC: null,
            tagLayer: null,
            wayLayer: null,
            sceneLayer: null,
            monitorLayer: null,
            activityLayer: null,
            aedLayer: null,
            parkLayer: null,
            comeLayer: null
            ]
        }
    },
    created () {
        this.DC = global.DC
    },
    mounted () {
        // 初始化新增标签图层
        // this.$store.commit("createAddIconsLayerIconLayer", { viewer: this.viewer });
        // this.$store.commit("createAddIconsLayerIconLayer", { viewer: global.viewer });
    },
    watch: {
        addIconsLayerIconPopup () {
@@ -128,13 +128,13 @@
    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 this.DC.DivIcon(
                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
                    const divIcon = new global.DC.DivIcon(
                        new global.DC.Position(Number(item.jd), Number(item.wd), 0),
                        `
                        <div class="tag-entitys-box">
                            <div class="tag-content">
@@ -157,9 +157,9 @@
                            item: item
                        })
                    })
                    this.tagLayer.addOverlay(divIcon)
                    LeftNavLayer.leftTagLayer.addOverlay(divIcon)
                    if (!this.leftNavData[0].flag) {
                        this.tagLayer.show = false
                        LeftNavLayer.leftTagLayer.show = false
                    }
                })
            })
@@ -172,13 +172,13 @@
            // 加标签
            this.$store.dispatch('chouseAddIconsLayerIcon', {
                // 新增标签 选定位置
                viewer: this.viewer,
                viewer: global.viewer,
                fn: (lnglat) => {
                    // 返回选定坐标
                    // 添加空白标签
                    this.$store.dispatch('addIconsLayerIcon', {
                        lnglat: lnglat,
                        viewer: this.viewer
                        viewer: global.viewer
                    })
                }
            })
@@ -188,7 +188,7 @@
            for (let i = 0; i < num; i++) {
                const lng = 115.86271917 + Math.random() * 0.01
                const lat = 28.73615593 + Math.random() * 0.02
                list.push(new this.DC.Position(lng, lat, 0))
                list.push(new global.DC.Position(lng, lat, 0))
            }
            return list
        },
@@ -196,35 +196,41 @@
            item.flag = !item.flag
            if (item.flag == true) {
                item.img = item.checked
                this[item.layer].show = true
                LeftNavLayer[item.layer].show = true
            } else {
                item.img = item.normal
                this[item.layer].show = false
                LeftNavLayer[item.layer].show = false
            }
        },
        initialize (viewer) {
        initialize () {
            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.HtmlLayer('sceneLayer')
            viewer.addLayer(this.sceneLayer)
            this.monitorLayer = new this.DC.HtmlLayer('monitorLayer')
            viewer.addLayer(this.monitorLayer)
            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)
            global.viewer.scene.globe.depthTestAgainstTerrain = false
            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) => {
                    const divIcon = new this.DC.DivIcon(
                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
                    const divIcon = new global.DC.DivIcon(
                        new global.DC.Position(Number(item.jd), Number(item.wd), 0),
                        `
                        <div class="tag-entitys-box">
                            <div class="tag-content">
@@ -248,15 +254,15 @@
                            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) => {
                    const divIcon = new this.DC.DivIcon(
                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
                    const divIcon = new global.DC.DivIcon(
                        new global.DC.Position(Number(item.jd), Number(item.wd), 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;">
@@ -268,15 +274,15 @@
                        </div>
                    `
                    )
                    this.wayLayer.addOverlay(divIcon)
                    LeftNavLayer.leftWayLayer.addOverlay(divIcon)
                })
                this.wayLayer.show = false
                LeftNavLayer.leftWayLayer.show = false
            })
            getMonitorList().then((res) => {
                res.data.data.records.forEach((item) => {
                    const divIcon = new this.DC.DivIcon(
                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
                    const divIcon = new global.DC.DivIcon(
                        new global.DC.Position(Number(item.jd), Number(item.wd), 0),
                        `
                        <div class="monitor-entitys-box">
                            <div>${item.vrname}</div>
@@ -285,10 +291,10 @@
                        `
                    )
                    divIcon.attrParams = item
                    this.monitorLayer.addOverlay(divIcon)
                    LeftNavLayer.leftMonitorLayer.addOverlay(divIcon)
                    divIcon.on(that.DC.MouseEventType.CLICK, (e) => {
                        that.viewer.flyToPosition(
                    divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
                        global.viewer.flyToPosition(
                            new global.DC.Position(Number(item.jd), Number(item.wd), Number(300), Number(0), Number(-90), Number(0)),
                            function () { },
                            2
@@ -302,9 +308,9 @@
                        )
                        this.$store.commit('SET_MONITORURL', e.overlay.attrParams.vrurl)
                        // eslint-disable-next-line new-cap
                        var positions = this.DC.Transform.transformWGS84ToCartesian(
                        var positions = global.DC.Transform.transformWGS84ToCartesian(
                            // eslint-disable-next-line new-cap
                            new this.DC.Position.fromArray([
                            new global.DC.Position.fromArray([
                                Number(item.jd),
                                Number(item.wd),
                                0,
@@ -313,9 +319,9 @@
                                0
                            ])
                        )
                        this.viewer.scene.globe.depthTestAgainstTerrain = false
                        global.viewer.scene.globe.depthTestAgainstTerrain = false
                        // eslint-disable-next-line no-unused-vars
                        var monitor = new this.DC.PanoramaBox(this.viewer, {
                        var monitor = new global.DC.PanoramaBox(global.viewer, {
                            domId: 'MonitorBox',
                            position: [positions]
                        })
@@ -324,13 +330,13 @@
                    })
                })
                this.monitorLayer.show = false
                LeftNavLayer.leftMonitorLayer.show = false
            })
            getSceneList().then((res) => {
                res.data.data.records.forEach((item) => {
                    const divIcon = new this.DC.DivIcon(
                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
                    const divIcon = new global.DC.DivIcon(
                        new global.DC.Position(Number(item.jd), Number(item.wd), 0),
                        `
                        <div class="scene-entitys-box">
                            <div>${item.vrname}</div>
@@ -339,10 +345,10 @@
                        `
                    )
                    divIcon.attrParams = item
                    this.sceneLayer.addOverlay(divIcon)
                    LeftNavLayer.leftSceneLayer.addOverlay(divIcon)
                    divIcon.on(that.DC.MouseEventType.CLICK, (e) => {
                        that.viewer.flyToPosition(
                    divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
                        global.viewer.flyToPosition(
                            new global.DC.Position(Number(item.jd), Number(item.wd), Number(300), Number(0), Number(-90), Number(0)),
                            function () { },
                            2
@@ -359,9 +365,9 @@
                            e.overlay.attrParams.vrurl
                        )
                        // eslint-disable-next-line new-cap
                        var positions = that.DC.Transform.transformWGS84ToCartesian(
                        var positions = global.DC.Transform.transformWGS84ToCartesian(
                            // eslint-disable-next-line new-cap
                            new that.DC.Position.fromArray([
                            new global.DC.Position.fromArray([
                                Number(item.jd),
                                Number(item.wd),
                                0,
@@ -370,9 +376,9 @@
                                0
                            ])
                        )
                        this.viewer.scene.globe.depthTestAgainstTerrain = false
                        global.viewer.scene.globe.depthTestAgainstTerrain = false
                        // eslint-disable-next-line no-unused-vars
                        var panorama = new this.DC.PanoramaBox(this.viewer, {
                        var panorama = new global.DC.PanoramaBox(global.viewer, {
                            domId: 'PanoramaBox',
                            position: [positions]
                        })
@@ -381,40 +387,40 @@
                    })
                })
                this.sceneLayer.show = false
                LeftNavLayer.leftSceneLayer.show = false
            })
            getLifeList({ lifetype: 9 }).then((res) => {
                res.data.data.forEach((item) => {
                    const label = new this.DC.Label(
                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
                    const label = new global.DC.Label(
                        new global.DC.Position(Number(item.jd), Number(item.wd), 0),
                        item.mechanismname
                    )
                    label.setStyle({
                        fillColor: this.DC.Color.CRIMSON,
                        style: that.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
                        outlineColor: that.DC.Color.WHITE, // 边框颜色
                        fillColor: global.DC.Color.CRIMSON,
                        style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
                        outlineColor: global.DC.Color.WHITE, // 边框颜色
                        outlineWidth: 8, // 边框大小,
                        font: '14px sans-serif',
                        pixelOffset: { x: 0, y: -24 }
                    })
                    this.aedLayer.addOverlay(label)
                    LeftNavLayer.leftAedLayer.addOverlay(label)
                    const billboard = new this.DC.Billboard(
                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
                    const billboard = new global.DC.Billboard(
                        new global.DC.Position(Number(item.jd), Number(item.wd), 0),
                        '/img/leftnav/map-aed.png'
                    )
                    billboard.size = [20, 20]
                    this.aedLayer.addOverlay(billboard)
                    LeftNavLayer.leftAedLayer.addOverlay(billboard)
                })
                this.aedLayer.show = false
                LeftNavLayer.leftAedLayer.show = false
            })
            getLifeList({ lifetype: 11 }).then((res) => {
                res.data.data.forEach((item) => {
                    const divIcon = new this.DC.DivIcon(
                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
                    const divIcon = new global.DC.DivIcon(
                        new global.DC.Position(Number(item.jd), Number(item.wd), 0),
                        `
                        <div class="park-entitys-box">
                            <div class="park-title" alt="${item.mechanismname}">
@@ -430,29 +436,29 @@
                        </div>
                    `
                    )
                    this.parkLayer.addOverlay(divIcon)
                    LeftNavLayer.leftParkLayer.addOverlay(divIcon)
                })
                this.parkLayer.show = false
                LeftNavLayer.leftParkLayer.show = false
            })
            getLifeList({ lifetype: 12 }).then((res) => {
                res.data.data.forEach((item) => {
                    const label = new that.DC.Label(
                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
                    const label = new global.DC.Label(
                        new global.DC.Position(Number(item.jd), Number(item.wd), 0),
                        item.mechanismname
                    )
                    label.setStyle({
                        fillColor: that.DC.Color.FUCHSIA,
                        style: that.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
                        outlineColor: that.DC.Color.WHITE, // 边框颜色
                        fillColor: global.DC.Color.FUCHSIA,
                        style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
                        outlineColor: global.DC.Color.WHITE, // 边框颜色
                        outlineWidth: 8, // 边框大小,
                        font: '14px sans-serif',
                        pixelOffset: { x: 0, y: -40 }
                    })
                    that.comeLayer.addOverlay(label)
                    LeftNavLayer.leftComeLayer.addOverlay(label)
                    const billboard = new that.DC.Billboard(
                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
                    const billboard = new global.DC.Billboard(
                        new global.DC.Position(Number(item.jd), Number(item.wd), 0),
                        '/img/leftnav/map-activity.png'
                    )
                    billboard.size = [20, 20]
@@ -460,17 +466,17 @@
                        pixelOffset: { x: 0, y: -16 }
                    })
                    that.comeLayer.addOverlay(billboard)
                    LeftNavLayer.leftComeLayer.addOverlay(billboard)
                })
                this.comeLayer.show = false
                LeftNavLayer.leftComeLayer.show = false
            })
        },
        openPopups (value) {
            var popup = new this.DC.DivForms(this.viewer, {
            var popup = new global.DC.DivForms(global.viewer, {
                domId: 'divFormsDomBox',
                position: [
                    this.DC.Transform.transformWGS84ToCartesian(
                        new this.DC.Position(
                    global.DC.Transform.transformWGS84ToCartesian(
                        new global.DC.Position(
                            Number(value.lng),
                            Number(value.lat),
                            Number(value.alt || 0)
@@ -483,7 +489,7 @@
            this.$store.dispatch('pcFlyView', {
                jd: value.lng,
                wd: value.lat,
                viewer: this.viewer
                viewer: global.viewer
            })
        }
    }