leafletjs加载本地地图

本地地图展示

1. 参考官方文档https://leafletjs.com/index.html
2. 需要后端配合下载切片放置服务器中
3. 前端代码展示

<template>
 <div class="locationap-map" ref="map"></div>
</template>
<script>
  loadMap() {
        const _this = this;
        _this.MapContent = {
        //显示位置
          center: [30.62535686, 104.1710222],
        //显示层级
          zoom: 15,
        //控制缩放  
          zoomControl: false,          
          zoomSnap: 0.5,
          zoomDelta: 0.5,
          minZoom: 10,
          maxZoom: 18,
          wheelPxPerZoomLevel: 120,
        };
        _this.map = L.map(_this.$refs.map, _this.MapContent);
        //高德地图
        // L.tileLayer('http://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}').addTo(_this.map);
        L.tileLayer('http://localhost:8095/{z}/{x}/{y}.png').addTo(_this.map);
      },
   </script>
   <style  scoped>
   .locationap-map{
    height: 100%;
    min-height:100vh;
   }
   </style>