+3d 2.5d

liuyg

2021-12-31 e40ee62d3e9b71ffe3432d32a53a00c4097b5708

 src/components/leftNav/index.vue

@@ -14,7 +14,7 @@

<script>

import { getAEDkList, getParkList, getComeList, getSceneList, getTagList } from '@/api/pc/leftNav/index'
import { getLifeList, getMonitorList, getSceneList, getWayList, getTagList } from '@/api/pc/leftNav/index'

export default {
    name: 'leftNav',
@@ -48,12 +48,20 @@
                },
                {
                    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: 'monitorLayer'
                },
                // {
                //     flag: false,
                //     label: '活动',
                //     img: '/img/leftnav/activity.png',
                //     normal: '/img/leftnav/activity.png',
                //     checked: '/img/leftnav/activity-checked.png',
                //     layer: 'activityLayer'
                // },
                {
                    flag: false,
                    label: 'AED',
@@ -84,6 +92,7 @@
            tagLayer: null,
            wayLayer: null,
            sceneLayer: null,
            monitorLayer: null,
            activityLayer: null,
            aedLayer: null,
            parkLayer: null,
@@ -126,10 +135,10 @@
            viewer.addLayer(this.wayLayer)
            this.sceneLayer = new this.DC.VectorLayer('sceneLayer')
            viewer.addLayer(this.sceneLayer)

            this.monitorLayer = new this.DC.VectorLayer('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')
@@ -155,22 +164,33 @@
                this.tagLayer.show = false
            })

            const positions2 = this.generatePosition(5)
            positions2.forEach((item, index) => {
                const divIcon = new this.DC.DivIcon(
                    item,
                    `
            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),
                        `
                        <div  class="way-entitys-box">
                            <div  class="way-title" style="border: white 1px solid; padding-left: 2px;font-size: 12px; background: #0066ff;  width: 12px;line-height: 13px; padding:2px 1px 2px 1px; color:white;">
                                工建街
                                 ${item.roadname}
                            </div>
                            <div  class="way-sign-box">
                                <img src="https://map.hit.edu.cn/images/roadsign3.png">
                            </div>
                        </div>
                    `
                )
                this.wayLayer.addOverlay(divIcon)
                    )
                    this.wayLayer.addOverlay(divIcon)
                })
                this.wayLayer.show = false
            })

            getMonitorList().then(res => {
                res.data.data.forEach(item => {
                    const billboard = new this.DC.Billboard(new that.DC.Position(Number(item.jd), Number(item.wd), 0), '/img/leftnav/map-monitor.png')
                    billboard.size = [20, 20]
                    this.monitorLayer.addOverlay(billboard)
                })
                this.monitorLayer.show = false
            })

            getSceneList().then(res => {
@@ -182,7 +202,7 @@
                this.sceneLayer.show = false
            })

            getAEDkList().then(res => {
            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), item.mechanismname)
                    label.setStyle({
@@ -203,7 +223,7 @@
                this.aedLayer.show = false
            })

            getParkList().then(res => {
            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),
@@ -227,7 +247,7 @@
                this.parkLayer.show = false
            })

            getComeList().then(res => {
            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), item.mechanismname)
                    label.setStyle({
@@ -247,10 +267,6 @@
                })
                this.comeLayer.show = false
            })

            this.tagLayer.show = false
            this.wayLayer.show = false
            this.sceneLayer.show = false
        }
    }
}
@@ -259,39 +275,45 @@
<style scoped lang='scss'>
.left-nav {
    position: fixed;
    top: 15%;
    right: 6%;
    top: 100px;
    right: 20px;
    // bottom: 20px;
    // left: 0;
    z-index: 1;
    li {
        margin-bottom: 8px;
        font-weight: 400;
        display: block;
        width: 98px;
        height: 33px;
        line-height: 33px;
        background-color: #fff;
        border-radius: 17px;
        text-align: center;
        font-size: 0;
        cursor: pointer;
    ul {
        // display: flex;
        li {
            // margin: 0 8px;
            margin-bottom: 12px;
            font-weight: 400;
            display: block;
            width: 98px;
            height: 33px;
            line-height: 33px;
            background-color: #fff;
            border-radius: 17px;
            text-align: center;
            font-size: 0;
            cursor: pointer;

        img {
            width: 24px;
            height: 24px;
            vertical-align: middle;
            margin-right: 10px;
            image-rendering: -moz-crisp-edges;
            image-rendering: -o-crisp-edges;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            -ms-interpolation-mode: nearest-neighbor;
        }
            img {
                width: 24px;
                height: 24px;
                vertical-align: middle;
                margin-right: 10px;
                image-rendering: -moz-crisp-edges;
                image-rendering: -o-crisp-edges;
                image-rendering: -webkit-optimize-contrast;
                image-rendering: crisp-edges;
                -ms-interpolation-mode: nearest-neighbor;
            }

        span {
            display: inline-block;
            vertical-align: middle;
            font-size: 14px;
            color: #2f2f2f;
            span {
                display: inline-block;
                vertical-align: middle;
                font-size: 14px;
                color: #2f2f2f;
            }
        }
    }
}