vue 使用mapboxgl 添加本地sprite雪碧图并且展示

 

文件放到public下面，运行后前面端口加上public下的位置

在初始化的地方获取sprite.json文件

 let request = new XMLHttpRequest();
    request.open("get", window.location.origin + "/icons/sprite.json", true);
    request.onload = (oEvent) => {
      this.spriteJson = JSON.parse(request.response);
    };
    request.send();

<div class="icon-svg">
        <div
          class="icon-div"
          :style="{
            'background-image': `url(${spritePng})`,
            width: positions.width + 'px',
            height: positions.height + 'px',
            'background-position':
              '-' + positions.x + 'px -' + positions.y + 'px',
          }"
        ></div>
        <div class="icon-box">
          <div
            v-for="(item, key, index) in spriteJson"
            :key="index"
            @click="clickImg(item, key, index)"
            class="icon-item"
            :style="{
              'background-image': `url(${spritePng})`,
              width: item.width + 'px',
              height: item.height + 'px',
              'background-position': '-' + item.x + 'px -' + item.y + 'px',
            }"
          ></div>
        </div>
      </div>