leaflet 加载普通瓦片地图

vue 框架

node -v 12.14.0

leaflet 1.7.1

主要代码：

<template>
  <div id="refSuperMap" ref="refSuperMap" class="my-chart-leaflet">
  </div>
</template>

import '../node_modules/leaflet/dist/leaflet.css';
import L from 'leaflet';

  data() {
    return {
      superMapMain: null,
    };
  },
  created () {
this.initMap();
}
  methods: {
initMap () {
      if (this.superMapMain) {
        this.superMapMain.remove();
        this.superMapMain = null;
      }
   	let tempLayerArr = [];
        let encryptUrl = this.packageUrl + '_{z}_{x}_{y}.png';
        let tileLayer = this.L.tileLayer(encryptUrl, {
          minZoom: 1,
          maxZoom: 18,
          opacity: 1
        });
        tempLayerArr.push(tileLayer);
        let mapOptions = {
          crs: this.L.CRS.EPSG3857,
          center: this.L.latLng(Number(this.centerInfo.y), Number(this.centerInfo.x)),
          zoom: 6,
          minZoom: 1,
          maxZoom:18,
          layers: tempLayerArr,
          attributionControl: false,
          // 是否支持拖拽
          dragging: opts.dragging,
          // 是否显示放缩按钮
          zoomControl: opts.zoomControl,
          // 滚轴放缩
          scrollWheelZoom: opts.scrollWheelZoom,
          // 框选
          boxZoom: opts.boxZoom,
          // 双击放大
          doubleClickZoom: opts.doubleClickZoom,
          // 隐藏右下角 iclient.supermap 标识
          attributionControl: attributionControl
        };
        this.superMapMain = this.L.map(this.$refs.refSuperMap, mapOptions);
}
}