OpenLayers实战，OpenLayers高德地图瓦片位置纠偏，将高德底图瓦片位置转换为EPSG:4326和EPSG:3857

已于 2023-10-27 11:00:44 修改
阅读量1.4k 收藏 1
点赞数 2
分类专栏： # Vue+OpenLayers6实战 Vue+OpenLayers6入门到实战 OpenLayers6一本通 文章标签： 前端 javascript vue.js OpenLayers 高德底图瓦片纠偏 瓦片位置偏移
于 2023-08-14 18:00:05 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/132281230
版权
OpenLayers6一本通 同时被 3 个专栏收录
132 篇文章 10 订阅 ¥159.90 ¥99.00
订阅专栏
Vue+OpenLayers6入门到实战
121 篇文章 64 订阅 ¥119.90 ¥99.00
订阅专栏
Vue+OpenLayers6实战
53 篇文章 34 订阅 ¥69.90 ¥99.00
订阅专栏

专栏目录：
OpenLayers实战进阶专栏目录

前言

本文通过自定义GCJ02坐标系方式来对底图栅格/瓦片进行整体纠偏

在日常开发中，经常遇到使用高德底图，总是要对高德坐标进行转换才能使用。
本章不需要对要素经纬度位置进行转换，而是使用OpenLayers将高德地图图层的所有瓦片从GCJ02坐标进行整体偏移为EPSG:4326和EPSG:3857坐标系来实现。
openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install ol@6.15.1
  1. 使用Yarn安装依赖
了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
订阅专栏
247：vue+openlayers 根据坐标显示多边形（3857投影），计算出最大幅宽
大剑师兰特的GIS世界
11-16 978
本示例是演示如何在vue+openlayers项目中根据坐标显示多边形（3857投影），计算出最大幅宽。这里先通过Polygon来显示出多边形，利用getExtent() 获取3857坐标下的最大最小x，y值，通过ransformExtent转换坐标为4326， 通过turf的turf.distance和计算距离。 距离赤道越近，幅宽会越大一些，这里面利用了Math.abs来做绝对值的判断处理。
openlayer设置地图显示范围（4326坐标系）
weixin_39392030的博客
03-05 2261
** 因为创建地图是3857坐标系的地图，以下要对其坐标进行转换 ** 1.获取地图绘制的范围的开始坐标以及结束坐标（采用openlayer拉框互动获取坐标） _draw: function () { var self = this; var map = self.app.map; ...
vue openlayers 加载高德地图等 gcj02 的图层偏移问题
大家好，我是 ed.
08-26 3916
首先哈，遇到这个问题是肯定的，因为 openlayers 是使用的标准坐标系，但是像是高德地图或者是谷歌地图他们在国内都是使用的偏移坐标，所以说直接不处理放上去就会出问题，看到坐标有一公里左右的偏差。通过上面两种方式都可以实现 GPS 坐标和高德底图匹配，但是第一种有瑕疵，但是如果只用高德，不会切换其他类型的地图的时候可以使用，如果需要切换，建议使用方法二，这样的话给人的效果会舒服一点。.........
vue使用高德地图后坐标偏移问题
weixin_45693257的博客
09-09 7694
前言： 因为项目有多个版本，有app端及H5端，app端定位地理信息是用手机GPS获取，而H5端定位地理信息是用高德地图获取，但是发现高德地图获取的坐标系有偏移~ 一、使用高德地图： // 获取当前定位 AMap.plugin('AMap.Geolocation', function() { const geolocation = new AMap.Geolocation({ enableHighAccuracy: true, //是否使用高精度定位，.
【openlayers】解决浏览器缩放后色斑图在移动地图时发生偏移的问题
最新发布
RanDoll_的博客
05-23 722
解决浏览器缩放后色斑图在移动地图时发生偏移的问题
OpenLayers 高德地图偏移问题
2987345656@qq.com的博客
08-22 1771
OpenLayers 高德地图纠偏
（openlayer）openlayer添加高德地图
weixin_43742167的博客
03-07 1060
openlayer加载高德底图坐标系不同产生的偏移问题
关于openlayers引入高德地图出现坐标偏移的纠偏方法
wengjidong的博客
11-25 9169
是
openlayer 加载高德地图（EPSG:3857）和GeoJSON图层（EPSG:4326）
imxiezy的博客
12-26 905
基于openlayer实现高德底图（墨卡托投影，3857）和GeoJSON图层（4326坐标系）的叠加显示，并实现GeoJSON图层的数据变换。
openlayers加载本地离线底图瓦片google数据直接运行即可（亲测）
09-15
OpenLayers和Google Maps都使用Web Mercator投影（EPSG:3857），这是一种将球面地球转换为平面地图的常见方法。瓦片的索引通常基于行列号，从左上角（0,0）开始，随着行号增加向南移动，列号增加向东移动。 加载...
Openlayers显示瓦片网格信息的方法
10-14
它支持多种数据格式和地图服务，包括WMS、WMTS、TMS等。在本例中，我们将深入探讨如何使用OpenLayers显示瓦片网格信息。 1. **瓦片网格**： 地图瓦片是地图数据的一种分块存储方式，将大范围的地图分割成多个小块...
百度地图偏移，高德地图偏移的解决方法
05-27
百度纠偏 高德纠偏 地图纠偏 地图偏移
瓦片地图实现（缓存加载，像素单位平移，缩放）
03-29
在上个版本基础上增加窗口自由拉伸重新加载范围外地图，修改原来瓦片单位平移为像素单位平移。
地图选择及地图偏移解决方案（一）
04-10
NULL 博文链接：https://gjican.iteye.com/blog/1664443
openlayers加载静态图片地图
10-31
同时，OpenLayers 的强大功能和灵活性使得开发复杂地图应用成为可能，无论是简单的底图展示还是丰富的交互式地图应用。 在压缩包文件 "olDemo" 中，可能包含了实现上述功能的示例代码，你可以通过查看和运行这些...
openlayers 加载天地图示例
02-24
天地图是中国官方的地理信息公共服务平台，提供丰富的地形图、卫星影像图等多源地图数据。本示例将详细讲解如何使用OpenLayers来加载并操作天地图。 首先，我们需要理解OpenLayers的基本结构。一个OpenLayers地图...
openlayers实现本地图片作为背景，添加marker标记
06-09
在这个例子中，我们将讨论如何利用OpenLayers将本地图片作为地图背景，并添加marker标记。 首先，为了将本地图片用作背景，我们需要创建一个OpenLayers的图层实例。这通常通过`ol.source.ImageStatic`类来实现。你...
高德离线地图瓦片坐标偏移纠偏
gman344的博客
04-21 1916
对于地图坐标偏移，以leaflet为例，有如下解决办法 方法1、修改leaflet源码，解决地图坐标偏移问题 方法2、将点位真实的经纬度经过偏移算法，添加到加密的地图上 方法3、直接对离线地图瓦片进行纠偏 方法1需要修改源码 方法2有缺陷，地图依然是偏移的，如果把地图经纬度显示出来，经纬度也是不对的 我使用的是方法3，原理是：虽然偏移不是线性的，我也不知道纠偏算法，但是在市级或者县级区域，偏移近似线性的，所以对于市级或县级地图应用，可以对地图瓦片进行简单的纠编，优点是得到的地图瓦片可以认为是没有偏移的。 .
瓦片地图-坐标转换
星宇的专栏
12-10 9905
先明确三点： （1）cocos2dx坐标即opengl坐标体系，是以左下角为原点。 （2）tile坐标是左上角为原点。 （3）tile的默认锚点是左下角。 一、地图坐标 Tiled地图一般常见的有3种不同的地图类型，即：普通、45度、45度交错，但是在所有类型的地图中的坐标都是按格子数算的，比如坐标(0,0)代表左上角的第一个格子，需要注意的是，由于3种类型地图的
openlayers设置地图epsg:4326
04-30
OpenLayers 是一款基于Web浏览器的JavaScript开源库，用于构建交互式地图和地理信息应用程序。为了设置地图EPSG:4326，我们需要了解一下EPSG的定义以及在OpenLayers中如何使用它。 首先，EPSG是欧洲石油天然气协会地理信息小组的缩写，该组织建立了一套地理参考系统（CGS），为地理信息应用程序提供标准的投影和坐标系。EPSG:4326是一种常见的地球坐标系，在这个坐标系中，地球被看做是一个椭球体，以经度和纬度来表示地球上的位置。 在设置OpenLayers中的地图EPSG:4326时，我们需要创建一个新的地图对象，然后将projection属性设置为相应的投影。具体的代码如下： ``` var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ projection: 'EPSG:4326', center: [0, 0], zoom: 2 }) }); ``` 在这个例子中，我们创建了一个新的地图对象，将其目标设置为“map”，并添加了一个OSM图层。在视图对象中，我们将投影属性设置为'EPSG:4326'，并将视图中心设置为[0,0]的经纬度，缩放级别设置为2。 一旦我们设置了这些属性，OpenLayers将自动使用正确的投影来渲染地图，并将经纬度坐标转换为正确的投影坐标。这使我们可以轻松地在OpenLayers应用程序中使用EPSG:4326坐标系，以便更有效地处理地理信息数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汤姆猫不是猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值