leaflet地图坐标偏移问题记录

已于 2023-09-06 15:43:02 修改
阅读量3.7k 收藏 11
点赞数 2
分类专栏： 前端 文章标签： gis vue
于 2021-03-08 10:38:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ZHANGF13/article/details/114522552
版权
博客介绍了在使用Leaflet加载ChineseTmsProviders插件时遇到的地图坐标偏移问题，以及如何通过地图纠偏插件leaflet.mapCorrection.min.js来解决这个问题。内容包括插件的使用、不同地图坐标系的介绍，以及纠偏插件的测试效果对比。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

leaflet加载各厂地图插件ChineseTmsProviders

ChineseTmsProviders插件可以使leaflet地图通过加载瓦片地图的方式加载不同厂商地图的方式

/* 以vue为例
安装
	npm install leaflet.chinatmsproviders
main.js引入
*/
import 'leaflet.chinatmsproviders/src/leaflet.ChineseTmsProviders.js'

ChineseTmsProviders提供了对高德、百度、谷歌、天地图等的支持页面引入天地图和高德地图

/* 以下是引入了高德和天地图*/
var gaoDe = L.tileLayer.chinaProvider('GaoDe.Normal.Map'
最低0.47元/天 解锁文章
57.（leaflet篇）leaflet高德坐标转天地图坐标（gcj02转大地2000）.zip
12-10
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/121848484
leaflet-加载天地图-解决纬度偏移特别大
anleng6817的博客
07-06 2804
这几天学习 leaflet 在加载天地图时将以前的接口拿来用结果偏差了特别大（差不多是 90 度），中国纬度到了 100 多，试了改变投影和 y 轴翻转的配置都不好使，最后上网搜索到了Leaflet.ChineseTmsProviders（MapGIS 的示例也是用的它）查看他的用法发现我用的天地图接口和它不一样，改成它的接口就不会出现纬度偏移特别大的问题了（到现在也没有搜到 cva_w...
leaflet使用什么坐标系、加载不同地图是否需要进行地图纠偏等问题总结
最新发布
weixin_55510188的博客
03-06 525
使用不同图商的底图时，地图拾取的坐标是哪个坐标系的？是否需要进行地图纠偏？这方面文档也没有过多的解析
Leaflet加载天地图，onClick坐标偏差，360倍数
qq_43314764的博客
06-14 376
1.判断经度小于-180或大于180，不加载，提醒坐标问题；2.leaflet加载机制，地图会重复加载，类似图片重复；地图点击事件后，获取经度坐标为-200多，纬度坐标正常；2.地图重复加载，地图定位错误，偏移了360的倍数；1.坐标系设置，发现其他模块正常，坐标系设置排除；1.一般坐标有偏差存在，是因为坐标系不一致导致；
leaflet 地图纠偏
nameyingj的博客
09-05 1017
使用leaflet.chinatmsproviders对leaflet加载的瓦片进行纠偏
Leaflet入门指南：高德地图添加和坐标偏移处理方法
cheungxiongwei的博客
08-02 2980
在本文中，我们将扩展前一篇 "Leaflet入门指南：从零开始创建交互式地图"，通过添加高德地图（采样GCJ-02坐标系）来丰富地图应用程序。我们首先介绍了如何添加高德卫星地图和高德街道信息透明地图。随后，我们探讨了由于坐标系差异引起的地图偏移问题，并详细介绍了解决方案。我们使用了eviltransform库将WGS-84坐标系转换为GCJ-02坐标系，以修复标记点的偏移。另外，我们还探讨了自定义CRS和Marker插件的方法，分别在地图初始化和标记更新时进行坐标偏移处理。这些方法可以帮助您在Leaflet
superMap leaflet地图加载中心点偏移，不在容器正中心
follow12138的博客
07-16 488
直接使用leaflet自带的方法invalidateSize()对地图进行重新定位（参考容器位置）加载。说明：使用当前操作必须在地图加载函数执行完成之后，此处使用定时器也是确保地图加载完成。在容器中加载leaflet地图后，出现设置的地图中心点不在容器中心位置，向其他地方发生偏移。排查布局和样式，排除是页面布局和样式的影响，就只能是地图加载时内部的问题。
56.（leaflet篇）leaflet百度坐标转天地图坐标（bd09转大地2000）.zip
12-09
百度坐标（BD-09）是百度地图使用的坐标系统，它基于WGS84坐标系进行了偏移处理，以保护用户隐私。而天地图坐标（CGCS2000）则是中国国家测绘局定义的2000国家大地坐标系，是一个地心地固坐标系统，更符合现代GIS的...
地图组件Leaflet地图偏移问题
liufeng0209的专栏
12-12 6930
Leaflet的好处就不多说了，简单的几点：轻量、支持HTML5、插件多，在与图形组件（如HT组件）结合后，可以开发出丰富的GIS应用，可以说几乎所有的GIS场景都能支持。 在使用GIS的时候，想必有个问题一直困扰开发者，就是我们的底图基本上都是有偏移的，如果使用GPS采集的资源（真实经纬度）叠加到底图上，与底图有很大的偏移，叠加不上。从测试上来说，高德的底图，偏差可达到20公里。 处理偏移问
leaflet瓦片服务偏移排查及自定义坐标系
LGi_ser的博客
08-28 1766
leaflet瓦片服务偏移排查及自定义坐标系 leaflet瓦片偏移问题排查： 1.检查瓦片服务的坐标系是否和地图容器的一致； 2.检查瓦片服务的层级分辨率是否和地图容器一致； 以上两种情况都可以通过设置地图的crs来解决。 自定义坐标系 1.安装proj4 proj4leaflet两个依赖 npm i proj4 proj4leaflet --save 2.在vue中引入插件 import 'leaflet/dist/leaflet.css' import * as L fr
leaflet中如何优雅的解决百度、高德地图的偏移问题
GIS兵器库
09-24 8585
话不多说，先上效果图 以前在做项目时，经常会听到客户说，你们这个地图是哪来的，太丑了，能不能换成百度地图……高德也行…… 大家生活中，基本上都已经习惯了使用百度地图和高德地图，而在做项目时，用这两个地图做为底图，也基本成为了标配。但在开发中使用这两个地图，会遇到一个拦路虎，坐标偏移问题。 全球现在用的最多的坐标，是wgs84坐标，专业GPS设备和手机GPS定位得到的坐标，通常都是这个坐标。我们国家为了保密需要，要求在国内发布的互联网地图，必须要在这个基础上进行加密偏移。加密后的坐标叫做国测局坐标，俗称火星
Leaflet.js加载天地图的WMTS服务（EPSG4326类型）
02-18
通过修改Leaflet扩展插件leaflet-tilelayer-wmts.js加载天地图的wmts服务（epsg4326类型）。具体介绍见：http://blog.csdn.net/dahongdahong/article/details/49685653 补充： 对于新版本的leaflet不建议使用插件方式，其本身已经支持4326坐标系了
leaflet1.3.1加载天地图WMTS影像（EPSG:4326）
04-04
leaflet1.3.1版本引用了leaflet-tilelayer-wmts.js做了修改可加载天地图WMTS影像（EPSG:4326）Demo
leaflet.ChineseTmsProviders.js
05-26
天地图配置
使用Leaflet.InternetMapCorrection实现地图在线校准：一项强大的地理信息工具
gitblog_00001的博客
03-29 1007
使用Leaflet.InternetMapCorrection实现地图在线校准：一项强大的地理信息工具 去发现同类优质开源项目:https://gitcode.com/ 在GIS领域，准确的地图数据是至关重要的。然而，由于各种原因，我们在网络上获取到的地图可能并不完美，存在偏差或扭曲。为了解决这一问题，Leaflet.InternetMapCorrection应运而生。这是一个基于JavaScri...
leaflet 加载天地图及坐标系设置
qq_37550440的博客
12-06 2431
【代码】leaflet 加载天地图（卫星图 路网图）
【Leaflet + 天地图】通过经纬度、角度方向、距离（米）计算偏移后的经纬度
前端知识分享喵
08-14 2363
通过经纬度、角度方向、距离（米）计算偏移后的经纬度
leaflet加载天地图
热门推荐
LZUGIS
11-04 1万+
leaflet是一个轻量级的并且开源的地图框架，是由esri发起的，由于其轻量、简单而被大家喜欢，本文带你学习如何在leaflet中加载天地图。
leaflet +高德地图纠偏
yb305
07-13 1093
二、leaflet.ChineseTmsProviders.js。三、leaflet.mapCorrection.min.js。
leaflet加载百度地图图层坐标偏移
11-07
Leaflet是一个轻量级的JavaScript库，用于创建交互式的在线地图。要在Leaflet上加载百度地图图层，并处理坐标偏移，你需要遵循以下步骤： 1. 首先，确保已经在项目中引入了Leaflet库和百度地图API。通常情况下，可以在HTML文件中通过CDN链接引入它们： ```html <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script> <!-- 百度地图API --> <script src="https://api.map.baidu.com/api?v=4.0&ak=your_baidu_api_key"></script> ``` 记得替换`your_baidu_api_key`为你的实际百度地图API密钥。 2. 创建一个Leaflet地图实例，并设置其初始位置： ```javascript var map = L.map('map').setView([39.9042, 116.4074], 13); // 北京中心坐标作为默认视图 ``` 3. 使用百度地图提供的服务创建一个图层，然后将这个图层添加到Leaflet地图上。百度地图图层通常会返回一个`BMap.Map`对象，需要转换成适合 Leaflet使用的L.Marker或其他图层类型。这里假设有一个`loadBmapLayer()`函数负责协调这个过程： ```javascript function loadBmapLayer() { var bmap = new BMap.Map('bmapContainer'); // 定义一个div id为'bmapContainer' // 加载百度地图并设置中心点 bmap.centerAndZoom(new BMap.Point(39.9042, 116.4074), 13); // 转换百度地图的标记到Leaflet坐标系 var latlng = bmap.getCenter().transform('mercator'); // 将转换后的坐标添加到Leaflet地图 L.marker(latlng).addTo(map); } ``` 4. 调用`loadBmapLayer()`函数来初始化地图和百度地图图层： ```javascript loadBmapLayer(); ```
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值