leaflet地图坐标偏移问题记录

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

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元/天 解锁文章
ZHANGF13
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
leaflet-加载天地图-解决纬度偏移特别大
anleng6817的博客
07-06 2640
这几天学习 leaflet 在加载天地图时将以前的接口拿来用结果偏差了特别大（差不多是 90 度），中国纬度到了 100 多，试了改变投影和 y 轴翻转的配置都不好使，最后上网搜索到了Leaflet.ChineseTmsProviders（MapGIS 的示例也是用的它）查看他的用法发现我用的天地图接口和它不一样，改成它的接口就不会出现纬度偏移特别大的问题了（到现在也没有搜到 cva_w...
Leaflet.ChineseTmsProviders:中国电信服务提供商
05-10
Leaflet.ChineseTmsProviders 的扩展，其中包含各种中国tile提供商的配置。 用法 npm i leaflet.chinatmsproviders Leaflet-ChineseTmsProviders通过provider.. -string进行引用。 比方说，你要漂亮添加Normal.Map基层从www.tianditu.com到地图中，你通过TianDiTu.Normal.Map到L.tileLayer.chinaProvider -constructor，它会返回一个L.TileLayer实例TianDiTu法线贴图图层。 //add TianDiTu Normal Map Layer to map. L . tileLayer . chinaProvider ( 'TianDiTu.Normal.Map' ) . add
leaflet 地图纠偏
nameyingj的博客
09-05 614
使用leaflet.chinatmsproviders对leaflet加载的瓦片进行纠偏
Leaflet加载天地图，onClick坐标偏差，360倍数
最新发布
qq_43314764的博客
06-14 145
1.判断经度小于-180或大于180，不加载，提醒坐标问题；2.leaflet加载机制，地图会重复加载，类似图片重复；地图点击事件后，获取经度坐标为-200多，纬度坐标正常；2.地图重复加载，地图定位错误，偏移了360的倍数；1.坐标系设置，发现其他模块正常，坐标系设置排除；1.一般坐标有偏差存在，是因为坐标系不一致导致；
leaflet 插件使用
qq_37550440的博客
07-14 4893
效果图： 插件Leaflet.ChineseTmsProviders（中国底图底图）我代码中命名为china，放在leaflet.js 同级目录 L.TileLayer.ChinaProvider = L.TileLayer.extend({ initialize: function(type, options) { // (type, Object) var providers = L.TileLayer.ChinaProvider.providers; .
推荐开源项目：Leaflet.ChineseTmsProviders - 地图服务的强大扩展
gitblog_00089的博客
04-10 586
推荐开源项目：Leaflet.ChineseTmsProviders - 地图服务的强大扩展 项目地址:https://gitcode.com/htoooth/Leaflet.ChineseTmsProviders 项目简介 Leaflet.ChineseTmsProviders 是一个为 Leaflet 库设计的插件，旨在帮助开发者轻松接入中国的各种地图服务提供商，如高德、百度、腾讯等。它使得在...
leaflet +高德地图纠偏
yb305
07-13 779
二、leaflet.ChineseTmsProviders.js。三、leaflet.mapCorrection.min.js。
在leftlet 中使用echart和使用leaflet.ChineseTmsProviders图层的冲突
cuisidong1997的博客
03-28 4501
一、在底层地图图层的选择上 1、leaflet.ChineseTmsProviders提供了简单的选择方式： var normalMap = L.tileLayer.chinaProvider(‘Google.Normal.Map’, { maxZoom: 18, minZoom: 5 }), satelliteMap = L.tileLayer.chinaProvider(‘Google.Sat...
56.（leaflet篇）leaflet百度坐标转天地图坐标（bd09转大地2000）.zip
12-09
百度坐标（BD-09）是百度地图使用的坐标系统，它基于WGS84坐标系进行了偏移处理，以保护用户隐私。而天地图坐标（CGCS2000）则是中国国家测绘局定义的2000国家大地坐标系，是一个地心地固坐标系统，更符合现代GIS的...
57.（leaflet篇）leaflet高德坐标转天地图坐标（gcj02转大地2000）.zip
12-10
本话题主要聚焦于如何在Leaflet中实现高德坐标（GCJ-02）到天地图坐标（CGCS2000，也称为大地2000）的转换。下面我们将详细探讨这个过程。 首先，我们来理解一下GCJ-02和CGCS2000这两个坐标系统。GCJ-02，又称为...
leaflet加载百度地图(矫正版)
12-20
百度地图使用的是自己的坐标系统，因此在直接使用Leaflet时，地图的坐标会偏移，导致显示不准确。我们需要对坐标进行转换，以使百度地图能够在Leaflet中正确显示。 1. **安装和引入Leaflet库** 在开始之前，确保你...
leaflet.ChineseTmsProviders.js
05-26
天地图配置
60.（leaflet篇）leaflet虚线.zip
12-29
在本教程中，我们将深入探讨Leaflet库的一个特殊特性，即如何在地图上绘制虚线。Leaflet是一款轻量级的JavaScript库，专门用于创建交互式地图。它提供了丰富的功能和自定义选项，使得开发人员能够轻松地创建复杂的...
leaflet实现区域掩膜+边框立体阴影
07-01
Leaflet的核心概念包括地图（Map）、图层（Layer）、图层组（LayerGroup）、坐标系统和投影等。创建一个基本的地图实例需要指定容器ID和初始位置，例如： ```javascript var map = L.map('map').setView([51.505, -...
Leaflet入门指南：高德地图添加和坐标偏移处理方法
cheungxiongwei的博客
08-02 2070
在本文中，我们将扩展前一篇 "Leaflet入门指南：从零开始创建交互式地图"，通过添加高德地图（采样GCJ-02坐标系）来丰富地图应用程序。我们首先介绍了如何添加高德卫星地图和高德街道信息透明地图。随后，我们探讨了由于坐标系差异引起的地图偏移问题，并详细介绍了解决方案。我们使用了eviltransform库将WGS-84坐标系转换为GCJ-02坐标系，以修复标记点的偏移。另外，我们还探讨了自定义CRS和Marker插件的方法，分别在地图初始化和标记更新时进行坐标偏移处理。这些方法可以帮助您在Leaflet
leaflet中如何优雅的解决百度、高德地图的偏移问题
GIS兵器库
09-24 7576
话不多说，先上效果图 以前在做项目时，经常会听到客户说，你们这个地图是哪来的，太丑了，能不能换成百度地图……高德也行…… 大家生活中，基本上都已经习惯了使用百度地图和高德地图，而在做项目时，用这两个地图做为底图，也基本成为了标配。但在开发中使用这两个地图，会遇到一个拦路虎，坐标偏移问题。 全球现在用的最多的坐标，是wgs84坐标，专业GPS设备和手机GPS定位得到的坐标，通常都是这个坐标。我们国家为了保密需要，要求在国内发布的互联网地图，必须要在这个基础上进行加密偏移。加密后的坐标叫做国测局坐标，俗称火星
Vue2封装leaflet + baidu地图实现打点的公共弹窗组件
博客简介
02-27 1258
【代码】Vue2封装leaflet + baidu地图实现打点的公共弹窗组件。
5分钟学会Leaflet加载天地图和arcgis服务
热门推荐
yisimo的博客
12-02 1万+
Leaflet是一个适用于移动端交互地图的开源JavaScript库。 对移动设备很友好，gzip压缩JS代码大约38 KB，它提供了大多数开发人员所需要的所有地图功能。 扩展性强、插件资源丰富，文档清晰的API，源代码简单、易读。 本文用简单的示例，引导新手快速使用leaflet快速开始、加载天地图、加载arcgis服务、自定义4490坐标系，将天地图扩展到19级。 一、快速开始 <!DOCTYPE html> <html> <head> <met
Leaflet 地图 默认坐标系
05-18
Leaflet默认使用的坐标系是WGS84（EPSG: 4326），也就是经纬度坐标系。但是，Leaflet可以支持多种不同的坐标系，包括Web墨卡托投影（EPSG: 3857）等。在创建地图对象时，可以通过设置`crs`选项来指定所需的坐标系。例如，以下代码创建了一个使用Web墨卡托投影的Leaflet地图： ```javascript var map = L.map('map', { crs: L.CRS.EPSG3857 }); ```
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值