leaflet - 加载天地图 - 解决纬度偏移特别大

更新于 2019-02-28写于 2019-02-28

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

正常的：

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/[email protected]/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/[email protected]/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>

异常的：

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/[email protected]/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/[email protected]/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>