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

已于 2023-10-27 11:00:44 修改
阅读量1.5k 收藏 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 个专栏收录 该专栏为热销专栏榜 第30名
132 篇文章 13 订阅 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
121 篇文章 64 订阅 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6实战
53 篇文章 35 订阅 ¥69.90 ¥99.00
订阅专栏
本文介绍如何使用OpenLayers对高德底图瓦片进行整体纠偏，转换为EPSG:4326和EPSG:3857坐标系。通过自定义GCJ02坐标系，无需经纬度转换，实现瓦片位置纠偏。内容包括依赖安装、vue中集成、功能实现和代码示例。
摘要由CSDN通过智能技术生成

专栏目录：
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
					
					1001
					
				

			

		

		

			
				
本示例是演示如何在vue+openlayers项目中根据坐标显示多边形（3857投影），计算出最大幅宽。这里先通过Polygon来显示出多边形，利用getExtent() 获取3857坐标下的最大最小x，y值，通过ransformExtent转换坐标为4326，  通过turf的turf.distance和计算距离。 距离赤道越近，幅宽会越大一些，这里面利用了Math.abs来做绝对值的判断处理。

			
		

	



                

              
                



	

		

			

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

				
			

			

				

					09-15
				

			

		

		

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

			
		

	



                


  
              

                


	

		

			

				
					
OpenLayers 高德地图偏移问题

				
			

			

				

					2987345656@qq.com的博客
				

				

					08-22
					
					1879
					
				

			

		

		

			
				
OpenLayers 高德地图纠偏

			
		

	





	

		

			

				
					
276：vue+openlayers: EPSG:4326投影下绘制半径为10Km的圆形

					
最新发布

				
			

			

				

					大剑师兰特的GIS世界
				

				

					07-09
					
					660
					
				

			

		

		

			
				
本示例介绍如何在vue+openlayer中实现EPSG:4326投影下绘制半径为10Km的圆形。在OpenLayers中使用EPSG:4326投影（即WGS 84地理坐标系）创建圆形时，由于此投影系统使用的是经纬度而非米或其它线性距离单位，因此需要对半径进行适当的转换。注意EPSG:3857使用的半径单位是米。

			
		

	



		

			
		



	

		

			

				
					
解决openlayer和百度离线地图坐标系4326向3857格式转换的误差问题

				
			

			

				

					PG5的博客
				

				

					05-30
					
					1197
					
				

			

		

		

			
				
if (cB!return cC;if (!cC ||!-1 : 1);cC < len;if (!return cE;

			
		

	





	

		

			

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

				
			

			

				

					wengjidong的博客
				

				

					11-25
					
					9302
					
				

			

		

		

			
				
是


			
		

	





	

		

			

				
					
vue使用高德地图后坐标偏移问题

				
			

			

				

					weixin_45693257的博客
				

				

					09-09
					
					7812
					
				

			

		

		

			
				
前言：
因为项目有多个版本，有app端及H5端，app端定位地理信息是用手机GPS获取，而H5端定位地理信息是用高德地图获取，但是发现高德地图获取的坐标系有偏移~

一、使用高德地图：
            // 获取当前定位
			AMap.plugin('AMap.Geolocation', function() {
					const geolocation = new AMap.Geolocation({
						enableHighAccuracy: true, //是否使用高精度定位，.

			
		

	





	

		

			

				
					
OpenLayers 6 绘制高德导航路径的蚂蚁线样式并实现箭头动画——VectorContext的重度使用

				
			

			

				

					weixin_44519342的博客
				

				

					04-26
					
					3163
					
				

			

		

		

			
				
OpenLayers 6 绘制高德导航路径的蚂蚁线样式并实现箭头动画——VectorContext的重度使用

			
		

	





	

		

			

				
					
Openlayers显示瓦片网格信息的方法

				
			

			

				

					10-14
				

			

		

		

			
				
它支持多种数据格式和地图服务，包括WMS、WMTS、TMS等。在本例中，我们将深入探讨如何使用OpenLayers显示瓦片网格信息。  1. **瓦片网格**：  地图瓦片是地图数据的一种分块存储方式，将大范围的地图分割成多个小块...

			
		

	





	

		

			

				
					
openlayers加载静态图片地图

				
			

			

				

					10-31
				

			

		

		

			
				
同时，OpenLayers 的强大功能和灵活性使得开发复杂地图应用成为可能，无论是简单的底图展示还是丰富的交互式地图应用。  在压缩包文件 "olDemo" 中，可能包含了实现上述功能的示例代码，你可以通过查看和运行这些...

			
		

	





	

		

			

				
					
openlayers 加载天地图示例

				
			

			

				

					02-24
				

			

		

		

			
				
天地图是中国官方的地理信息公共服务平台，提供丰富的地形图、卫星影像图等多源地图数据。本示例将详细讲解如何使用OpenLayers来加载并操作天地图。  首先，我们需要理解OpenLayers的基本结构。一个OpenLayers地图...

			
		

	





	

		

			

				
					
openlayers实现本地图片作为背景，添加marker标记

				
			

			

				

					06-09
				

			

		

		

			
				
在这个例子中，我们将讨论如何利用OpenLayers将本地图片作为地图背景，并添加marker标记。  首先，为了将本地图片用作背景，我们需要创建一个OpenLayers的图层实例。这通常通过`ol.source.ImageStatic`类来实现。你...

			
		

	





	

		

			

				
					
openlayer中的投影，坐标转换

				
			

			

				

					
				

				

					12-02
					
					4549
					
				

			

		

		

			
				
平面坐标转经纬度：toLonLat([471983.45,3490990.75])

经纬度转平面坐标：fromLonLat([104.704968,31.540962])

3857 、fromLonLat（）




<template>
  <div id="map"></div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View } from "ol";
imp...

			
		

	





	

		

			

				
					
OpenLayers加载不同WMTS服务

				
			

			

				

					SuperMap技术控
				

				

					12-21
					
					7331
					
				

			

		

		

			
				
作者：yyy

前言

WMTS，Web地图瓦片服务（Web Map Tile Service）当前版本是1.0.0。WMTS标准定义了一些操作，这些操作允许用户访问瓦片地图。WMTS可能是OGC首个支持RESTful访问的服务标准。SuperMap iServer支持发布WMTS 1.0.0标准的服务，同时提供一个兼容《地理信息公共服务平台电子地图数据规范》中地图分级标准的服务。

WMTS服务包含的信息介绍

在常规的WMTS服务中会包含以下参数和信息：


			<ows:Get...

			
		

	





	

		

			

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

				
			

			

				

					大家好，我是+V
				

				

					08-26
					
					4065
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					imxiezy的博客
				

				

					12-26
					
					1001
					
				

			

		

		

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

			
		

	





	

		

			

				
					
（openlayer）openlayer添加高德地图

				
			

			

				

					weixin_43742167的博客
				

				

					03-07
					
					1084
					
				

			

		

		

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

			
		

	





	

		

			

				
					
在openlayer中对瓦片地图进行平移

				
			

			

				

					张大仙的博客
				

				

					06-07
					
					954
					
				

			

		

		

			
				
失踪人口回归。
这次给大家介绍的是在openlayer中对在线瓦片地图进行平移。可以解决将高德/百度瓦片地图的偏移问题。
适用的场景：当某个在线瓦片地图的坐标系与我们需要的底图坐标系不同，我们很难对每一幅瓦片都使用特定的算法进行坐标修正再进行显示。比较方便的一种方法是对地图的所有瓦片进行平移，（然后在心里认为坐标已经纠正了）。
由于地球是个球体，地理学家为了方便的将球体上的地物在平面中展示，提出了各种投影坐标系，也就是由xy组成的平面坐标系，对我们中国的用户来说，看的比较多的就是类似于[12605635.2

			
		

	





	

		

			

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

				
			

			

				

					gman344的博客
				

				

					04-21
					
					1947
					
				

			

		

		

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

			
		

	





	

		

			

				
					
openlayers imagestatic 底图为普通图片

				
			

			

				

					11-16
				

			

		

		

			
				
OpenLayers 是一种用于创建交互式地图应用程序的开源 JavaScript 库。其中的 ImageStatic 是 OpenLayers 提供的一个类，用于加载并显示普通图片作为底图。

使用 ImageStatic 类，我们可以通过指定图片的 URL、范围和投影等属性来创建一个底图图层。底图可以是任何普通的图片文件，比如 PNG、JPEG 等格式。

首先，我们需要创建一个 ImageStatic 实例，并传入图片的 URL。例如，使用以下代码创建一个名为 imageLayer 的底图图层：

```javascript
var imageLayer = new ol.layer.Image({
  source: new ol.source.ImageStatic({
    url: 'path_to_image.png',
    imageExtent: [minX, minY, maxX, maxY],  // 图片在地图坐标系下的范围
    projection: 'EPSG:4326'  // 图片的投影方式
  })
});
```

在上述代码中，`url` 参数指定了图片文件的路径。`imageExtent` 参数定义了图片在地图上所占的范围。

接下来，我们需要创建一个地图实例，并将底图图层添加到地图上。例如，使用以下代码创建一个名为 map 的地图：

```javascript
var map = new ol.Map({
  target: 'map-container',  // 地图渲染的容器元素 ID
  layers: [imageLayer],  // 添加底图图层
  view: new ol.View({
    center: ol.proj.fromLonLat([longitude, latitude]),  // 地图中心点的经纬度坐标
    zoom: 10  // 初始缩放级别
  })
});
```

上述代码中，`target` 参数指定了地图渲染的容器元素的 ID。`layers` 参数用于添加底图图层。

最后，我们可以将地图应用程序与网页中的某个元素关联起来。例如，在 HTML 中创建一个名为 map-container 的 div 元素，如下所示：

```html
<div id="map-container" style="width: 100%; height: 400px;"></div>
```

通过以上步骤，我们可以使用 OpenLayers 的 ImageStatic 类加载普通图片作为底图，并在地图应用程序中显示出来。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 4

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

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

		

	

	

			

	

	

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

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值