Leaflet 是一个非常小巧灵活的 Geo js 库，esri 本身也在 Github 上有 leaflet 的相关项目。但是 leaflet 本身支持 Web Mercator Auxiliary Sphere tiling scheme，无法直接加载 arcgis server 发布的图层缓存，需要通过 Proj4 这个库进行转换，这里涉及了投影的相关转换配置，可是没有相关专业知识怎么配置呀，不过只要会搜，一切都是可以的。
以下是具体的步骤：
1. 打开 ArcGIS 的 MapServer，例如 http://[arcgisserver]/ArcGIS/rest/services/TileMAP/MapServer，查看 "Tile info"：记下来所有的 Levels 中的 Resolution
以及下面的 Origin，备用。
2. 继续往下看，记住 Spatial Reference 后的数字。
然后到 "http://spatialreference.org/ref/epsg/[刚刚的数字]/proj4/"
复制内容：“+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs”，备用
2. 下载 leaflet, proj4js, proj4leaflet
3. 运行以下代码，注意资源引用位置
<html> <head> <meta charset=utf-8 /> <title>Esri Leaflet Quickstart</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <link rel="stylesheet" href="leaflet/leaflet.css" /> <script src="leaflet/leaflet-src.js"></script> <script src="leaflet/proj4.js"></script> <script src="leaflet/proj4leaflet.js"></script> <style> body { margin:0; padding:0; } #map { position: absolute; top:0; bottom:0; right:0; left:0; } </style> </head> <body> <div id="map"></div> <script> var centerPoint = new L.LatLng(39.13, 117.20); // 设置地图中心 var crs = new L.Proj.CRS("EPSG:2384", "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs", { origin: [ [精度偏移], [维度偏移] ], // 将刚刚的 Origin 复制到这里 resolutions: [ // 所有的分辨率复制到这里 264.583862501058, 132.291931250529, 66.1459656252646, 33.0729828126323, 16.9333672000677, 8.46668360003387, 4.23334180001693, 2.11667090000847, 1.05833545000423, 0.529167725002117, 0.264583862501058, 0.132291931250529 ] }); var mapOptions = { center: centerPoint, zoom: 1, crs: crs, attributionControl: true, }; var map = L.map('map', mapOptions); var tileLayer = new L.TileLayer('http://[arcgisserver]/ArcGIS/rest/services/TileMAP/MapServer/tile/{z}/{y}/{x}'); map.addLayer(tileLayer); </script> </body> </html>
4. 完工~~~，之后还可以引用 ersi-leaflet，添加 FeatureLayer 等等，这些有机会再说啦。