使用 Leaflet 显示 ArcGIS 生成西安80坐标的地图缓存

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 等等，这些有机会再说啦。

 

posted @ 2015-10-30 10:10  slobber  阅读(9096)  评论(8)  编辑  收藏  举报