地图发布格式为4490
效果展示

1. 下载proj4leaflet+esri-leaflet

  npm install proj4leaflet esri-leaflet

2. 在main.js注册proj4leaflet

import proj4leaflet from 'proj4leaflet'

3. 渲染地图

<template>
  <div class="map" ref="map" ></div>
</template>
<script>
  export default {
    data() {
      return {
        map: null,
      }
    },
    methods: {
      loadMap() {
      //esri-leaflet在vue中使用的方法需要require("esri-leaflet")引用
        let esri = require("esri-leaflet");
        let tileMapUrl = "http://localhost/:6080/arcgis/rest/services/blackMap/MapServer";
        //如果这里不使用new L.Proj，使用L.Proj会出现报错**Error in mounted hook: "TypeError: this.callInitHooks is not a function"**
        let CRS_4490 = new L.Proj.CRS("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs", {
          resolutions: [
            1.4062500068012802,
            0.7031250000000002,
            0.3515625000000001,
            0.17578125000000006,
            0.08789062500000003,
            0.043945312500000014,
            0.021972656250000007,
            0.010986328125000003,
            0.005493164062500002,
            0.002746582031250001,
            0.0013732910156250004,
            6.866455078125002E-4,
            3.433227539062501E-4,
            1.7166137695312505E-4,
            8.583068847656253E-5,
            4.2915344238281264E-5,
            2.1457672119140632E-5,
            1.0728836059570316E-5,
            5.364418029785158E-6,
            2.6822090148925785E-6,
            1.3411045074462893E-6
          ],
          origin: [-180.0, 90.0],
          bounds: L.bounds([102.91070446372038, 30.040562599897378, ], [104.9786245822907, 31.472138017415993])
          //这里可以有origin、transformation、scales、resulutions、bounds几个参数提供
          //选择，其中scales与resolutions不能同时配置
        });
        this.map = L.map(this.$refs.map, {
        //自己配置crs
          crs: CRS_4490,
          ...this.MapContent
        });
        //使用esri-leaflet
        let tileMapLayer = esri.tiledMapLayer({
          url: tileMapUrl
        }).addTo(this.map);
        // 加载官网Arcgis
        // this.map = L.map(this.$refs.map, this.MapContent);
        // L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}', {
        //   pane: 'overlayPane'
        // }).addTo(this.map);
        // 引用父组件组件方法
        this.$emit('loadMap')
      },
      destroyExecute() {
        this.map.off();
        this.map.remove();
        this.map = null;
      },
    },
    props: {
      MapContent: {
        type: Object,
        default () {
          return {
            center: [30.65327143, 104.0754318],
            zoom: 12,
            // 是否显示左侧+-图标
            zoomControl: false,
            // 是否双击放大
            doubleClickZoom: false,
            // 强制地图的缩放级别始终是这个的倍数
            zoomSnap: 0.5,
            zoomDelta: 0.5,
            // 最小层级
            minZoom: 9,
            // 最大层级
            maxZoom: 50,
            // 多少滚动像素  意味着一个完整缩放级别的变化。较小的值将使滚轮缩放更快
            wheelPxPerZoomLevel: 120,
          }
        }
      }
    },
    mounted() {
      this.loadMap()
    },
    beforeDestroy() {
      this.destroyExecute()
    },
  }
</script>
<style lang="scss" scoped>
  .map {
    // min-height: calc(100vh - 114px);
    height: 100%;
  }
</style>

4. 配置new L.Proj.CRS
   resolutions对应地图所以的Resolution
   
   origin对应地图Origin
   
   bounds对应地图Full Extent: