Openlayers系列（一）关于地图投影相关错误的解决方案

最新推荐文章于 2024-07-28 10:40:51 发布
原创 最新推荐文章于 2024-07-28 10:40:51 发布
· 1.3k 阅读 · 1 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#mongodb #GIS #Openlayers #Projection

在开发基于MongoDB的GIS系统时，遇到OpenLayers瓦片加载偏移问题，行列号计算错误。原因是数据源投影设置错误，应设为EPSG3857而非EPSG4326。解决方案是调整Layer的source投影坐标系。注意，OpenLayers的View Projection设置为4326或3857不影响数据加载，但坐标单位不同，需要使用ol.proj.transform进行转换。

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

背景

近期开发以MongoDB为基础的分布式地理数据管理平台系统，被要求做一个简单的demo给客户进行演示。于是笔者便打算向数据库中存储一部分瓦片数据，写一个简单的存取服务器，使用Openlayers客户端加载瓦片进行展示。本来是个挺简单的功能，可是谁曾想，“打了一辈子鹰，却被鹰啄瞎了眼”。在使用Openlayers客户端进行瓦片加载时，出现了加载的瓦片偏移、行列号不正确的问题。

问题描述

如图所示，地图出现了上下偏移的问题，并且，这些瓦片的实际行列号与当前Openlayers计算的行列号并不一致。

Arcgis Server切出的行列号分别是

上面一行瓦片是：104/50,105/50,106/50/107/50

下面一行瓦片是：104/49,105/49,106/49/107/49

Openlayers计算得到的行列号分别是

上面一行瓦片是：104/18,108/18,108/18/107/18

下面一行瓦片是：104/19,105/19,106/19/107/19
这里写图片描述

猜测及思路

看到行列号及瓦片的偏移，笔者的第一反应是切片方案存在问题。经过排查此次使用的ArcGIS Server采用的切片方案时Google切片方案（EPSG3857&#x

最低0.47元/天 解锁文章
121：vue+openlayers 加载中国边界JSON数据（EPSG:4326）
大剑师兰特的GIS世界
09-06 1042
本示例的目的是介绍演示如何在vue+openlayers中添加JSON数据，显示的是中国的边界线（EPSG:4326）。
MapBox GL JS 与OpenLayers，Leaflet，maptalk等前端众多地图框架对比
lz5211314121的博客
09-05 6173
如果你关注的是地图的美，前端渲染的炫酷，强调展示层面，那你选择mapbox准没错，如果你的地图应用有很多客户提出的个性化需求，对地图有很多频繁的操作需求，那你不妨试试ol，如果你要做移动端的app，可以使用leaflet，如果你要支持国产，那你也可以使用maptalk。maptalk的缺点在于稳定性不是很好，性能上与其他几个框架相比也稍微有点差，毕竟国内开源的，而且还是由个人编写的，背后没有资本的注入，确实没办法将框架有质的提升，不过对于新手练习，简单地图应用的构建还是完全够用的。
openlayers渲染mapbox gl的vector tile
weixin_30321709的博客
03-21 535
准备条件 https://openlayers.org/en/v4.6.5/build/ol.js https://cdn.polyfill.io/v2/polyfill.min.js DEMO <!DOCTYPE html> <html> <head> <title>Mapbox Vector Tiles</title&gt...
Vue+OpenLayers项目中使用图标渲染点要素不生效问题
qq_52477159的博客
12-11 384
后来经过翻阅文档和在网上进行搜索发现了问题出在src上，我们在src这里输入路径需要用require的方式引入，加上了require()之后代码就能正常运行了。我还以为是我的路径选错了，一直在细扣路径哪里不对，也是相对路径绝对路径倒来倒去写，结果发现都是徒劳的。今天在开发中碰到了使用图标渲染点要素不生效问题，报错提示如下所示。
OpenLayers自定义圆锥投影中国地图
YuWebGIS
08-30 1649
圆锥投影是横版中国地图常用的地图投影，正式名称为正轴等面积割圆锥投影。横版中国地图具体参数为，中央经线110°E，标准纬线25°N、47°N。
A005：Openlayers加载天地图、百度、高德、ArcGIS、Bing、OSM、Google地图 （结合Vue 详细教程）
jiadsadfasfs的博客
07-28 4058
penlayers加载天地图、百度、高德、ArcGIS、Bing、OSM、Google地图 （结合Vue 详细教程）
Openlayers + Vue实现GIS地图的一些常见问题（整理）
canxuezhang的博客
12-14 6143
本文是博主在开发过程中遇到的一些问题的整理。 学习教程为：《WebGIS之Openlayers全面解析（第二版）》一书。 Openlayers实现离线地图的实现方案 前端： Openlayers 后端： GeoServer
2. Openlayers加载天地图、百度、高德、ArcGIS、Bing、OSM、Google地图 （结合Vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
06-11 1万+
本文介绍了如何在 OpenLayers 中加载不同类型的地图数据源，包括天地图、百度地图、高德地图、ArcGIS、Bing Maps、OpenStreetMap (OSM) 和 Google 地图。针对每种数据源，本文提供了相应的示例代码，展示了如何使用专用加载器或通用加载器实现底图加载。通过遵循本文的示例和指南，您可以轻松地将各种地图数据源添加到您的 OpenLayers 项目中，并根据自己的需求进行修改和调整。
openlayers js库，最新版
07-20
10. **社区支持**：作为开源项目，OpenLayers 拥有一个活跃的社区，开发者可以在官方论坛、GitHub仓库等地方获得帮助，交流解决方案，共同推进项目的进步。 总的来说，OpenLayers 4.6.4 是一个强大且灵活的...
openlayers学习（一） 显示地图
mylove10086
10-13 1076
1、引入openlayer的api <link rel="stylesheet" href="../lib/openlayerv6.4.3/css/ol.css"> <script src="../lib/openlayerv6.4.3/build/ol.js"></script> 2、创建地图图层 var rootLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: '
leaflet1.3.1加载天地图WMTS影像（EPSG:4326）
04-04
leaflet1.3.1版本引用了leaflet-tilelayer-wmts.js做了修改可加载天地图WMTS影像（EPSG:4326）Demo
Openlayers之使用XYZ的方式加载OpenStreetMap
SmileCoffin的博客
06-01 8679
1、
OpenLayers教程十二：多源数据加载之使用XYZ的方式加载瓦片地图
不睡觉的怪叔叔的博客
07-07 1万+
目录 一、XYZ方式加载瓦片地图简介 二、使用XYZ方式加载OpenStreetMap 三、使用XYZ方式加载高德地图 四、使用XYZ方式加载雅虎地图（Yahoo） 一、XYZ方式加载瓦片地图简介 前面已经讲过瓦片地图使用金字塔结构组织瓦片，可以说这是一个三维的结构，使用XYZ这样的坐标来精确定位一张瓦片。即Z用于表示地图层级，XY表示某个层级内的平面，X为横坐标，Y为纵坐标，...
Cesium入门（五）：加载WMTS瓦片地图服务
热门推荐
程序员猴小萌的博客
12-31 1万+
本章介绍Cesium JS库的WebMapTileServiceImageryProvider类，并以GeoServer为例演示了在CesiumViewer控件中添加瓦片图层的方法。
WMTS 如何获得瓦片？
rommayer的专栏
11-12 3327
最简单的： http://19.200.42.86/arcgis/rest/services/SDYX_WEIP_2012/MapServer/WMTS?request=GetTile&version=1.0.0&tileMatrix=1&tileRow=763&tileCol=56 6  service=WMTS&request=GetTile&laye
【ArcGIS JS】ArcGIS API for JavaScript加载天地图
猴扯
12-17 1万+
关于ArcGIS调用天地图的方法，还有两篇博客可以参考，一个是esri针对SDK for Android，另一个是LZU-GIS扩展dojo。这里我在这两篇文章的基础上提供一种直接调用相关API的方法，基于ArcGIS API for JavaScript v3.18。 一、WMTS服务 WMTS服务即网络地图瓦片服务，不同于WMS、WFS、WCS可以简单一句url的GET请求调用一张地...
openlayers离线地图
最新发布
01-17
### 使用OpenLayers实现离线地图功能 #### 安装依赖包 为了使用OpenLayers创建离线地图应用，首先需要安装必要的依赖项。推荐使用`npm`来管理这些依赖。 ```bash npm install ol @types/ol --save ``` 对于那些不希望通过构建工具链工作的开发者来说，也可以直接从CDN获取最新版本的OpenLayers库文件[^4]。 #### 缓存机制的选择 在考虑如何让地图数据能够在没有互联网的情况下访问时，有几种不同的策略可以选择： - **LocalStorage**: 对于小型应用程序而言简单易用，但是其存储空间有限制。 - **IndexedDB**: 提供更大的数据库容量以及更复杂的查询能力；适合较大规模的地图瓦片缓存需求。 - **Web SQL Database (已废弃)**: 虽然部分浏览器仍支持此API, 但由于已被W3C标记为不再维护的状态，在新的项目里应避免使用它作为主要解决方案[^2]。 #### 地图瓦片预加载与保存 为了让用户即使在网络状况不佳甚至完全没有网络连接的情况下也能正常浏览地图，提前下载并储存好所需的地理图像至关重要。这通常涉及到遍历一定范围内的经纬度坐标，并请求相应的图片资源将其保存到本地存储中去。 下面是一个简单的例子展示怎样利用JavaScript异步函数批量抓取指定区域内的所有切片并将它们放入IndexDB内: ```javascript async function preloadTiles(minX, minY, maxX, maxY){ const db = await openDatabase('mapCache', 'tiles'); for(let x=minX; x<=maxX; ++x){ for(let y=minY; y<=maxY; ++y){ try{ let response = await fetch(`https://example.com/tiles/${z}/${x}/${y}.png`); if(!response.ok) throw new Error("Failed to load tile"); let blob = await response.blob(); await saveToDb(db, `tile_${z}_${x}_${y}`,blob); }catch(error){ console.error(`Error loading or saving tile ${x},${y}:`, error.message); } } } } ``` 这段代码假设存在一个名为`openDatabase()`的帮助方法用于打开或创建一个新的IDB环境，还有另一个叫作`saveToDb()`的方法负责把二进制对象写入特定键名之下。实际操作过程中可能还需要处理更多细节比如错误重试逻辑等。 #### 配置OpenLayers读取本地缓存的数据源 一旦完成了上述准备工作之后，就可以配置OpenLayers实例指向本地而非远程服务器上的瓦片位置了。这里给出一段基于之前提到过的自定义方案三中的思路改造而成的例子[^3]: ```javascript import Map from 'ol/Map'; import View from 'ol/View'; import TileLayer from 'ol/layer/Tile'; // ... other imports ... const mapProjection = "EPSG:900913"; // 假设这是目标投影系统 let source; if(navigator.onLine){ // 如果当前处于联网状态则尝试更新最新的在线版面 source=new XYZ({ url:'http://{a-c}.abc.com/{z}/{x}/{y}.png', crossOrigin:'anonymous' }); }else{ // 否则切换至预先准备好的脱机模式下工作 source= new Static({url:"offline_tiles/", projection:mapProjection}); } new Map({ target: document.getElementById('map'), layers:[ new TileLayer({source}) ], view:new View({ center:[0,0], zoom:2, projection:mapProjection }) }); ``` 在这个片段里面，当检测到设备具有可用网络链接时就会向官方服务端发起HTTP GET请求拉取消息体；反之如果发现断网情况发生的话就转而调用静态类构造器传入事先设定号的基础路径参数从而激活内部封装好了的相关行为动作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值