+解决图标在打包后不能显示问题’/img‘=>'img'

liuyg

2021-12-16 eb4726935d89e2ed21360e91aa7d1e4bdbd6166a

+解决图标在打包后不能显示问题’/img‘=>'img'

 src/components/leftNav/index.vue

@@ -1,11 +1,12 @@
<template>
    <div class="left-nav">
        <ul>
            <li v-for="(item, index) in leftNavData"
      <li
        v-for="(item, index) in leftNavData"
                :key="index"
                @click="leftNavClick(item)">
                <img :src="item.img"
                     alt="">
        @click="leftNavClick(item)"
      >
        <img :src="item.img" alt="" />
                <span>{{item.label}}</span>
            </li>
        </ul>
@@ -13,69 +14,68 @@
</template>

<script>

export default {
    name: 'leftNav',
  name: "leftNav",
    computed: {},
    data () {
        return {
            leftNavData: [
                {
                    flag: false,
                    label: '标签',
                    img: '/img/leftnav/tag.png',
                    normal: '/img/leftnav/tag.png',
                    checked: '/img/leftnav/tag-checked.png',
                    layer: 'tagLayer'
          label: "标签",
          img: "img/leftnav/tag.png",
          normal: "img/leftnav/tag.png",
          checked: "img/leftnav/tag-checked.png",
          layer: "tagLayer",
                },
                {
                    flag: false,
                    label: '道路',
                    img: '/img/leftnav/way.png',
                    normal: '/img/leftnav/way.png',
                    checked: '/img/leftnav/way-checked.png',
                    layer: 'wayLayer'
          label: "道路",
          img: "img/leftnav/way.png",
          normal: "img/leftnav/way.png",
          checked: "img/leftnav/way-checked.png",
          layer: "wayLayer",
                },
                {
                    flag: false,
                    label: '实景',
                    img: '/img/leftnav/scene.png',
                    normal: '/img/leftnav/scene.png',
                    checked: '/img/leftnav/scene-checked.png',
                    layer: 'sceneLayer'
          label: "实景",
          img: "img/leftnav/scene.png",
          normal: "img/leftnav/scene.png",
          checked: "img/leftnav/scene-checked.png",
          layer: "sceneLayer",
                },
                {
                    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/activity.png",
          normal: "img/leftnav/activity.png",
          checked: "img/leftnav/activity-checked.png",
          layer: "activityLayer",
                },
                {
                    flag: false,
                    label: 'AED',
                    img: '/img/leftnav/aed.png',
                    normal: '/img/leftnav/aed.png',
                    checked: '/img/leftnav/aed-checked.png',
                    layer: 'aedLayer'
          label: "AED",
          img: "img/leftnav/aed.png",
          normal: "img/leftnav/aed.png",
          checked: "img/leftnav/aed-checked.png",
          layer: "aedLayer",
                },
                {
                    flag: false,
                    label: '停车',
                    img: '/img/leftnav/park.png',
                    normal: '/img/leftnav/park.png',
                    checked: '/img/leftnav/park-checked.png',
                    layer: 'parkLayer'
          label: "停车",
          img: "img/leftnav/park.png",
          normal: "img/leftnav/park.png",
          checked: "img/leftnav/park-checked.png",
          layer: "parkLayer",
                },
                {
                    flag: false,
                    label: '出入',
                    img: '/img/leftnav/come.png',
                    normal: '/img/leftnav/come.png',
                    checked: '/img/leftnav/come-checked.png',
                    layer: 'comeLayer'
                }
          label: "出入",
          img: "img/leftnav/come.png",
          normal: "img/leftnav/come.png",
          checked: "img/leftnav/come-checked.png",
          layer: "comeLayer",
        },
            ],
            viewer: null,
            DC: null,
@@ -85,54 +85,52 @@
            activityLayer: null,
            aedLayer: null,
            parkLayer: null,
            comeLayer: null
        }
      comeLayer: null,
    };
    },
    created () {
        this.DC = global.DC
    this.DC = global.DC;
    },
    mounted () {

    },
  mounted() {},
    methods: {
        generatePosition (num) {
            const list = []
      const list = [];
            for (let i = 0; i < num; i++) {
                const lng = 121.1372 + Math.random() * 0.5
                const lat = 31.0129 + Math.random() * 0.5
                list.push(new this.DC.Position(lng, lat, 0))
        const lng = 121.1372 + Math.random() * 0.5;
        const lat = 31.0129 + Math.random() * 0.5;
        list.push(new this.DC.Position(lng, lat, 0));
            }
            return list
      return list;
        },
        leftNavClick (item) {
            item.flag = !item.flag
      item.flag = !item.flag;
            if (item.flag == true) {
                item.img = item.checked
                this[item.layer].show = true
        item.img = item.checked;
        this[item.layer].show = true;
            } else {
                item.img = item.normal
                this[item.layer].show = false
        item.img = item.normal;
        this[item.layer].show = false;
            }
        },
        initialize (viewer) {
            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)
      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.aedLayer = new this.DC.VectorLayer('aedLayer')
            viewer.addLayer(this.aedLayer)
      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)
      this.parkLayer = new this.DC.HtmlLayer("parkLayer");
      viewer.addLayer(this.parkLayer);
      this.comeLayer = new this.DC.VectorLayer("comeLayer");
      viewer.addLayer(this.comeLayer);

            const positions1 = this.generatePosition(50)
      const positions1 = this.generatePosition(50);
            positions1.forEach((item, index) => {
                const divIcon = new this.DC.DivIcon(
                    item,
@@ -146,11 +144,11 @@
                            </div>
                        </div>
                    `
                )
                this.tagLayer.addOverlay(divIcon)
            })
        );
        this.tagLayer.addOverlay(divIcon);
      });

            const positions2 = this.generatePosition(50)
      const positions2 = this.generatePosition(50);
            positions2.forEach((item, index) => {
                const divIcon = new this.DC.DivIcon(
                    item,
@@ -164,34 +162,40 @@
                            </div>
                        </div>
                    `
                )
                this.wayLayer.addOverlay(divIcon)
            })
        );
        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 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)
      const positions4 = this.generatePosition(10);
            positions4.forEach((item, index) => {
                const label = new this.DC.Label(item, '建筑AED')
        const label = new this.DC.Label(item, "建筑AED");
                label.setStyle({
                    fillColor: this.DC.Color.ORANGERED,
                    font: '10px sans-serif',
                    pixelOffset: { x: 0, y: -16 }
                })
                this.aedLayer.addOverlay(label)
          font: "10px sans-serif",
          pixelOffset: { x: 0, y: -16 },
        });
        this.aedLayer.addOverlay(label);

                const billboard = new this.DC.Billboard(item, '/img/leftnav/map-aed.png')
                billboard.size = [16, 16]
        const billboard = new this.DC.Billboard(
          item,
          "img/leftnav/map-aed.png"
        );
        billboard.size = [16, 16];

                this.aedLayer.addOverlay(billboard)
            })
        this.aedLayer.addOverlay(billboard);
      });

            const positions5 = this.generatePosition(120)
      const positions5 = this.generatePosition(120);
            positions5.forEach((item, index) => {
                const divIcon = new this.DC.DivIcon(
                    item,
@@ -209,37 +213,40 @@
                            </div>
                        </div>
                    `
                )
                this.parkLayer.addOverlay(divIcon)
            })
        );
        this.parkLayer.addOverlay(divIcon);
      });

            const positions6 = this.generatePosition(10)
      const positions6 = this.generatePosition(10);
            positions6.forEach((item, index) => {
                const label = new this.DC.Label(item, '数字视觉')
        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 }
                })
                this.comeLayer.addOverlay(label)
          font: "10px sans-serif",
          pixelOffset: { x: 0, y: -16 },
        });
        this.comeLayer.addOverlay(label);

                const billboard = new this.DC.Billboard(item, '/img/leftnav/map-activity.png')
                billboard.size = [16, 16]
        const billboard = new this.DC.Billboard(
          item,
          "img/leftnav/map-activity.png"
        );
        billboard.size = [16, 16];

                this.comeLayer.addOverlay(billboard)
            })
        this.comeLayer.addOverlay(billboard);
      });

            this.tagLayer.show = false
            this.wayLayer.show = false
            this.sceneLayer.show = false
            this.aedLayer.show = false
            this.parkLayer.show = false
            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;
    },
  },
};
</script>

<style scoped lang='scss'>