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

Posted jffun-blog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了leaflet-加载天地图-解决纬度偏移特别大相关的知识,希望对你有一定的参考价值。

这几天学习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-加载天地图-解决纬度偏移特别大的主要内容,如果未能解决你的问题,请参考以下文章

leaflet加载天地图

leaflet怎么加载天地图的wmts服务

arcgis api for javascipt 加载天地图百度地图

ArcGIS API for JavaScript3.x 学习笔记[3] 加载底图天地图(经纬度版)

2021-02-22 【转载】啥是GCJ-02火星坐标系;为啥天地图没有偏移

vue3 +leaflet + 天地图