liuyg
2021-12-22 75ca0722b86e7751202e7aec2e8d8ef96d68ce98
src/components/leftNav/index.vue
@@ -14,6 +14,8 @@
<script>
import { getAEDkList, getParkList, getComeList, getSceneList, getTagList } from '@/api/pc/leftNav/index'
export default {
    name: 'leftNav',
    computed: {},
@@ -98,8 +100,8 @@
        generatePosition (num) {
            const list = []
            for (let i = 0; i < num; i++) {
                const lng = 115.87186406 + Math.random() * 0.5
                const lat = 28.74449337 + Math.random() * 0.5
                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))
            }
            return list
@@ -115,6 +117,7 @@
            }
        },
        initialize (viewer) {
            var that = this
            viewer.scene.globe.depthTestAgainstTerrain = false
            this.viewer = viewer
            this.tagLayer = new this.DC.HtmlLayer('tagLayer')
@@ -132,25 +135,27 @@
            this.comeLayer = new this.DC.VectorLayer('comeLayer')
            viewer.addLayer(this.comeLayer)
            const positions1 = this.generatePosition(50)
            positions1.forEach((item, index) => {
                const divIcon = new this.DC.DivIcon(
                    item,
                    `
            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),
                        `
                        <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>
                    `
                )
                this.tagLayer.addOverlay(divIcon)
                    )
                    this.tagLayer.addOverlay(divIcon)
                })
                this.tagLayer.show = false
            })
            const positions2 = this.generatePosition(50)
            const positions2 = this.generatePosition(5)
            positions2.forEach((item, index) => {
                const divIcon = new this.DC.DivIcon(
                    item,
@@ -168,40 +173,47 @@
                this.wayLayer.addOverlay(divIcon)
            })
            const positions3 = this.generatePosition(50)
            positions3.forEach(item => {
                const billboard = new this.DC.Billboard(item, '/img/leftnav/map-panorama.png')
                billboard.size = [16, 16]
                this.sceneLayer.addOverlay(billboard)
            })
            const positions4 = this.generatePosition(10)
            positions4.forEach((item, index) => {
                const label = new this.DC.Label(item, '建筑AED')
                label.setStyle({
                    fillColor: this.DC.Color.ORANGERED,
                    font: '10px sans-serif',
                    pixelOffset: { x: 0, y: -16 }
            getSceneList().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-panorama.png')
                    billboard.size = [20, 20]
                    this.sceneLayer.addOverlay(billboard)
                })
                this.aedLayer.addOverlay(label)
                const billboard = new this.DC.Billboard(item, '/img/leftnav/map-aed.png')
                billboard.size = [16, 16]
                this.aedLayer.addOverlay(billboard)
                this.sceneLayer.show = false
            })
            const positions5 = this.generatePosition(120)
            positions5.forEach((item, index) => {
                const divIcon = new this.DC.DivIcon(
                    item,
                    `
            getAEDkList().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({
                        fillColor: this.DC.Color.CRIMSON,
                        style: that.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
                        outlineColor: that.DC.Color.WHITE, // 边框颜色
                        outlineWidth: 8, // 边框大小,
                        font: '14px sans-serif',
                        pixelOffset: { x: 0, y: -24 }
                    })
                    this.aedLayer.addOverlay(label)
                    const billboard = new this.DC.Billboard(new that.DC.Position(Number(item.jd), Number(item.wd), 0), '/img/leftnav/map-aed.png')
                    billboard.size = [20, 20]
                    this.aedLayer.addOverlay(billboard)
                })
                this.aedLayer.show = false
            })
            getParkList().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="park-entitys-box">
                            <div class="park-title" alt="校外街路侧停车场">
                            <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="校外街路侧停车场" title="校外街路侧停车场">
                                    <img src="https://map.hit.edu.cn/images/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">
@@ -209,34 +221,36 @@
                            </div>
                        </div>
                    `
                )
                this.parkLayer.addOverlay(divIcon)
                    )
                    this.parkLayer.addOverlay(divIcon)
                })
                this.parkLayer.show = false
            })
            const positions6 = this.generatePosition(10)
            positions6.forEach((item, index) => {
                const label = new this.DC.Label(item, '数字视觉')
                label.setStyle({
                    fillColor: this.DC.Color.PURPLE,
                    outlineColor: this.DC.Color.WHITE, // 边框颜色
                    outlineWidth: 2, // 边框大小,
                    font: '10px sans-serif',
                    pixelOffset: { x: 0, y: -16 }
            getComeList().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({
                        fillColor: that.DC.Color.FUCHSIA,
                        style: that.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
                        outlineColor: that.DC.Color.WHITE, // 边框颜色
                        outlineWidth: 8, // 边框大小,
                        font: '14px sans-serif',
                        pixelOffset: { x: 0, y: -24 }
                    })
                    that.comeLayer.addOverlay(label)
                    const billboard = new that.DC.Billboard(new that.DC.Position(Number(item.jd), Number(item.wd), 0), '/img/leftnav/map-activity.png')
                    billboard.size = [20, 20]
                    that.comeLayer.addOverlay(billboard)
                })
                this.comeLayer.addOverlay(label)
                const billboard = new this.DC.Billboard(item, '/img/leftnav/map-activity.png')
                billboard.size = [16, 16]
                this.comeLayer.addOverlay(billboard)
                this.comeLayer.show = false
            })
            this.tagLayer.show = false
            this.wayLayer.show = false
            this.sceneLayer.show = false
            this.aedLayer.show = false
            this.parkLayer.show = false
            this.comeLayer.show = false
        }
    }
}