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

liuyg

2021-12-16 eb4726935d89e2ed21360e91aa7d1e4bdbd6166a

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

 src/components/leftNav/index.vue

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

<script>

export default {
    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'
                },
                {
                    flag: false,
                    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'
                },
                {
                    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',
                    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'
                },
                {
                    flag: false,
                    label: '出入',
                    img: '/img/leftnav/come.png',
                    normal: '/img/leftnav/come.png',
                    checked: '/img/leftnav/come-checked.png',
                    layer: 'comeLayer'
                }
            ],
            viewer: null,
            DC: null,
            tagLayer: null,
            wayLayer: null,
            sceneLayer: null,
            activityLayer: null,
            aedLayer: null,
            parkLayer: null,
            comeLayer: null
        }
    },
    created () {
        this.DC = global.DC
    },
    mounted () {

    },
    methods: {
        generatePosition (num) {
            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))
            }
            return list
  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",
        },
        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
            }
        {
          flag: false,
          label: "道路",
          img: "img/leftnav/way.png",
          normal: "img/leftnav/way.png",
          checked: "img/leftnav/way-checked.png",
          layer: "wayLayer",
        },
        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)
        {
          flag: false,
          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",
        },
        {
          flag: false,
          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",
        },
        {
          flag: false,
          label: "出入",
          img: "img/leftnav/come.png",
          normal: "img/leftnav/come.png",
          checked: "img/leftnav/come-checked.png",
          layer: "comeLayer",
        },
      ],
      viewer: null,
      DC: null,
      tagLayer: null,
      wayLayer: null,
      sceneLayer: null,
      activityLayer: null,
      aedLayer: null,
      parkLayer: null,
      comeLayer: null,
    };
  },
  created() {
    this.DC = global.DC;
  },
  mounted() {},
  methods: {
    generatePosition(num) {
      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));
      }
      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;
      }
    },
    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);

            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)
            positions1.forEach((item, index) => {
                const divIcon = new this.DC.DivIcon(
                    item,
                    `
      const positions1 = this.generatePosition(50);
      positions1.forEach((item, index) => {
        const divIcon = new this.DC.DivIcon(
          item,
          `
                        <div class="tag-entitys-box">
                            <div class="tag-content">
                                南门口
@@ -146,15 +144,15 @@
                            </div>
                        </div>
                    `
                )
                this.tagLayer.addOverlay(divIcon)
            })
        );
        this.tagLayer.addOverlay(divIcon);
      });

            const positions2 = this.generatePosition(50)
            positions2.forEach((item, index) => {
                const divIcon = new this.DC.DivIcon(
                    item,
                    `
      const positions2 = this.generatePosition(50);
      positions2.forEach((item, index) => {
        const divIcon = new this.DC.DivIcon(
          item,
          `
                        <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;">
                                工建街
@@ -164,38 +162,44 @@
                            </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)
            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 }
                })
                this.aedLayer.addOverlay(label)
      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 },
        });
        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)
            positions5.forEach((item, index) => {
                const divIcon = new this.DC.DivIcon(
                    item,
                    `
      const positions5 = this.generatePosition(120);
      positions5.forEach((item, index) => {
        const divIcon = new this.DC.DivIcon(
          item,
          `
                        <div class="park-entitys-box">
                            <div class="park-title" alt="校外街路侧停车场">
                            </div>
@@ -209,76 +213,79 @@
                            </div>
                        </div>
                    `
                )
                this.parkLayer.addOverlay(divIcon)
            })
        );
        this.parkLayer.addOverlay(divIcon);
      });

            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 }
                })
                this.comeLayer.addOverlay(label)
      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 },
        });
        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'>
.left-nav {
    position: fixed;
    top: 15%;
    right: 6%;
    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;
  position: fixed;
  top: 15%;
  right: 6%;
  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;

        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;
        }
    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;
    }
  }
}
</style>