Openlayers系列(一)关于地图投影的理解

背景

近期开发以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,web mercator投影坐标系)。而Openlayers默认采用的坐标系也是EPSG3857,正好吻合,按道理说应该毫无问题。可是既然出现了错误,那就要排查问题,修改错误。既然Arcgis Server的切片方案没问题,那就是Openlayers手动设置了不正确的坐标系。仔细观察果然发现,在Layer的source处将数据源的投影坐标设置为了EPSG4326。何其低级的错误,竟然花费了将近一个小时来排查。

解决方案

将Layer的source投影坐标系设置为3857即可。

补充说明

(一)出现上述错误的原因是Arcgis Server中发布的切片缓存使用了Google切片方案,该切片方案采用Web Mercator投影坐标系,以[-20037508,20037508]作为坐标原点,瓦片大小是256像素(具体的切片方案描述可以在ArcGIS Server Manager的相应服务中看到详细信息)。而本次出错的前端代码中将数据源的投影设置为EPSG:4326,与所发布服务的投影坐标系不匹配,导致Openlayers在计算行列号时无法计算出正确的结果,所以出现了加载错误。

Openlayers(2/3/4)默认采用EPSG:3857作为数据源的投影坐标系,该参数需要与后端的地图服务所采用的投影坐标系匹配才可正常加载地图,所以当我们采用Google的切片方案时(Web Mercator,也就是EPSG:3857),即使不设置Openlayers数据源的投影坐标系,也可正常加载。

Openlayers3的View中也有一个Projection参数,该参数为显示地图的坐标系,设置EPSG:4326或者EPSG:3857都可以,不影响数据的加载。唯一的不同就是,EPSG4326是WGS84地理坐标系,以经纬度为单位;EPSG3857是Web Mercator投影坐标系,以米为单位。如果将坐标系设置成4326,那么你是用openlayer从地图上获得的坐标数据都是经纬度坐标,向地图添加坐标点时,坐标点的数据也应该是经纬度坐标。如果不幸的你设置了4326坐标系,而手上的数据确是3857的投影坐标系数据,那么你有比较简便的方案解决这个问题:

1、 将View的Projection设置成epsg3857

2、 使用Openlayers提供的ol.proj.transform(coordinate, source, destination)方法,将3857坐标系的数据动态的转换成4326坐标系的数据。

(二)

地图服务的坐标系取决于切片方案里的设置,而非原tiff数据或者shp数据本身的坐标系。Google的切片方案采用的就是EPSG3857的投影,读者也可以自行定义切片方案,把坐标系设置为EPSG4326,或者GCJ2000都可以,只要你正确的设置切片方案的参数即可。

时间: 2024-08-13 21:11:51

Openlayers系列(一)关于地图投影的理解的相关文章

重学Golang系列(一): 深入理解 interface和reflect

前言 interface(即接口),是Go语言中一个重要的概念和知识点,而功能强大的reflect正是基于interface.本文即是对Go语言中的interface和reflect基础概念和用法的一次梳理,也算是我阶段学习的总结,以期温故而知新. interface(接口) 定义 在Go语言中,如果自定义类型(比如struct)实现了某个interface中的所有方法,那么就可以说这个类型实现了这个接口.接口可如下定义: type 接口名称 interface { method1(参数列表)

性能测试心得系列一:我所理解的性能测试

性能测试的概念,我就不说了,百度一下,会出来一大堆,每一种说法都有一定的道理.什么是性能测试呢? 请不要告诉我是测试一个测试对象的性能:),性能测试,就我目前了解到的来说,很多时候都是很难去定位的,有很多东东可能会绊住我们前进的步伐!现在我们大体讲下,我所理解的大致思路针对于一个要上线的新功能来说,怎么去做. 首先,我们如果有条件最好去做下 单用户下的自动化测试,去daily的check,新功能的性能表现怎样.实在不能自动化完成,也要手动的去完成. 1) 新功能设置成为一个事物,去结合httpw

深入理解CSS系列(一):理解CSS的盒子模型

接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森破罢了.如果真的那么简单,为什么经常会遇到一些奇怪的样式问题,而要折腾好长时间呢?就是因为无从下手,终究还是基础不扎实啊!最近打算深入的学习一下CSS,以便遇到问题时,才知道如何下手,从而迅速的对症下药."深入理解"只是相对于我个人而言的哈,如果有大神觉得不够深入,请不喜勿喷.这是深入理解

Redis工作系列之一 与 Memcached对比理解

     近期公司项目在使用Redis,这几年Redis很火,Redis也常常被当作Memcached的挑战者被提到桌面上来.关于Redis与Memcached的比较更是比比皆是.然而,Redis真的在功能.性能以及内存使用效率上都超越了Memcached吗? You should not care too much about performances. Redis is faster per core with small values, but memcached is able to u

程序员谈话系列——关于redis的一些理解(二)

一,redis的数据类型都有什么? String hash list set sortedset HyperLogLog Pub/Sub 二,缓存雪崩,击穿,传统. 雪崩:一些热点数据都会做缓存,一般会同时进行定时任务刷新.如果key的失效时间时,大量的用户请求涌入会直接落到数据库上,数据库一般会报一下警,但很有可能没有反应就直接挂了.当然重启数据库也会直接被流量打死.比如如果打挂的是一个用户服务的库,那么依赖这个库的接口都会报错,如果不做熔断的话会瞬间挂到一片. 做法: 1,为了避免缓存雪崩,

深入理解javascript系列之序章

从今天开始,博主会对javascript进行深入理解分析并将自己学习到的一些知识分析整理成博文,来让大家一起共同学习和讨论.如果有什么疑问或者建议,可以和博主联系.如果包含什么错误,希望大家可以进行讨论和指导. 该系列是建立在已经基本掌握了javascript中的基础语法,进入更深一步学习的进阶笔记. 该系列目录分为: 深入理解javascript之内存分配 深入理解javascript之null和undefined 深入理解javascript之作用域 深入理解javascript之原型 深入

javascript高级篇——理解原型和作用域【连载中...】

说明: 该教程绕开了javascript的一些基本的语法知识,直接讲解javascript中最难理解的两个部分,也是和其他主流面向对象语言区别最大的两个部分--原型和作用域,当然,肯定少不了原型链和作用域链.帮你揭开javascript最神秘的面纱. 为什么要偏偏要讲这两个知识点? 这是我在这么多年学习javascript的经历中,认为最难理解.最常犯错的地方,学习这两个知识点,会让你对javascript有更深层次的理解,至少理解了原型和作用域,就不能再算是javascript菜鸟了.另外,这

06深入理解C指针之---指针类型和长度

该系列文章源于<深入理解C指针>的阅读与理解,由于本人的见识和知识的欠缺可能有误,还望大家批评指教. 如果考虑到程序的可移植性和跨平台性时,指针长度就是一个问题,需要慎重处理.一般情况下,数据指针的长度时一样的,与指针类型无关,void型指针.char型指针.结构体指针等统统是一样的,函数指针的长度一般与数据指针长度不同.指针长度与CPU有关,严格意义上说与OS究竟是32位还是64位有关,同时不同的编译器分配内存时,长度也是不一样的.与指针相关的四种预定义类型如下: 一.size_t:用于安全

理解Flexbox:你需要知道的一切

这篇文章介绍了Flexbox模块所有基本概念,而且是介绍Flexbox模块的很好的一篇文章,所以这篇文章非常的长,你要有所准备. 学习Flexbox的曲线 @Philip Roberts在Twitter上发了一个推: 学习Flexbox可不是件很有趣的事情,因为它将挑战你所知道的CSS布局方面的知识.当然这也是非常正常的,因为一切知识都是值得学习的. 另外你要认值对待Flexbox.因为它是现代Web布局的主流方式之一,不会很快就消失.它也成为一个新的W3C标准规范.既然如此,那让我们张开双臂,