zoukankan      html  css  js  c++  java
  • 使用 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. 下载 leafletproj4js, 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 等等,这些有机会再说啦。

  • 相关阅读:
    LeetCode(287)Find the Duplicate Number
    LeetCode(290) Word Pattern
    LeetCode(205)Isomorphic Strings
    LeetCode(201) Bitwise AND of Numbers Range
    LeetCode(200) Number of Islands
    LeetCode(220) Contains Duplicate III
    LeetCode(219) Contains Duplicate II
    命令行执行Qt程序
    LeetCode(228) Summary Ranges
    redis 的安装和使用记录
  • 原文地址:https://www.cnblogs.com/slobber/p/leaflet_for_xian_80.html
Copyright © 2011-2022 走看看