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

已于 2023-10-27 11:00:44 修改
阅读量1.9k 收藏 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 篇文章 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
123 篇文章 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6实战
55 篇文章 ¥59.90 ¥99.00
订阅专栏
本文介绍如何使用OpenLayers对高德底图瓦片进行整体纠偏，转换为EPSG:4326和EPSG:3857坐标系。通过自定义GCJ02坐标系，无需经纬度转换，实现瓦片位置纠偏。内容包括依赖安装、vue中集成、功能实现和代码示例。

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

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

前言

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

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

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖

                

                
                
        

        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
            

        


    


                



	

		

			

				
					
002： vue+ openlayers 简析EPSG:4326 和 EPSG: 3857

				
			

			

				

					大剑师兰特的GIS世界
				

				

					08-06
					
					1755
					
				

			

		

		

			
				
openlayers的使用中，通常有两种坐标系，即 EPSG:4326 和 EPSG: 3857 ，未指定的情况下，默认为 EPSG: 3857。这里做一个大致的形象描述，具体的请查阅更多资料。

			
		

	



                

            
              



	

		

			

				
					
Openlayers 教程 26 - 自定义投影坐标系 - 数据转换以及在线转换工具

				
			

			

				

					linzi19900517的博客
				

				

					12-12
					
					3147
					
				

			

		

		

			
				
工作中经常会遇到转换坐标的情况，一般都会写代码搞定，但是有时候只需要查看一下数据，犯不上专门搞段代码，这里整个在线工具，提供使用。

			
		

	



              


  
              

                


	

		

			

				
					
OpenLayers 高德地图偏移问题

				
			

			

				

					2987345656@qq.com的博客
				

				

					08-22
					
					2833
					
				

			

		

		

			
				
OpenLayers 高德地图纠偏

			
		

	





	

		

			

				
					
openlayer 加载高德地图（EPSG:3857）和GeoJSON图层（EPSG:4326）

				
			

			

				

					imxiezy的博客
				

				

					12-26
					
					1356
					
				

			

		

		

			
				
基于openlayer实现高德底图（墨卡托投影，3857）和GeoJSON图层（4326坐标系）的叠加显示，并实现GeoJSON图层的数据变换。

			
		

	



		

			
		



	

		

			

				
					
高德地图坐标系 转换 EPSG:4326

					
最新发布

				
			

			

				

					u014676858的博客
				

				

					11-07
					
					1443
					
				

			

		

		

			
				
若要将高德地图的经纬度（基于 GCJ-02 坐标系）转换为 EPSG:4326（WGS84）坐标系，你需要使用一个能够执行这种坐标转换的库或工具。由于高德地图使用的是 GCJ-02 坐标系，而 EPSG:4326 是 WGS84 坐标系，因此直接转换需要特定的算法。OpenLayers 本身并不直接提供从 GCJ-02 到 WGS84 的转换功能，但你可以使用其他库，如。以下是一个 Vue.js 组件的示例，它使用。，或者自己实现转换算法。

			
		

	





	

		

			

				
					
关于openlayers引入高德地图出现坐标偏移的纠偏方法

				
			

			

				

					wengjidong的博客
				

				

					11-25
					
					1万+
					
				

			

		

		

			
				
是


			
		

	





	

		

			

				
					
vue openlayers 加载高德地图等 gcj02 的图层偏移问题

				
			

			

				

					大家好，我是+V
				

				

					08-26
					
					4863
					
				

			

		

		

			
				
首先哈，遇到这个问题是肯定的，因为 openlayers 是使用的标准坐标系，但是像是高德地图或者是谷歌地图他们在国内都是使用的偏移坐标，所以说直接不处理放上去就会出问题，看到坐标有一公里左右的偏差。通过上面两种方式都可以实现 GPS 坐标和高德底图匹配，但是第一种有瑕疵，但是如果只用高德，不会切换其他类型的地图的时候可以使用，如果需要切换，建议使用方法二，这样的话给人的效果会舒服一点。.........

			
		

	





	

		

			

				
					
（openlayer）openlayer添加高德地图

				
			

			

				

					weixin_43742167的博客
				

				

					03-07
					
					1272
					
				

			

		

		

			
				
openlayer加载高德底图坐标系不同产生的偏移问题

			
		

	





	

		

			

				
					
高德离线地图瓦片坐标偏移纠偏

				
			

			

				

					gman344的博客
				

				

					04-21
					
					2317
					
				

			

		

		

			
				
对于地图坐标偏移，以leaflet为例，有如下解决办法
方法1、修改leaflet源码，解决地图坐标偏移问题
方法2、将点位真实的经纬度经过偏移算法，添加到加密的地图上
方法3、直接对离线地图瓦片进行纠偏
方法1需要修改源码
方法2有缺陷，地图依然是偏移的，如果把地图经纬度显示出来，经纬度也是不对的
我使用的是方法3，原理是：虽然偏移不是线性的，我也不知道纠偏算法，但是在市级或者县级区域，偏移近似线性的，所以对于市级或县级地图应用，可以对地图瓦片进行简单的纠编，优点是得到的地图瓦片可以认为是没有偏移的。
.

			
		

	





	

		

			

				
					
openlayers加载本地离线底图瓦片google数据直接运行即可（亲测）

				
			

			

				

					09-15
				

			

		

		

			
				
OpenLayers和Google Maps都使用Web Mercator投影（EPSG:3857），这是一种将球面地球转换为平面地图的常见方法。瓦片的索引通常基于行列号，从左上角（0,0）开始，随着行号增加向南移动，列号增加向东移动。  加载...

			
		

	





	

		

			

				
					
openlayers 4.2 加载百度 高德

				
			

			

				

					08-19
				

			

		

		

			
				
openlayers 4.2 加载百度地图（在线 离线）   高德地图（在线 离线）

			
		

	





	

		

			

				
					
百度地图偏移，高德地图偏移的解决方法

				
			

			

				

					05-27
				

			

		

		

			
				
百度纠偏 高德纠偏 地图纠偏 地图偏移

			
		

	





	

		

			

				
					
地图选择及地图偏移解决方案（一）

				
			

			

				

					04-10
				

			

		

		

			
				
NULL
博文链接：https://gjican.iteye.com/blog/1664443

			
		

	





	

		

			

				
					
OpenLayers6入门，OpenLayers加载离线瓦片xyz地图，vue项目如何使用离线瓦片

				
			

			

				

					GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
				

				

					08-10
					
					1897
					
				

			

		

		

			
				
本章讲解OpenLayers如何使用离线瓦片，以vue项目为例，将已经下载好的xyz离线瓦片放在vue项目中，使用OpenLayers直接加载vue中的瓦片图片，即可进行加载地图。

			
		

	





	

		

			

				
					
openlayers6 解决调用百度地图之瓦片偏移、坐标偏移、无限拖动裂缝偏移问题

				
			

			

				

					Gisdream的博客
				

				

					08-02
					
					6658
					
				

			

		

		

			
				
openlayers6调用百度地图，解决各种瓦片偏移、坐标偏移（国内外）、左右无限拖动裂缝偏移问题

			
		

	





	

		

			

				
					
解决OpenLayers调用GeoServer图层时出现不对齐的问题

				
			

			

				

					weixin_62934777的博客
				

				

					07-12
					
					878
					
				

			

		

		

			
				
本文给出GeoServer发布的WMS图层利用OpenLayers加载到地图上时出现地图和图层显示坐标系相同但不对应的情况的解决方案。

			
		

	





	

		

			

				
					
瓦片地图-坐标转换

					
热门推荐

				
			

			

				

					星宇的专栏
				

				

					12-10
					
					1万+
					
				

			

		

		

			
				
先明确三点：
（1）cocos2dx坐标即opengl坐标体系，是以左下角为原点。
（2）tile坐标是左上角为原点。
（3）tile的默认锚点是左下角。





一、地图坐标

Tiled地图一般常见的有3种不同的地图类型，即：普通、45度、45度交错，但是在所有类型的地图中的坐标都是按格子数算的，比如坐标(0,0)代表左上角的第一个格子，需要注意的是，由于3种类型地图的

			
		

	





	

		

			

				
					
解决Cesium加载本地EPSG4326地图切片数据位置偏移问题

				
			

			

				

					weixin_47465081的博客
				

				

					11-23
					
					1889
					
				

			

		

		

			
				
项目中碰到本地加载离线地图切片的情况，加载后发现地图数据位置不对，在网上也没找到相关的情况以及解决方案，经过一番折腾发现问题在数据上。初始加载效果。

			
		

	





	

		

			

				
					
cesium 高德路网数据加载到WGS-84坐标系，解决偏移问题

				
			

			

				

					qq_41122834的博客
				

				

					02-23
					
					1315
					
				

			

		

		

			
				
cesium 高德路网数据加载到WGS-84坐标系，解决偏移问题

			
		

	





	

		

			

				
					
OpenLayers 4.2整合百度高德地图在线及离线功能

				
			

			

				

					
				

			

		

		

			
				
对于高德地图，可以使用高德提供的静态地图服务API，将离线瓦片作为静态图返回，并以此作为地图的底图。  ### 文件名称列表说明  从给定的文件名称列表 gaode-.html、baidu-.html、ol4.2.0 来看，我们可以推断出以下...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 4

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

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

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值