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>

原文地址:https://www.cnblogs.com/jffun-blog/p/9275769.html

时间: 2024-10-10 18:23:26

leaflet-加载天地图-解决纬度偏移特别大的相关文章

OpenLayers 3 之 加载天地图

要使用 OpenLayers 3 加载天地图,首先要弄清楚天地图发布的原理,以及遵循的发布规范,上一篇中我们提到了使用 OpenLayers 3 加载百度地图,我们提到一般网络地图为了加快访问速度,都采用缓存切片地图的方式,天地图也不例外,而且原理极其类似,但是其切片的索引组织方式还是有一些不同,虽然都是切片,但是切片的起始坐标原点不一致,百度地图是屏幕的左下角,而天地图是屏幕的左上角(与谷歌地图一致),且所在的坐标系是球形墨卡托投影坐标系(EPSG:3857). 针对这种形式发布的地图切片,O

thinkphp无法加载模块解决办法

前台入口文件index.php <?php //前台入口 define('THINKPHP_PATH', '../ThinkPHP/');//底层的位置 define('APP_PATH', './home/');//定义项目位置 define('APP_DEBUG', true);//定义DEBUG开关 require_once THINKPHP_PATH.'ThinkPHP.php'; //echo 'hellow'; ?> 配置文件: 1 <?php 2 return array(

【ArcGis for javascript从零开始】之一 ArcGis加载天地图

最近做项目需要用到ArcGis来进行数据展示和数据分析.以前从来没有接触过与Gis有关的东西,一切需要从头开始学.没有时间从头系统地学习了,只能用到哪个学习哪里了,本系列只是对学习的路径进行记录.ArcGis在网上没有找到中文的API,只有官网的英文API和Demo,而且用到了大量dojo的API,dojo也没有接触过,这方面也是需要学习的…… 一.ArcGis加载 引入css 和js [html] view plain copy <link rel= "stylesheet" 

使用openlayers 3 在线加载天地图及GeoServer发布的地图

使用openlayers3来加载天地图卫星图和标注图层,GeoServer发布地图,一并用openlayers测试加载出来,顺便实现了7种地图控件.下面直接贴代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport&q

iview Table组件使用过滤器时无法加载表头解决办法

title: iview Table组件使用过滤器时无法加载表头解决办法 date: 2018-10-01 15:08:50 tags: JavaScript 前端 vue iview 所遇到的问题 使用iview搭建社团用人员管理时,Table组件的columns中filters属性设置为Vue data 中的另一个对象 如下: data() { groupFilter: [], memberCol: [ { title: "组别", render: (h, params) =>

18 ArcGIS API for JavaScript4.X 系列加载天地图(经纬度)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

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

写在前面的话: 1.百度地图是自己定义的坐标系统,wkid=102100.百度地图数据是加密的产物.下文将附上百度坐标与WGS84,谷歌等坐标系统转换方法(地理-地理),此方法并未亲测,据说准 2.百度地图可以直接加载经纬度坐标 3.百度地图如果加载的arcgis api中会出现坐标偏移,1.中已经解决了地理坐标转换,那么找到百度投影-地理坐标的转换方式,则arcgis就可以直接无偏加载了,网上很多方法,但是亲测不行. 4.天地图不是涉密数据,根据本文提供的类库,arcgis api for j

CAD2014以上版本不信任加载项解决方法

前一段时间做CAD插件支持版本升级遇到了一个很棘手的问题,CAD2014以上版本增加了受信任功能,每次用程序启动CAD并加载arx文件时都弹出对话框询问是否加载 我的解决方法如下:(仅供参考) 读取注册表(位置根据版本位置各自对应): HKEY_CURRENT_USER\Software\Autodesk\AutoCAD\R19.1\ACAD-D001:804\Profiles 其 “默认” 所对应的字段就是用使用的当前配置名,如下图所示: 读取当前配置项 HKEY_CURRENT_USER\S

IIS无法加载 DLL解决办法

IIS提示 无法加载 DLL“OraOps12.dll”: 找不到指定的模块. (异常来自 HRESULT:0x8007007E). 说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息. 异常详细信息: System.DllNotFoundException: 无法加载 DLL“OraOps12.dll”: 找不到指定的模块. (异常来自 HRESULT:0x8007007E). 解决办法: 1. 复制相关dll到bin