这几天学习 leaflet 在加载天地图时将以前的接口拿来用结果偏差了特别大（差不多是 90 度），中国纬度到了 100 多，试了改变投影和 y 轴翻转的配置都不好使，最后上网搜索到了Leaflet.ChineseTmsProviders（MapGIS 的示例也是用的它）查看他的用法发现我用的天地图接口和它不一样，改成它的接口就不会出现纬度偏移特别大的问题了（到现在也没有搜到 cva_w 和 vec_c 这两个接口的区别，CGCS200 和 WGS48 么？那也差不了那么多啊！以后找到区别再写上来吧）

正常的：

  1.  
    <!DOCTYPE html>
  2.  
    <html lang=“zh-CN”>
  3.  
    <head>
  4.  
    <meta charset=“UTF-8”>
  5.  
    <title>Document</title>
  6.  
    <link rel=“stylesheet” href=“https://unpkg.com/leaflet@1.3.1/dist/leaflet.css”
  7.  
    integrity=“sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==”
  8.  
    crossorigin=“”/>
  9.  
    <style>
  10.  
    #mapid { height: 500px; }
  11.  
    </style>
  12.  
    </head>
  13.  
    <body>
  14.  
    <div id=“mapid”></div>
  15.  
    <script src=“https://unpkg.com/leaflet@1.3.1/dist/leaflet.js”
  16.  
    integrity=“sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==”
  17.  
    crossorigin=“”></script>
  18.  
    <script>
  19.  
    var normalm = L.tileLayer(‘http://t{s}.tianditu.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}’, {
  20.  
    subdomains: [‘0’, ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’],
  21.  
    });
  22.  
    stamenLabels = L.tileLayer(‘http://t{s}.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}’, {
  23.  
    subdomains: [‘0’, ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’]
  24.  
    });
  25.  
     
  26.  
    var map = L.map(“mapid”, {
  27.  
    center: [31.59, 120.29],
  28.  
    zoom: 12,
  29.  
    layers: [normalm],
  30.  
    zoomControl: false
  31.  
    });
  32.  
    stamenLabels.addTo(map);
  33.  
    </script>
  34.  
    </body>
  35.  
    </html>

异常的：

  1.  
    <!DOCTYPE html>
  2.  
    <html lang=“zh-CN”>
  3.  
    <head>
  4.  
    <meta charset=“UTF-8”>
  5.  
    <title>Document</title>
  6.  
    <link rel=“stylesheet” href=“https://unpkg.com/leaflet@1.3.1/dist/leaflet.css”
  7.  
    integrity=“sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==”
  8.  
    crossorigin=“”/>
  9.  
    <style>
  10.  
    #mapid { height: 500px; }
  11.  
    </style>
  12.  
    </head>
  13.  
    <body>
  14.  
    <div id=“mapid”></div>
  15.  
    <script src=“https://unpkg.com/leaflet@1.3.1/dist/leaflet.js”
  16.  
    integrity=“sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==”
  17.  
    crossorigin=“”></script>
  18.  
    <script>
  19.  
    var normalm = L.tileLayer(‘http://t{s}.tianditu.cn/DataServer?T=vec_c&X={x}&Y={y}&L={z}’, {
  20.  
    subdomains: [‘0’, ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’],
  21.  
    });
  22.  
    stamenLabels = L.tileLayer(‘http://t{s}.tianditu.cn/DataServer?T=cva_c&X={x}&Y={y}&L={z}’, {
  23.  
    subdomains: [‘0’, ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’]
  24.  
    });
  25.  
     
  26.  
    var map = L.map(“mapid”, {
  27.  
    center: [31.59, 120.29],
  28.  
    zoom: 12,
  29.  
    layers: [normalm],
  30.  
    zoomControl: false
  31.  
    });
  32.  
    stamenLabels.addTo(map);
  33.  
    </script>
  34.  
    </body>
  35.  
    </html>

转载于:https://www.cnblogs.com/jffun-blog/p/9275769.html