WebGIS前端地图显示之依照地理范围换算出瓦片行列号的规律88bifa必发娱乐

小说版权由作者李晓晖和天涯论坛共有,若转发请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/

1.前言

在上一节中大家精通了屏幕上一像素等于实际中稍卡片机位长度(米或经纬度)的折算方法,而知晓这几个规律后,接下去大家要怎么用它吗?它和大家前端展现地图有哪些关系呢?这一节,作者会尽量详细的将那七个难题逐项回答。说一个题外话,这一名目繁多的稿子作者都会少给代码,多画流程图大概UML图来跟我们交换,一来便于没有过多GIS和编程基础的人读懂,二来使我们不局限于某种代码的已毕而更关注于原理。

2.印象金字塔简介

咱俩事先反复提到了形象金字塔这一个概念,可是从未对其做三个几乎的介绍,那里自身将这几个概念补充一下。

2.1 为啥要出新映像金字塔那几个定义

现行,小编一旦大家的服务器上有二个1G的映像,需求将其在前端进行突显。大家古板的做法就是率先将服务器中的1G印象下载到前端,然后浏览器加载渲染出图。不过我们想想,首先客户端下载1G的映像须要的时刻一定是个漫长的进度,其次浏览器加载这么大的文书也大半会促成其崩溃。而最关键的八个题目是,大家的急需仅仅是浏览全图中的某1个区域下的某多少个级别,以后却将全图下载完毕了,而这无异于还致使了数量的不安全性(下载到本地),同时我们的每五次放大和紧缩以及拖拽都将会使浏览器花上丰盛长的小时去渲染。

足见,古板的措施是不符合实际须求的。到新兴,又有了新的消除措施,比如arcgis的IMS版本中提议了动态出图的定义。相当于当前端发出的请求里含有了索要出示的限制、展现窗口的深浅等参数后,后台动态的在原本数据中切出2个合乎须要的瓦片,然后将那一个数量重回给前台,并且在服务器中对这么些瓦片做缓存。

唯独,这几个办法前端出图依然很慢,并且使地图服务器的下压力过大。终于,大家的印象金字塔消除方案出现了。

2.2原理

形象金字塔就是,大家先是将原有印象根据用户的需求,比如用户需求突显多少种比例尺下的数码,必要出示的是原本影象中的哪个区域的数额,将原来映像依照这个必要开展剪切和提取。如图:

 88bifa必发娱乐 1

最低层就是我们领到和剪切出的比例尺最小的一级的瓦片,而最上层的则是比例尺最大的顶级的瓦片。大家仔细观看可以窥见那样的壹个法则:比例尺越小的级别瓦片数据越少,反之则越大。而以此规律造成的结果就是:比例尺越小的级别切图的快慢越快,同时,同样大小的瓦片所富含的形象范围越多。

当我们建立好了映像金子塔后,前端再请求地图时,则将只是在切好的瓦片缓存中,找到相应级别里对应的瓦片即可。然后在前端将那个请求到的瓦片拼接出来,便得以获得用户须求的级别下的可视范围内的瓦片了。

3.瓦片系列号的折算原理

3.1 为何要换算瓦片行列号

上一节中本人付出了影象图切成离散型图后文件的团伙方式,其中给大家来得了在那种切图下,文件的团协会其实是依照瓦片的级别、行、列号来社团的。事实上,紧密型瓦片(Bundle)的社团体制也是这么,只是它在获取了行列号后还要举行一多重换算,比如读取索引文件找到文件中的偏移量等,那个换算格局本人在事后的章节跟大家来谈谈。并且,标准的WMS请求中也关乎到行列号的折算,WMS请求中有贰个Bbox的参数,而这几个参数也与行列号的折算有关联。而业内的WMTS请求中,TILEMAT途乐IX、TILEROW、TILECOL这些参数代表的就是瓦片的级别、行、列号。

由此可见,不管是指向哪类离线或在线的地形图的瓦片请求中,拿到瓦片的level、col、row是请求可以落到实处的大旨。

3.2瓦片行列号换算原理

上面,大家先交付瓦片行列号换算的公式。

如若,地图切图的原点是(x0,y0),地图的瓦片大小是tileSize,地图显示器上1像素代表的实际距离是resolution。统计坐标点(x,y)所在的瓦片的队列号的公式是:

col  = floor((x0 – x)/( tileSize*resolution))

row = floor((y0 – y)/( tileSize*resolution))

那几个公式应该简单通晓,不难点说就是,首先算出几个瓦片所蕴藏的骨子里尺寸是不怎么LtileSize,然后再算出此时屏幕上的地理坐标点离瓦片切图的起先点间的其实距离LrealSize,然后用实际距离除以贰个瓦片的实在尺寸,即可得此时的瓦片行列号:LrealSize/LtileSize。

3.3 resolution的折算原理

如本人在上一节《地图比例尺换算原理》中描述的,当系统是经纬度系统时,此resolution可以向来动用切图文档中的resolution。假诺系统是平面坐标系统时,此resolution的算法是:

resolution=scale*inch2centimeter/dpi。其中scale是地图比例尺,inch2centimeter为英寸转毫米的参数,dpi为1英寸所含有的像素。

4.其实系统中的运用气象

今昔自小编把实际的应用中的须求总括如下:

(1)得到画布的中度和宽度以及此时急需出示的地形图的几何范围

(2)得到画布的冲天和宽窄以及此时亟需出示的地形图的几何范围,同时也取得了要求浮现的地形图的级别

最后,大家需求取得在那三种要求下的瓦片行列号范围。

5.换算流程

5.1 流程图

针对在第3节中涉嫌的三种需要,我们开展了不相同的折算进度,那里本人第一给出流程图:

 88bifa必发娱乐 2

5.2 详细讲解

以下步骤中关系到有个别国有变量,为了便于描述,作者那边用英文代表有个别参数。

originX,originY:地图切图时的切图原点坐标。

tileSize:瓦片的屏幕像素大小。

Level:地图级别。

resolution:某地图级别下显示屏一像素代表的实际上单位大小。

canvasWidth、canvasHeight:屏幕的长宽

geo马克斯X、geoMinX:地理范围中的最大即最小X坐标。

5.2.1首先步,得到请求地理范围中的中央点(centerGeoPoint)

本条换算相比较不难,不过为何大家要首先换算这么些主题点呢。原因是我们最后索要的真实性地理范围,并不一定是荧屏范围所对应的十分地理范围,它极有只怕是超出那几个显示屏地理范围的。而事实上是,它一定是当先的,在前面大家讲课瓦片图层类的安插时,会提到一个地理范围缓冲宽度,那时候我们就更能明了为啥是要率先取得地理范围中的主旨点了。

5.2.2 第二步,判断请求中是否含有了急需出示的地形图级别,分别处理

5.2.2.1 包含了Level

假诺请求中一度指定了采纳的Level,则大家接下去可以一向运用此Level来进展地图其实请求范围的折算。

5.2.2.2 没有包涵Level

而当呼吁中无Level时,我们的折算将会相比较复杂一些,这么些换算的目的就是求出此时的地形图应该以什么Level呈现是最合适的,即nearestLevel。它的长河是,首先依据请求中的地理范围和屏幕尺寸范围,求得此时大家本必要的瓦片实际尺寸,即:(geo马克斯X-geoMinX)/(
canvasWidth/tileSize),也等于用实际地理长度除以此时的瓦片个数,从而赢得了我们请求中本须求的瓦片实际尺寸。

唯独,近期大家无法担保大家所切的图中是必然有这么些要求里的比例尺的。于是大家还索要做1个遍历,遍历大家的地图中有所的比例尺,找出3个与此须求比例尺下的瓦片实际尺寸最接近的实在瓦片实际尺寸,而以此瓦片实际大小所对应的此时的地图比例尺,即是大家求得到的最合适的比例尺,它所代表的地形图级别就是最贴近须求的地图级别,nearestLevel。

5.2.3 第三步,算出屏幕范围所对应的地理范围 (minX、minY、maxX、maxY)

在第一步中得到了centerGeoPoint,第二步得到了Level的规格下,这一步就很简单了。

先是得到Level下的一像素代表的莫过于尺寸,即resolution。然后用centerGeoPoint加上或减去半个屏幕尺寸(canvasBounds)乘以resolution后得到的范围便是须求中的显示屏范围在赢得的Level下应该相应的实际上地理范围。

以显示屏左上角X所对应的实在地理坐标为例:

minX =centerGeoPoint – (resolution* canvasWidth)/2;

此地顺便提一下,算出的这几个显示屏范围所对应的地理范围,它的作用是卓殊大的,在此后的屏幕坐标转换成地理坐标,以及地理坐标转换成显示器坐标,还有偏移补偿量的折算上是非常主要的一个参数。

5.2.4 第四步,统计其余参数,比如瓦片行列的先导号以及瓦片个数

这一步为了却工作,根据从前算出来的一名目繁多参数来开展最终的折算。

5.2.4.1 瓦片初始行列号(fixedTileLeftTopNumX、fixedTileLeftTopNumY)

在知晓了请求的地理范围后,此发轫行列号的折算便是马到功成了。但是那里照旧要多少做个补充,大家算出来的地理范围并不或者确保真实的瓦片的起头瓦片所对应的地理坐标与地理范围的左上角地理范围重合,为此大家相应允许地理范围的2个恢宏,那个增加多少是贰个很值得推敲的地点。那里大家暗中同意为增添至请求到的率先张瓦片左上角所对应的地理坐标。

公式为:

fixedTileLeftTopNumX = Math.floor((Math.abs(originX –
minX))/resolution*tileSize);

fixedTileLeftTopNumY = Math.floor((Math.abs(originY –
maxY))/resolution*tileSize);

5.2.4.2 实际地理范围(realMinX、real马克斯Y)

咱俩后面只是求得了显示器范围所对应的地理范围,而当大家换算出这么些范围所急需的瓦片后,那个算得的瓦片其所对应的地理范围并不一定是屏幕范围所对应的老大地理范围,此时我们必要再次算出实际地理范围。

realMinX = fixedTileLeftTopNumX * curLevelClipLength + originX;

realMaxY= originY – fixedTileLeftTopNumY * curLevelClipLength;

5.2.4.3 左上角偏移像素(offSetX、offSetY)

出于地理范围中的第一张瓦片,即左上角的第一张瓦片,并不一定是截然包涵在屏幕地理范围内的,于是那里又涉及到别的一对参数,左上角偏移像素。

为何须要那几个参数呢,原因是,当我们把瓦片都请求回来后还要做三个折算,即换算出每一张瓦片的左上角坐标应该对应在图层(TIleCanvas)上的哪一个显示屏坐标。这一个偏移像素便是为着那个换算而做的准备。

offSetX = ((realMinX- minX )/resolution);

offSetY = ((maxY – realMaxY )/resolution);

双重补充,其中resolution表示的是此Level下的一像素所代表的莫过于单位大小。

5.2.4.4 X、Y轴上的瓦片个数(mapXClipNum、mapYClipNum)

那边小编先交付一个显示屏地理范围与实际请求出的瓦片地理范围间关系的示意图:

 88bifa必发娱乐 3

88bifa必发娱乐, 在前边我已经诉说了,我们求得的显示器地理范围内的瓦片所表示的瓦片个数基本上是会比荧屏范围本人是要大的。其实这一个缘故简单了然,因为瓦片是地图表示的矮小单位了,其不可以再分开,所以在我们恳请瓦片的前奏行列号时,用到了Math.floor那个函数,即求得离显示屏范围的左上角坐标近期的瓦片行列号。可是,在求得X、Y轴上的瓦片个数时,我们得用到Math.ceil这一个函数,那是为着能求得离显示屏范围的右下角坐标近来的瓦片行列号数。

实际公式是:

mapXClipNum = Math.ceil((canvasWidth + Math.abs(offSetX))/tileSize);

mapYClipNum = Math.ceil((canvasHeight + Math.abs(offSetY))/tileSize);

6.总结

基于上边步骤,大家最终可以求出瓦片的行列号,以及要求的在X、Y轴的个数。同时大家还求得了将瓦片画在画布上时所须求的参数,左上角偏移像素。

这一节相信我们都会看的很累,因为这一节流程太多,公式太多,不过也正因为这么,这一节是大家介绍前端显示地图的种类中最根本的一节了,希望大家能和本人一起将以此原理好好的讨论与探究。下一节里小编将写的类容相相比较较轻松了,紧要介绍的会是我们算出了行列号后,如何拔取它。作者将对两种常见在线地图和离线地图的请求格局做二个介绍和小结。欢迎我们频频关切。

明日是寒食节,祝节日欢喜。对和作者同一温馨过节的人,写句话和我们共勉:

在贫乏惦念的途中

你是小船2头,大桥一座。

 

                                                     
—–欢迎转发,但保留版权,请于显著处标明出处:http://www.cnblogs.com/naaoveGIS/

                                                               
即使您觉得本文确实协助了你,可以微信扫一扫,举办小额的打赏和鞭策,谢谢^_^

                              88bifa必发娱乐 4

相关文章