• 参考页面：原神-观测枢-提瓦特大地图

• 技术栈：vue，vue2-leaflet

项目初体验：学习并熟悉leaflet（maker和popup）

• 代码效果

目标是还原提瓦特大地图！虽然当前进度只有0.01%.. T^T

• 代码：

<template>
  <div>
    <l-map
      ref="map"
      style="width: 100%; height: 600px;"
      :zoom="zoom"
      :center="center"
      @click="selectPoint(-1)"
    >
      <l-tile-layer :url="url" />
      <l-marker
        v-for="(item,index) in markers"
        :key="index"
        :lat-lng="item.oneLatLang"
        :icon="selectId===item.id?selectIcon:oneIcon"
        :opacity="item.isMark?0.3:1.0"
        @click="selectPoint(item.id)"
      >
        <l-popup :content="setText(item)" />
      </l-marker>
    </l-map>
  </div>
</template>

data() {
    return {
      selectId: -1,
      map: '',
      zoom: 2,
      center: L.latLng(39.550339, 116.114129),
      url: 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
      markers: [{
        id: 100,
        isMark: false,
        oneLatLang: L.latLng(51.5, -0.09),
        name: '七天神像',
        type: '传送点'
      }, {
        id: 200,
        isMark: true,
        oneLatLang: L.latLng(39.5, 116.1),
        name: '七天神像',
        type: '传送点'
      }],
      oneLatLang: L.latLng(47.413220, -1.219482), // 添加的标签
      text: `marker<button>标记</button>`,
      oneIcon: L.divIcon({
        html: `<div class="mhy-game-gis-icon"><div class="gis-icon"></div><div/>`,
        iconSize: [32, 32],
        className: 'mhy-game-gis-marker'
      }),
      selectIcon: L.divIcon({
        html: `<div class="mhy-game-gis-icon"><div class="gis-icon"></div><div/>`,
        iconSize: [48, 48],
        className: 'mhy-game-gis-marker'
      })
    }
  },

methods: {
    selectPoint(id) {
      this.selectId = (this.selectId === id ? -1 : id)
      this.$nextTick(() => {
        const el = document.getElementsByClassName('leaflet-popup-close-button')[0]
        if (el) {
          el.addEventListener('click', () => {
            this.selectId = -1
          })
        }
      })
    },
    markPoint(point) {
      this.markers.find((item) => { return item.id === point.id }).isMark = !point.isMark
    },
    setText(item) {
      let str = ''
      str = (item.isMark ? '取消' : '')
      let classStr = ''
      classStr = (item.isMark ? 'map-popup__switch--marked' : 'map-popup__switch--unmarked')
      // return `marker<div class="map-popup__switch ${classStr}" onclick=bbb(\'${str}\')>${str}标记</div>`
      const htmlStr =
          `<div class="map-popup">
            <span class="map-popup__name-link"><label>名称：</label>${item.name}</span>
            <span class="map-popup__type"><label>类型：</label>${item.type}</span>
            <div class="map-popup__switch ${classStr}" onclick=markPoint(` + JSON.stringify(item) + `)>${str}标记</div>
          </div>`

      return htmlStr
    }
  }

<style lang="scss">
.map-popup {
  width: 280px;
  font-size: 14px;
  position: relative;
  label {
    color: #333;
  }
  span{
    color: #4a5366;
  }
}
.map-popup__type{
  font-size: 14px;
  border-bottom: 1px solid hsla(39,34%,89%,.32);
  padding-bottom: 10px;
}
.map-popup__name-link {
  line-height: 30px;
  display: block;
  cursor: pointer;
  text-decoration: none;
  color: #4a5366;
}
.map-popup__switch {
  position:absolute;
  bottom:100%;
  left:-19px;
  transform:translateY(-23px);
  font-size:14px;
  line-height:34px;
  background-color:#fff;
  width:72px;
  text-align:center;
  border-radius:3px;
  cursor:pointer
}
.map-popup__switch--marked {
  background-color:#ebebeb;
  color:#a6a6a6
}
.map-popup__switch--unmarked:before {
  content:"";
  display:inline-block;
  width:16px;
  height:16px;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAUVBMVEVHcExPVWdLVGZLVGZSW21VVWpKU2aAgIBKU2ZLVGdmZmZMU2ZKU2ZMU2dMVWhLVGZLVGZLVGdKU2ZKVGZSXGZNVGhKVGZNVWhKVGdJVGZKU2aZRr1+AAAAGnRSTlMAKlVwHAylAuamBWvcilH51PPZ7RlMf0Kz88lQ38AAAADBSURBVDjLzZPdDoMgDIVFBEFQwH/P+z/oIJpsqLPZ3XpBCv1CW3ooiv+yppR9CL0sm/t4Z3GY7W7CdQt4zoRg3ANtfQFaOHOc1sahvdwPt7x3i8MpS2NhPvcGNq+0hE/3V1opXaUsHmUGSPAUH1IPQyI4ZAb0YHHVe5c6ugx9BgSIuKodUNEVCL8BZAqySLJN8qHIp6aHRY+bFMwuuQ3Yvkou2QzMj7qdgOkRGIHxWfpKEX9jXQlgnglgmghgPNf4AkZjEJ0tuD4HAAAAAElFTkSuQmCC) 50% no-repeat;
  background-size:contain;
  vertical-align:sub;
  margin-right:4px
}
.leaflet-popup-content-wrapper {
  border-radius: 4px;
}
.mhy-game-gis-marker {
  border: none;
  background: transparent;
}
.mhy-game-gis-icon{
  padding: 3.125% 3.125% 34.3%;
  background-image: url(data:image/png;base64,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);
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;
  .gis-icon {
    display: block;
    padding-top: 100%;
    border-radius: 50%;
    background-position: 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("https://uploadstatic.mihoyo.com/ys-obc/2020/09/08/75276545/c59585d1fabc9c22ad3fcf94e1622aa8_357413506633071859.png");
  }
}
</style>

左侧菜单的展开与隐藏

左侧菜单（及图标）的展开与隐藏：由这两个样式控制.map-layer-control--visible .map-layer-control--hidden，hidden时多一句css：transform: translate3d(-340px,0,0);

leaflet的学习(L-control-zoom)和优化（marker,popup）

leaflet比例尺组件：l-control-zoom，属性position="bottomright"，啊，感觉学习怎么改这个比例尺的样式要很久

修改了marker的icon（图标真的茫茫多，就写几个意思意思吧）

setIcon(item) {
      const versionArray = [
        '2020/09/08/75276545/',
        '2020/11/10/75276545/',
        '2020/12/08/75276545/',
        '2020/12/21/75276545/',
        '2020/12/22/9918847/'
      ]
      const iconArray = {
        '七天神像': { id: 'c59585d1fabc9c22ad3fcf94e1622aa8_357413506633071859', version: versionArray[0] },
        '传送锚点': { id: '0cc42d15134cbb724304050fd0bbcaac_8799482478853097434', version: versionArray[0] },
        '秘境': { id: '186a776c87addad503af2d730230e333_5715047075425774284', version: versionArray[3] },
        '忍冬之树': { id: 'b1d8af1877bb2a97f7890985cc5a26a6_7290602061532571860', version: versionArray[4] },
        '风神瞳': { id: '9d3ded0ae2ac20aab3758cc475f9f65b_6769403721373052094', version: versionArray[1] },
        '岩神瞳': { id: '2868bba96b4e4fccab2667b65676cc26_3366803659083755673', version: versionArray[1] },
        '粉红玉髓': { id: 'd564ff58c9b0cabb7ca22c3dd54b7458_2879418302062023946', version: versionArray[2] }
      }
      const iconUrl = this.baseUrl + iconArray[item.name].version + iconArray[item.name].id + '.png'
      const oneIcon = L.divIcon({
        html: `<div class="mhy-game-gis-icon">
                <div class="gis-icon" style="background-image: url(` + iconUrl + `)"></div>
              <div/>`,
        iconSize: this.selectId === item.id ? [48, 48] : [32, 32],
        className: 'mhy-game-gis-marker'
      })
      return oneIcon
    },

修改了popup里的内容，感觉已经把es6的模版字符串用的炉火纯青有没有，里面遇到了一个如何在拼接html的函数里传字符串，传对象的问题（应该有更好的办法拿html而不是手动拼接吧。希望以后能优化出来 ）

setText(item) {
      let str = ''
      str = (item.isMark ? '取消' : '')
      let classStr = ''
      classStr = (item.isMark ? 'map-popup__switch--marked' : 'map-popup__switch--unmarked')
      const expStr = item.exp ? `<div class="map-popup__exp"><label>获取：</label><div><p>` + item.exp + `</p></div></div>` : ''
      const descStr = item.desc ? `<div class="map-popup__desc"><p><img src="` + this.baseUrl + item.desc + `"></p></div>` : ''
      const contentStr = (item.desc || item.exp) ? `<div class="map-popup__content">${expStr}${descStr}</div>` : ''
      const htmlStr =
          `<div class="map-popup">
            <span class="map-popup__name-link"><label>名称：</label>${item.name}</span>
            <div class="map-popup__type"><label>类型：</label>${item.type}</div>
            ${contentStr}
            <div class="map-popup__switch ${classStr}" onclick=markPoint(` + JSON.stringify(item) + `)>${str}标记</div>
          </div>`
      return htmlStr
    }

左侧菜单关闭时发现参考地图左下角有个毫无修饰的 新建标点

左侧菜单中panel和tab的切换

细化左侧菜单

主要是panel（观测者标点、我的标点）和tab（海灯节、全地图...）的联动与切换，源代码里应该是通过css样式来实现的（visible和active）

• panel的切换

      <div class="layer-control__panel-list">
        <ul>
          <li :class="selectPanel===1?'active':''" @click="selectPanel=1">观测者标点</li>
          <li :class="selectPanel===2?'active':''" @click="selectPanel=2">我的标点</li>
        </ul>
      </div>

      li {
        flex-shrink: 1;
        flex-grow: 1;
        line-height: 26px;
        cursor: pointer;
        width: 0;
      }
      li.active{
        background: #f9f7ef;
        border-radius: 2px;
        color: #333;
      }

• tab的切换

      <ul class="layer-control__tabs" :class="selectPanel===1?'visible':''">
        <li :class="selectTab===1?'active':''" @click="selectTab=1">
          <img class="tab__img--pc" src="https://uploadstatic.mihoyo.com/ys-obc/2021/02/10/75276545/2c16f8ac82e9d03d64b7d992cc57d1ed_4840089266454406085.png" alt="">
          <img class="tab__img--pc tab__img--active" src="https://uploadstatic.mihoyo.com/ys-obc/2021/02/10/75276545/4c43710ddb977ee09abf383e50cd3712_3919397148410738998.png" alt="">
        </li>
        <li :class="selectTab===2?'active':''" @click="selectTab=2">
          <img class="tab__img--pc" src="data:image/png;base64,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" alt="">
          <img class="tab__img--pc tab__img--active" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXwAAABkCAMAAACyy3u6AAADAFBMVEVHcEz19O309O308+308+709O308+308+709O308+308+708+708+708+308+308+308+709O308+308+318+308+z08+308u308+708+309O308+308+308+z08+z19O308+308+z08+308+z08+308+319O319O708+308+708+319O308u319O308+zz8+3z8+308+308+z09O308+z08+719O719O308u308+308u309O319O7z8+319O319O719O319O318+708+319O708+308+708+z19O3z8+319O718+7z8+308+308+308+308+z09O709O319O3z8+309O708+718+719O719O709O709O7z8u319O709O309O719O708+7x8ev08+7z8+3z8u309O719O708uzz8+3z8+z08+319O7z8u309O719O719O1RWGZASFhHTl7z8+309O709O5YX2zz8+1QV2ZJUGD08+5rcXz19O7Fxsf09O3z8+2VmJ7z8+zz8+1MU2Pr6eVcY3CPk5pfZXLz8u1jaXbz8uzl5eHr6uWGi5PX2NZ4foicoKWAhY3R0tCztbe5u7yHjJNbYW+4urvd3tpwdoA9RVbS0tGSlpzv7+nd3dppb3v09O2/wMHr6+bm5uLQ0c/09O2eoabV1dSCh4+gpKilqKx1eoT29u+7vb6MkJdmbHmtsLOlqKzDxMTJysnv7um1t7l1eoVvdYBgZ3T18+729vL7+/P19O7s6+ZXXm3x8eudoKXw7+rq6eT18+6oq6/v7unExcXMzMzm5eLX19WanaPT1NKvsrX08+718+5obnp9gYrMzMzf4Nx8govw7+rIyczv7umFipLi4t/d3dvNzs3m5eH19O3////08+719O709O/19O308+3p6eju7eny8u7s6+Y9RVb////08+1DSlv7/Py8v8WKj5mvs7p7gYzd3uH39/icoKnHys7x8vPY2t3s7e/Q0tahpa3i4+aTl6Dm5+mmqrKDiJLp6uwZ0/NDAAAA6HRSTlMA5OPT+eH80uLR0Pv6/fLU7uXnz/PO8ODv8ebp6PjM9O3N1ers/vXf9+rrzN/26fLz9ujM2+vf9/TM3vb48Obh5eDd1vn17PXj78/c8djX2efN9+Lu0O3b/N74zt3g59H6zd7O7O3SzfTX2dv78/rO5/r+/dPP0/nd/v3R+/7s6O313Ov97vvo9uv22Nny9/H48/fx5PTu+OTZ8/7z7uXi+vXu5uDp9Ofp7u7z8CLm9v315uDv3u/7+/2PGRBb2f7R7ejSxuvU5t3p3enc4JuF9fDj5fft+tjw7/Dy8bwFT2swOKz48T3vI6cuIwAAGwtJREFUeNrUmMtP22cWhhtjAzYEiI2xMb6ChQEHHGwQOMEEzD3mmmAIYAKIO4XSNIGiskhEKrUpWUYNaVVV2STKSOmiUTfpZKSRqi46VS+rrDpXaVSp/8S87/l+NsnMYkYzMFI//5LFTFdPXj3nPee1YMQdjUYivqAvODfiW7bOz1unpiyWLfxMpi1T0mg0GY0zMzl813Oy+La3C/HKC8vxOjo68Gd1dZBvYHBgYG0N39DQGn78u2F8HN/eXmIvkUjtJHbiZ8/im5g4jRewnba1T7fbpqcNhvOGXEMunk6nu6TTnVDv1IlTpxwOfA7HMH5m8/AVp9MZdjrr6srwKirKqqtravA1NvoX/Avdi/5F79gYvqKiPvzs9j57rKTEXlLS31/KX6g0VLCxga+4uBm/h55mT1dlZU9lZX19LX5VVbUhx5Dvp799//yvv33t//HAPhh0uyPu4IjPtzwyYrVaLRbg37SYtrZMJlPSZNzdBX4j6WctXQf8wsLtLNKXR/Z4qx2D+6C/P4AH6CSPv18fGmpoAHrBn0ok4qmdeBzoBX8gcNoWsNls7QaD4M/NPU/6l3S9J4BfB/Rgj9fmkNdK9mZzOAz0gr+irKy6ogL4GxuBv2ah2++/ubjo9QL96FjRaJG9r89ut8fInl9/qLQ0FAoVFBQUFwP/RrGnecXj8XT1PKivJ/76qtraqqqqpiZXS4vL1TL03fMvjx2+G+TdkajPF/GN+KzWuZF5wc/omy4kQd+YTCZ3gX4mZwnBzyF9ok/DL9fQD66C/gDor6Xxr72+1tAwNDTe0NAA9AnSj4P+2Xg8zuRPBAJAH7BNt7e3E71ByEv2dSd608FH9PnHMczgg7zZjOiHmXzQB/mKiprq29VIvr/R3+33ersXx7xeb5FE394XA/2SWCzWX1IqwS8oCIU2BP8Kou9p7unxeCq7urqQfESf5KuqXHgtLXq8zqzvnxwv/GgkGI243cGoLxikdqzWzflNJR4L0UM6fDlM/pJop1BjL/i14HcMAr/Qp3gk+Sr9lA4ftZNIpeKQzgR/YA/vBGztCD5ij5d7Xgu+Tter4Rf6WvAd5mFk/wqkc8OJ5JfViXeqb0E6iH3NAvCD/k0Ef3RsdHSU9IuoHQSfT/BTOwWwzoaIZ6WY2ul5gNiLeGrPIfiuJtckf3ri79Tnf/Xn4xRQlMqJ+iIM/jLpL1s3mXwG36S0Q/Zi/SxoP+t6hv5L2hlcleAr+kMDQ5r1qR1ovwHKZ/B3UtDOjmJP7dgCSjvtUL4Yn/QZ/UzwtexD+I5hM9+V8BXSL6uT4Ffwz+3G243+RgZ/EZ930TvK5At6oR8riZWU9ovxSR/aLyheKWbwPfh6oP0uCJ/B52uqUuxbiB5ffujZl8epnWgQf/mCyjvLU9Ypy7xlCsGH9ZNJZn9Ggq+8A/TbpF8u+Dluy2mdjHegHWLXhi68g+zvjSfG096JTzD7p88GTgt+m81gmzZMY96ep/U5bi9R+LqMd9TAdZhbiT8cZvbrnGVO8Q4GbjUGLoRf48fIpXdujnpHi6D8PsEfQ/LtFL6GH97BwIXwN5qhHk9zV5cHA7ceP8FfC+8g+y0uvUuvkp+fn5df/91x2ScS4biNQjtzvuW5ZQzcKes8kw/0TD5inzTuKu1k8Qf6ryRfcz61A+PvK/pDmeSPs+5I2wH6VDyFWSvjFug5bwMQfru0HaC/hJ9Oc75oh9ZpE/pEP/ymOQzlO2XcCnrk/tatmttsO6L87pvdXgR/LJN8DFwGH+yhHc5beIf0iwV9D3OP4EM654ieyXch+HQ+tZPfiR/oz+qfHY983O4oo8+yOeebs1pZd9h1LBcsJospqbQ/ky6bWVlLmXnLX4cSz2qmbErfUT1TmqZYB9HnyE0lUpi40P4EXwD0A+02al85H+HnxNWir5VN4teiD+ubnWFzWKJfV1cB+py41P6ClM1uP9DjQ/TF+fYie0zh71dls5TJp/WLpWx6VqB8T0+XRL++CnWHE7fJ1TSpn+TI7dQDPV9eXp7h+bHAjwQjUXfEx+TPLc9x4G5Ozcu43coo3ziTo6qmeEeL/itNc5BVc59FH8JfE/HIv0CDGrgq+Qh+ummKdBh8aZrtKvkM/iUVfST/1MtNc1ic/6aZA/eG06mSj+Cz6HPkSvIl+Bi3Y2OZ5GsDtx/JD2lNU+Zt85kVJXy0fDz2fEk+By6jr58U9qD/Rl7e7Gxedt5Px+AeNydu8LDtaEXfouFPsmpSOkZZsjhvs/617QxK2ZQla181zSGFnj80zYQkP8ElK4WqSfRcs1TNh/bPH7YdNW9fajvSNEX6rSybZjbNMq3tEP/t6urGBdV2FmXesmm+1HZiKvmUvpq3UvSZfGk7wI+mKWvWOUYf+JtaoHzRjj6TfLxbfzqGgRvlnoWi7xvBwJ2D8qfmN9NNM2lSyc/ZJfslRn873XYUe5X8QVrnzmePHv/w9tV33nrrnatv//D40Wd3pOtowU+w7NA6Z1XwyR7RtxnYNRF8jb0kv1dzjgxcLfrDw8I+LM7XmiajX3MLwVfsu7thHQzcsVElfSn6UL6suFR+qXSdjY0zbJpYsR52eXqgfK5YtWrFqrrInj+pKZ/Wz8vPmwX69fX17Gd/PPINF8J3i3eIn8a3WkAfS9aWVvRNGe8sLamen6WuCy8V/d8dfHjv45//6X1878ODF2yaafxS9Cfi6JoTASxZqugbyF+uC5y59E6v8o4ov02rO2ZeF8xi/HCd80YaP8tOdaPyDoo+c4+mCfpYsnhgoHdimneIn9op4IaLJYsbLo3fU6+8Q/xNrouTTS2uSTVxxfmKfnZedvb6V0fcOiOct9Eg8s/Tzhz3W1V25LQj+63cFoyyY6njTuFh21HGf/rjNbD+5YPHjw6+vX/nxf6d+98ePHr8wS/4H6/9+FScs7eXYt3hfiunnbTzYR2WHVX0D8sOPwT/RJuyTmurgxvuFdlv5bSDicu6U1Mt9wX/QuNCN3asbu63quzIaUf2W3FOiRR9TNwCVXYgHRZ97rdSdup52qHz5b6g18vAzRf6s0o72XhrT4544KLrQPzoOnC+dWRkfn5z3grpm7bY8zXtGGXeYuJez3RNCT618/XnVwH5/feevpD7whqWLG3L2n/6yfv4v65+/gWafop1J76T6Zpqw7UFMG3VfYHB17Hq9/I77PltDtRNR6uZ3pHzAk87Tp52SL9CFlx12kHZXOwew4rrldNOkdIOXozR54Yr54UzsL467TTzvICu86C+EsLH16R1zUkX0EvP78S0nc0X9vhOnvrLUd92wN/nw8eygyXLyqaZ7vnKOhp6Bn/7leSXf/2Hd4H3vW9ofdUzOXC1JQvT9ptP8E/z7u+/SOxJz8eCG08fNdXAnWbfYfSl50vf6e09LJqwTptD3XbY89WSpY6a7PnMPpK/4GfTZM/kbWdUnC93NcC3a+hLaXwuWTxrrqwUP2TP78GS1SXKR9O8WKWWrMlJvTwJ/qwM3PV1Sf7ly31/P9LzAq3PshnxYd7OKecD/wXLBaGfNCZngH8XGy7vC5nrjhi/8ABo792Vsin0ZcnSaj4WXOJvuHsP/zwHlH48xa4pzqf0ZeSCvlx3coW+uqtpyU/Tz/T8sFw14fy6G3UVdRXaVRPOxw8bLuiza9L5SvraktUv0hf6IeX8M0r6CH4PJi43XOn5TXLVpPMnWxT9TtKXicvgX0b2Y0eY/f/pnn//I6A/+Pf3/APg/+jTX8E9nzfNpvRVU6rm7Gy+hl6if/LkybYnR9h2/vt7/t1rP197dP0/uec3/Ab/6d1f0z2fS5aq+W/kHQ5c0L/8D2rOL6at+4rjajNF6iqUZHtYtkTTpMiq2odN22Of+jBFo8pDHlItD3tCTZ/ycq/TWSCC5s4Y6hEDBuKA+ScCSrApYAI2JE0JaYEQmuYPIPEn06ZOUQ8YCJCEQP7ud87vXvte+3cB42siH0XCTm6s5HuPz++cz+97f1l/vWJmzd8ezx9qZelcreX5JZV1bcW8zy9uq6ss0fL8MfYlmczJLJ6P6y3WfFb0T1LiZx2n3P/OrH5/2zy/xAXyBQ3Pv5HQ6PtsZ+9peL5fBldzpvF8VJ63mrvf5fIz8bMuv2GeX20D6UZ0yPpm1AbCsI1+E+X59ySwNWQcz6cp66RadXZnYepn/ce0srMdnv89E7Ja5fklRVYwjLy6ZpXnN3hBupl5PP9dPuGy0sOER+0tWcfMWXS3x/OrJXCVqCNuVx5sGHmDKs9vdoHUkIE8H8vOSSXzs0j9f785nl9iA9eQwvOrXbBZ+FwNCs/vcYGtORN5PjWbJ3HFPU7iW66agxeS5/lDTMIShe1ccsAWwjGs8PxmL7hyMpLnn1Q7TUp9yz4z9ra2w/NbQapWeH6XvBXtwScPKjy/QYLJjOT5SreDdec0y/zTl01ZcJPm+ZUg3+Bw59RZ2HKc/YLz/HsyVGYoz0ft1cy37P7KjAk3SZ5/qtoKFzhdOFUDSUTNF5zn+8HakKE8fzfTfreq/g9vgufXQI1CNSchqTir8Hz2AZnK8xXlT1vYr59dMWHBTZLnV4K1mqOdLkgyBjnPH7PCuUzl+Yr8dAMum8J2kuH5QxIWHYxLwrXW+Wjt6fzT1fU+wZ/Jw5zn+0HqyVSez/sdC8Yfv04dLyTH80fBe4rzBVGPmbswP6vEQr+g42wgnv83LwxkLM+nNp/L/98d5vlDDjjHeb5otup8OhuLJ72JF7g4z28HR0/G8vzjSuJbLL/dYZ7fBV7O80UFv29lVhvz+YKyz3m+F7q2xvPPn98Czx8pndpJns/afJxx5yyWr0yo+UnwfAlu0ZBbIuA51teK6s+Un09zEzlPM/H8SpC2xPPLfb5yAc/Pzw1oeb4bynaU51O7Y2Hq395Rnn8JJF7xiwSJv67WG8cL5dXDxIvqiOfnSDC8BZ7vxr/huZ7A851QruX5THwNz/+pUY38xnx9PDCJ51PmM/X/taM8/y4UEc//VsCQrWrRWYQltfAIUv8b4vl1cHdTnl8fBugYBeg9H8/zSfwYz2fia3h+oXGve8Ysns8Tf27uyg7y/CErfE88f1TwP1vSpPt69D4kxADx/Jtg7dmY5789wpb0un37gjI4x+J4PhOfeL5fKsMRl4mv4flMfH+VIPxMfLN4vkWR/+oO8vxKKOY8X7Rv9ZDr/ZLePFL6TcHeFuf5xXBuY57fYCPtP/qoyQq5LXqezzP/wPt2aESejzU/xvOZ+BWcagYdZRqeX8vEN43nU9Wfm/th53j+J5NQRDz/hug7vUBr7ZLyLryMb9cE190jnl8HZzfk+U0OkAc5z29xgDWk4/koPvJ8Jj6WfV52VJ6P4hPVnLZCUMPza3nmm8TzebyXRp5fFMfzvXCJ/PlCmLnGxF4JR9/mP2HvV0WIh/z5w+DdgOePsc9xFKg8f4x9CfIvani+kvmHmPjKgssyvzBUVo4zVjTz2ZwhR3i41cw3jednUc2f+zptPL8IdDz/nRJfZIiMOzbDzJ99zAdfq/JOcJ2X/Pk5EV+zEc+vt7P1vHMsxvNHUEf3+SjPV7sdzPwv38fMnw7kywB25Plq5ttB7uQRgY4jqvim8Xy+5P6YLp7P2kk9z28HF/nzS3wi8Rd5mX+BWCF3mb95JNpYaaaNLBe0G/D8dondPL+e54fQ8Rk4yqpO0/j4eB70jY/bD/HM/+cHHojwj7Yjz+eZX8i+O9Ym4vlBcNw/8mtedszj+VjyLXNX08TzmfbFep5/AVrJvnBL2Mf1qyNWHkRWldedogsryZ/fCn4hz2/ATYI7DfE8v76OCews+NPB8ug8fQBr/kRBh0TYyBPqxcznC+6x2n6QPbLPzuasJhmakOdHy45JPB/lP307PTwftf9Wz/NbYZTMmkXiLnpNRWpq4zO7LLyujgxrAzAp5PkeACn0lmSNC+k3peyuBA4ebPJ4PCzzPZ5yXHDz+KTd1/3lp4fDYEeeT5nfCLnd+7sdkD9l98lB4vkovpk8n4r+/9LC80n7z2+1XdPw/Dtwjvz5bWLx1UZ/9tW8cZvPyk4Z9ZrtcEfI88ckf/3bf0mgF3m/OHq0quY65/nY5x+6PliD1UbOD4RZn896nV4oR55P4k+Hp7L37p92gsyKD+f5vOyYyPNR/e/SwfN53t+Soe1ajOfb4Ab584sNBshldbBVfr6OCC8rJpNyC3jFPP9XyPOHmygCLNn5qwItz6chqwU/SwoV0pCFPB/F/92JaLeTnV0YcGJBsk8Rz69VhyyzeD52O5+lgeeT9h/fwu2StmtRni/BTXJrSrBJ6m+U+Eww8uc3gLQhz6cXTOAWAc+nPr+lv6OMLbhsxMUJl/X5jRA4rAxZx47tnQ6WsXvfGCzzgRyu+umIZsgyi+cz9d8zn+eT9r9k2ks1qL7K8/OghPz5hg61NZ32y0YONvLnN0Pe5jwfxRfwfMr8A9TtfMDxAvJ8FwSR56P4M2VIlSKeClZwSt3sJsiNQb7gmsnzWdk5bDrPj2l/81obqc95vgy8zTf06vTNa8XPN7hKJsDQA/LmPB/FF/B8ZcjCbgd5Pk64rOjboAp5Poo/ZQXJXVXoD04gzz8TDEd8BWrmm8jz5+b+bDrPTxBf4flMfPLnGxulXmq0f2h0kUz+/ByQN+f5lPmJPB8z//c882M8fyIC3cjzqeZ3l+7N3l8qs4J/n3j+g5kj0QXXPJ6fqvhCnh9TX0l8DtZ42dmzS1B2HH29feyeRJ5FtX9t6FzOI484KztGPP+t5otKhABC6uuRRJ4fwwufNgXZFDz1DwUvKI61Unsu1h7uz9fiBZN4fqplR8zzdQtulOezBZf8+fELbmSR+pz55U7ojBaesOHXQyJ/PltwDXn+gOiv+RN5Poqv8HwPDrgqz6+I+vNPBNk/toAM4rVp4PkpkjUDnq9rNVWeT63mnl1/LzbaNn8WUVkyLzpLq43CVhP9+S1E1sQ8Xyx+HM8fGeGZz3l+VZ8nEOX5FejPL50gf/6DgIdbNWvTwPNTbDWNeL6iPuZ9lOezIYv8+foh69WKrs7zjmc5AnnPn9HtSIgy8uezIcuQ59efV6IboFt9fV3H87vHIwUb8vxpOdJpr7qfXp6f6pBlxPNJfT3PR7zwWQJeWNZ2OGHIRZS84gQH/z6sJ064deTPH4DJDf351G9St5Poz3cCLijd8Tw/0DET5fnZBb14jc9pr00jz08ZLxjxfAJrOp6vgLU9erD2XCv+UweEETAAPFam3UTrWiX581vBv7k/n4YsvT9/JOR2+tjC0XExuuCG3EHKfDd4Yjw/e/+JmUAYAXe/veJIunj+7XTxfKa+jud/3A4u8ufrkbJD59Z5jFuIDzW3ZFVOQMrkz3dB++b+fN5q6vz5OD1YPQVanq/688PQoeH53J/f3YHjVjBdPP9qunj+z4vieD5uptB5OzbBLoqGKazLmq4ngel7KfF7Ir7mzf35sSEr6s8vl2tC1xWDuMLzVX++EwJRnq/x53e7+8+ki+f/mCae/znLfT3Pf4dvI+7ao99G7NWJv4KbKdYXcb+h3UaksxdwG9HAn18fC1xwNW+Psoo/MhLz55eDYyLmzy9lF3OeX1UqiKo08PwUtxGT8udPQtEuwQb6C536WGd0X4a4XfR7hHZwA13szw8Z+25Ccf58dqnN3aHEeASsE5znG/t2TOb5KW+gb92f/0klFPNnQfV155EeZq6rO4pqPNdZR/h5O2gdEfvzjcX3BeP8+dfjNpNVnu/IFYQjDTw/VetIMv58NE3ReTt601TuvN4gu6g3zOoLzwCdt3MRTVNint9cMFxgECPx/vzCgNsTDXvBYT3P1/vz08HzUzRNJefPv0t1Z8+uOLvg49mNQ2NisPbQeTt1cHcTfz793I4//8TMzITIn/+gouIPZvP8FO2CyfnzL4HEz9spEu+iPFkRir+uNcrieTsfolE24/35KRtlk/Tno0Uc/fl6i7hM0+zrRdZSW5cWEm7AgtYiTv78SpAy97ydGM9P1SKepD//Anj5eTtdCRx/QcU4uQ/1a4AW7A/y83a84M/g83aiPD/VhyOSPG8HHwvi5+244jw7Wk+sc1Wz2mp3cl38vB18LCiTz9tR6E7KjwUle94OPhBH6usfiFt7ocOX8iMFMz95mat7II7Oz8/BB+Iy+rwdnvgpPxCX7Hk79CgonSirexT0VcLTb86l588XO+X4R0Hx/Pz/d3f3Kg1DUQDHg87i3s2Ac5e4uIqDFMxYkb6A6RM4uHTUh+jiqg/QD0FQHPwaOwmiSx/DnI8k19qmyb0nwrn3ARxiCScH7u8PV0F1ezv4w3e/Clrb24FL0HQD3XztV/IvHsnPh0vQ2r0deOsLXIKu7e3w9f9wO6zBXtD1f/Lz0z+g39vZlbn+X9fbIfhi2wK+ID8f4Qv13s6WBHxh4e28IvkC3k498oX8fCBffPB2JMgXGz8fsSPy8ytiR3PAjtDbAexo3wdvRwI7svHzM+YLHn9V5ov9fGS+1Pr5xj6/JcF8Wfn5CNwxLlgBuJtfDtnPR+BOsZ9f7POFgDsbPx9pR/bzK9COXfbzry/n50PVfn62zxeiHe38fEZNiZRdh5pSOqJHqKlyP5/mHSHU1NbPzzjfEB3rMs4XmikDiKYQ56vdz8cxX4jztfbzGbLOe7jLIWujh4uQtQd+/okcZG3t52/OkHA3e7h/CPe46OEOkXD3ws+/ECPcXXq4GC9Y3cMdJIPcz+d4gRd+fiQWL3Dq4WbZjnU93FvMdmjs4S7Z57fksh2OPVwO1pT1cBMO1ijt4S7u848EgzWuPVxONb2s6uFyqmmmuIf7a58vmmpy7+EWkbLFHq4RKdPdwy32+cKRMokebp7ne4Y839UM8nz3WZ7vyYceLu/zI+k8n0gPd2WY8s6XHi788qXDlII93L9J1sSjHm760hdPsgr2cGHYgTkfh8wkidJhx6ce7p58jFioh3tGgz6VKXnShH8CFND96OE2keEW6eGmD/4AJ036yqIsZdxP+vh960MPd6OhAL1rD5cTcfyFa/ZwMQua/uq7XeU93NPRJGjk4Tv2cOm9c3a8tIfbj6KYt5qKe7iHbzdBM8eth5vt88t6uPk+X2cPtz0aB00dpx5uaOzzy3q4uM/vaOzhPnxOguaOSw/X/Moq7+HC4+91tPVwN99vgkaPyz4/n3eW7/P7Zg+X92pq9vnR23QcNH2c9vmh0cMt2+djD7ejYJ/fbsU7H9/v069J8A/nB0tnUdafoJnxAAAAAElFTkSuQmCC" alt="">
        </li>
        <li :class="selectTab===3?'active':''" @click="selectTab=3">
          <img class="tab__img--pc" alt="" src="https://uploadstatic.mihoyo.com/ys-obc/2021/02/02/75276545/c567b06b45731f7b717489d84e42d5a8_1481937890353876637.png">
          <img class="tab__img--pc tab__img--active" alt="" src="https://uploadstatic.mihoyo.com/ys-obc/2021/02/02/75276545/b3a0a7def938d3f808d8b643dbb6a0ab_1442014105576212461.png">
        </li>
        <li :class="selectTab===4?'active':''" @click="selectTab=4">
          <img class="tab__img--pc" alt="" src="https://uploadstatic.mihoyo.com/ys-obc/2020/12/21/75276545/5be221faea5c6a1dc438e99560fd4728_4477393884157974390.png">
          <img class="tab__img--pc tab__img--active" alt="" src="https://uploadstatic.mihoyo.com/ys-obc/2020/12/21/75276545/5ea73b7be08f0f9b6059d308ce94f185_2984733876175625841.png">
        </li>
        <li :class="selectTab===5?'active':''" @click="selectTab=5">
          <img class="tab__img--pc" alt="" src="https://uploadstatic.mihoyo.com/ys-obc/2020/12/21/75276545/76f527395d27cd478ce57cd64f7e0f46_5127368496664517484.png">
          <img class="tab__img--pc tab__img--active" alt="" src="https://uploadstatic.mihoyo.com/ys-obc/2020/12/21/75276545/a8735d936127a2405530a2adec019fc3_7158521410518821527.png">
        </li>
      </ul>

.layer-control__tabs {
    position: absolute;
    left: 100%;
    top: 180px;
    pointer-events: none;
    overflow: hidden;
    li{
      white-space: nowrap;
      pointer-events: all;
      cursor: pointer;
      margin-bottom: 10px;
      transform: translate3d(-100%,0,0);
      transition: transform .2s;
      .tab__img--pc {
        display: block;
        height: 50px;
        width: auto;
      }
      .tab__img--pc.tab__img--active {
        display: none;
      }
    }
    li.active{
      .tab__img--pc{
        display: none;
      }
      .tab__img--pc.tab__img--active {
        display: block;
      }
    }
  }
  //动画效果：tab从左侧滑出
    .layer-control__tabs.visible li {
    transform: translateZ(0);
  }

这块代码我写的挺冗余的，有很多优化的地方，这种简单的切换应该抽成组件。另外还有一种方式，不通过改变css样式也能达到预期效果，代码如下：

①        <li @click="selectTab=5">
          <img alt="" :src="selectTab===5?
              'https://uploadstatic.mihoyo.com/ys-obc/2020/12/21/75276545/a8735d936127a2405530a2adec019fc3_7158521410518821527.png':
              'https://uploadstatic.mihoyo.com/ys-obc/2020/12/21/75276545/76f527395d27cd478ce57cd64f7e0f46_5127368496664517484.png'"
          >
        </li>
②        <li @click="selectTab=5">
          <img v-if="selectTab===5" alt="" src="https://uploadstatic.mihoyo.com/ys-obc/2020/12/21/75276545/a8735d936127a2405530a2adec019fc3_7158521410518821527.png">
          <img v-else alt="" src="https://uploadstatic.mihoyo.com/ys-obc/2020/12/21/75276545/76f527395d27cd478ce57cd64f7e0f46_5127368496664517484.png">
        </li>
③        <li @click="selectTab=5">
          <img v-show="selectTab===5" alt="" src="https://uploadstatic.mihoyo.com/ys-obc/2020/12/21/75276545/a8735d936127a2405530a2adec019fc3_7158521410518821527.png">
          <img v-show="selectTab!==5" alt="" src="https://uploadstatic.mihoyo.com/ys-obc/2020/12/21/75276545/76f527395d27cd478ce57cd64f7e0f46_5127368496664517484.png">
        </li>

.layer-control__tabs {
    position: absolute;
    left: 100%;
    top: 180px;
    pointer-events: none;
    overflow: hidden;
    li{
      white-space: nowrap;
      pointer-events: all;
      cursor: pointer;
      margin-bottom: 10px;
      transform: translate3d(-100%,0,0);
      transition: transform .2s;
      img{
        height: 50px;
        width: auto;
      }
    }

这两种使用方式的差异体现在是最终生成的html上，对于响应时间的优劣没展开测试（自我感觉切换的都挺快的）

css代码优化

关于地图底图的替换，放几个参考地址备忘，有时间再实现吧。

暂列关键词，瓦片地图，瓦片切割工具等等
leaflet加载离线瓦片地图
HTML超大图片加载显示解决方案--图片切割转换成瓦片地图（BaiduMapTileCutter）
实现地图加载自定义图片（含图片切割）
瓦片地图原理