leaflet-加載天地圖-解決緯度偏移特別大
阿新 • • 發佈：2018-07-07
兩個 ref 偏移 code origin 3.1 layer 天地圖 api
這幾天學習leaflet在加載天地圖時將以前的接口拿來用結果偏差了特別大（差不多是90度），中國緯度到了100多，試了改變投影和y軸翻轉的配置都不好使，最後上網搜索到了Leaflet.ChineseTmsProviders（MapGIS的示例也是用的它）查看他的用法發現我用的天地圖接口和它不一樣，改成它的接口就不會出現緯度偏移特別大的問題了（到現在也沒有搜到cva_w和vec_c這兩個接口的區別，CGCS200和WGS48麽？那也差不了那麽多啊！以後找到區別再寫上來吧）
正常的：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/> <style> #mapid { height: 500px; } </style> </head> <body> <div id="mapid"></div> <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script> <script> var normalm = L.tileLayer(‘http://t{s}.tianditu.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}‘, { subdomains: [‘0‘, ‘1‘, ‘2‘, ‘3‘, ‘4‘, ‘5‘, ‘6‘, ‘7‘], }); stamenLabels = L.tileLayer(‘http://t{s}.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}‘, { subdomains: [‘0‘, ‘1‘, ‘2‘, ‘3‘, ‘4‘, ‘5‘, ‘6‘, ‘7‘] }); var map = L.map("mapid", { center: [31.59, 120.29], zoom: 12, layers: [normalm], zoomControl: false }); stamenLabels.addTo(map); </script> </body> </html>
異常的：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/> <style> #mapid { height: 500px; } </style> </head> <body> <div id="mapid"></div> <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script> <script> var normalm = L.tileLayer(‘http://t{s}.tianditu.cn/DataServer?T=vec_c&X={x}&Y={y}&L={z}‘, { subdomains: [‘0‘, ‘1‘, ‘2‘, ‘3‘, ‘4‘, ‘5‘, ‘6‘, ‘7‘], }); stamenLabels = L.tileLayer(‘http://t{s}.tianditu.cn/DataServer?T=cva_c&X={x}&Y={y}&L={z}‘, { subdomains: [‘0‘, ‘1‘, ‘2‘, ‘3‘, ‘4‘, ‘5‘, ‘6‘, ‘7‘] }); var map = L.map("mapid", { center: [31.59, 120.29], zoom: 12, layers: [normalm], zoomControl: false }); stamenLabels.addTo(map); </script> </body> </html>
leaflet-加載天地圖-解決緯度偏移特別大