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 等等，這些有機會再說啦。