1.影像金字塔简介

1.1 为什么要出现影像金字塔这个概念

现在,我假设我们的服务器上有一个1G的影像,需要将其在前端进行显示。我们传统的做法就是首先将服务器中的1G影像下载到前端,然后浏览器加载渲染出图。但是大家想想,首先客户端下载1G的影像需要的时间一定是个漫长的过程,其次浏览器加载这么大的文件也多半会导致其崩溃。而最重要的一个问题是,我们的需求仅仅是浏览全图中的某一个区域下的某几个级别,现在却将全图下载完毕了,而这同样还导致了数据的不安全性(下载到本地),同时我们的每一次放大和缩小以及拖拽都将会使浏览器花上足够长的时间去渲染。

可见,传统的方式是不符合实际需求的。到后来,又有了新的解决方法,比如arcgis的IMS版本中提出了动态出图的概念。也就是当前端发出的请求里包含了需要显示的范围、显示窗口的大小等参数后,后台动态的在原始数据中切出一个符合需求的瓦片,然后将这个数据返回给前台,并且在服务器中对这个瓦片做缓存。

但是,这个方法前端出图依旧很慢,并且使地图服务器的压力过大。终于,我们的影像金字塔解决方案出现了。

1.2原理

影像金字塔就是,我们首先将原始影像按照用户的需求,比如用户需要显示多少种比例尺下的数据,需要显示的是原始影像中的哪个区域的数据,将原始影像按照这些需求进行划分和提取。如图:

最低层就是我们提取和划分出的比例尺最小的一级的瓦片,而最上层的则是比例尺最大的一级的瓦片。我们仔细观察可以发现这样的一个规律:比例尺越小的级别瓦片数据越少,反之则越大。而这个规律导致的结果就是:比例尺越小的级别切图的速度越快,同时,同样大小的瓦片所包含的影像范围越多。

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

2.瓦片行列号的换算原理

2.1 为什么要换算瓦片行列号

上一节中我给出了影像图切成离散型图后文件的组织形式,其中给大家展示了在这种切图下,文件的组织其实是按照瓦片的级别、行、列号来组织的。事实上,紧凑型瓦片(Bundle)的组织样式也是如此,只是它在得到了行列号后还要进行一系列换算,比如读取索引文件找到文件中的偏移量等,这个换算方式我在以后的章节跟大家来讨论。并且,标准的WMS请求中也涉及到行列号的换算,WMS请求中有一个Bbox的参数,而这个参数也与行列号的换算有关系。而标准的WMTS请求中,TILEMATRIX、TILEROW、TILECOL这三个参数代表的就是瓦片的级别、行、列号。

由此可见,不管是针对哪种离线或在线的地图的瓦片请求中,得到瓦片的level、col、row是请求能够实现的核心。

2.2瓦片行列号换算原理

下面,我们先给出瓦片行列号换算的公式。

假设,地图切图的原点是(x0,y0),地图的瓦片大小是tileSize,地图屏幕上1像素代表的实际距离是resolution。计算坐标点(x,y)所在的瓦片的行列号的公式是:

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

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

这个公式应该不难理解,简单点说就是,首先算出一个瓦片所包含的实际长度是多少LtileSize,然后再算出此时屏幕上的地理坐标点离瓦片切图的起始点间的实际距离LrealSize,然后用实际距离除以一个瓦片的实际长度,即可得此时的瓦片行列号:LrealSize/LtileSize。

2.3 resolution的换算原理

如我在上一节《地图比例尺换算原理》中描述的,当系统是经纬度系统时,此resolution可以直接使用切图文档中的resolution。如果系统是平面坐标系统时,此resolution的算法是:

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

3.实际系统中的运用情况

现在我把实际的运用中的需求总结如下:

(1)得到画布的高度和宽度以及此时需要显示的地图的几何范围

(2)得到画布的高度和宽度以及此时需要显示的地图的几何范围,同时也得到了需要显示的地图的级别

最后,我们需要得到在这两种需求下的瓦片行列号范围。

4.换算流程

4.1 流程图

针对在第3节中提到的两种需求,我们进行了不同的换算过程,这里我首先给出流程图:

4.2 详细讲解

以下步骤中涉及到一些公共变量,为了便于描述,我这里用英文代表一些参数。

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

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

Level:地图级别。

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

canvasWidth、canvasHeight:屏幕的长宽

geoMaxX、geoMinX:地理范围中的最大即最小X坐标。

4.2.1第一步,获得请求地理范围中的中心点(centerGeoPoint)

这个换算比较简单,但是为什么我们要首先换算这个中心点呢。原因是我们最后需要的真实地理范围,并不一定是屏幕范围所对应的那个地理范围,它极有可能是大于这个屏幕地理范围的。而事实上是,它一定是大于的,在后面我们讲解瓦片图层类的设计时,会提到一个地理范围缓冲宽度,那时候大家就更能明白为什么是要首先获取地理范围中的中心点了。

4.2.2 第二步,判断请求中是否包含了需要显示的地图级别,分别处理

4.2.2.1 包含了Level

如果请求中已经指定了使用的Level,则我们接下来可以直接使用此Level来进行地图实际请求范围的换算。

4.2.2.2 没有包含Level

而当请求中无Level时,我们的换算将会比较复杂一些,这个换算的目的就是求出此时的地图应该以什么Level显示是最合适的,即nearestLevel。它的过程是,首先根据请求中的地理范围和屏幕大小范围,求得此时我们本需要的瓦片实际大小,即:(geoMaxX-geoMinX)/( canvasWidth/tileSize),也就是用实际地理长度除以此时的瓦片个数,从而得到了我们请求中本需求的瓦片实际大小。

但是,目前我们不能保证我们所切的图中是一定有这个需求里的比例尺的。于是我们还需要做一个遍历,遍历我们的地图中所有的比例尺,找出一个与此需求比例尺下的瓦片实际大小最贴近的真实瓦片实际大小,而这个瓦片实际大小所对应的此时的地图比例尺,即是我们求得到的最合适的比例尺,它所代表的地图级别就是最贴近需求的地图级别,nearestLevel。

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

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

首先得到Level下的一像素代表的实际大小,即resolution。然后用centerGeoPoint加上或减去半个屏幕长度(canvasBounds)乘以resolution后得到的范围便是需求中的屏幕范围在获得的Level下应该对应的实际地理范围。

以屏幕左上角X所对应的实际地理坐标为例:

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

这里顺便提一下,算出的这个屏幕范围所对应的地理范围,它的作用是非常大的,在以后的屏幕坐标转换成地理坐标,以及地理坐标转换成屏幕坐标,还有偏移补偿量的换算上是至关重要的一个参数。

4.2.4 第四步,计算其他参数,比如瓦片行列的起始号以及瓦片个数

这一步为收尾工作,根据之前算出来的一系列参数来进行最后的换算。

4.2.4.1 瓦片起始行列号(fixedTileLeftTopNumX、fixedTileLeftTopNumY)

在知道了请求的地理范围后,此起始行列号的换算便是水到渠成了。不过这里还是要稍微做个补充,我们算出来的地理范围并不能保证真实的瓦片的起始瓦片所对应的地理坐标与地理范围的左上角地理范围重合,为此我们应该允许地理范围的一个扩张,这个扩张多少是一个很值得推敲的地方。这里我们默认为扩张至请求到的第一张瓦片左上角所对应的地理坐标。

公式为:

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

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

4.2.4.2 实际地理范围(realMinX、realMaxY)

我们之前只是求得了屏幕范围所对应的地理范围,而当我们换算出这个范围所需要的瓦片后,这些算得的瓦片其所对应的地理范围并不一定是屏幕范围所对应的那个地理范围,此时我们需要重新算出实际地理范围。

realMinX = fixedTileLeftTopNumX * curLevelClipLength + originX;

realMaxY= originY - fixedTileLeftTopNumY * curLevelClipLength;

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

由于地理范围中的第一张瓦片,即左上角的第一张瓦片,并不一定是完全包含在屏幕地理范围内的,于是这里又涉及到另外一对参数,左上角偏移像素。

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

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

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

再次补充,其中resolution表示的是此Level下的一像素所代表的实际单位大小。

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

这里我先给出一个屏幕地理范围与实际请求出的瓦片地理范围间关系的示意图:

在前面我已经诉说了,我们求得的屏幕地理范围内的瓦片所代表的瓦片个数基本上是会比屏幕范围本身是要大的。其实这个原因不难理解,因为瓦片是地图表示的最小单位了,其不可能再划分,所以在我们请求瓦片的起始行列号时,用到了Math.floor这个函数,即求得离屏幕范围的左上角坐标最近的瓦片行列号。但是,在求得X、Y轴上的瓦片个数时,我们得用到Math.ceil这个函数,这是为了能求得离屏幕范围的右下角坐标最近的瓦片行列号数。

具体公式是:

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

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

WebGIS教学——瓦片行列号换算相关推荐

  1. (三)WebGIS前端地图显示之根据地理范围换算出瓦片行列号的原理(核心)

    https://www.cnblogs.com/naaoveGIS/p/3899821.html (三)WebGIS前端地图显示之根据地理范围换算出瓦片行列号的原理(核心) 文章版权由作者李晓晖和博客 ...

  2. 瓦片经纬度及行列号转换_ArcGIS根据最大最小坐标换算瓦片行列号

    1.前言 在上一节中我们知道了屏幕上一像素等于实际中多少单位长度(米或经纬度)的换算方法,而知道这个原理后,接下来我们要怎么用它呢?它和我们前端显示地图有什么关联呢?这一节,我会尽量详细的将这两个问题 ...

  3. 瓦片经纬度及行列号转换_arcgis server瓦片行列号计算

    2013-08-01 arcgis server切图时会设置一个原点坐标,如果是经纬度坐标一般默认(x0,y0)=(-400,400)作为切图的起始点,即从这开始算行列号.假设切图的地图某点坐标为x, ...

  4. 百度地图根据经纬度计算瓦片行列号

    根据百度经纬度坐标计算该点所在瓦片的行列号的算法好像并没有公开,网上相关资料很少. 通过研究百度地图JavaScript API源代码(经过混淆后的),大致了解计算过程,现将具体过程解释如下: 1.J ...

  5. 瓦片经纬度及行列号转换_arcgis server瓦片行列号计算

    arcgis server切图时会设置一个原点坐标,如果是经纬度坐标一般默认(x0,y0)=(-400,400)作为切图的起始点,即从这开始算行列号.假设切图的地图某点坐标为x,y,切图的瓦片大小为2 ...

  6. 天地图根据经纬度坐标计算瓦片行列号(python)

    def get_tianditu_info(rect_pts, zoom):"""根据经纬度计算行列号:param rect_pts: 矩形框坐标 例[a,b,c,d]左 ...

  7. 天地图解析(瓦片层级、比例尺、行列号计算)

    目录 瓦片元数据及分级介绍 比例尺如何计算得到 知道一个点坐标,测算某层级下瓦片行列号 常用的天地图瓦片底图有地图和影像两种,每一种又分别有经纬度投影和球面墨卡托投影两种坐标,请求地址中_c表示经纬度 ...

  8. webGIS学习(二)探究本质,WebGIS前端地图显示之地图比例尺换算原理 发布于 3 年前 作者 lzxue 7473 次浏览 来自 技术 1.没有豆浆机怎么办? 喝豆浆是我们早晨中基本

    1.没有豆浆机怎么办? 喝豆浆是我们早晨中基本必备的一环,油条豆浆,其乐融融.如果我问大家豆浆是怎么来的,五谷不分的人会说是用钱买的,了解有黄豆这会事的人会说是用豆浆机把黄豆磨出来的.如果我们再倒退十 ...

  9. 风云4A卫星行列号和经纬度查找表文件下载及解析

    FY-4A是中国自主研发的静止气象卫星,其在太阳同步轨道上运行,每天可以全天候.全球范围内获取高空大气和地表的红外.可见光.微波等多种信息,对天气.气候研究及预报有着重要的作用. 一.风云卫星官网   ...

最新文章

  1. 播放此电影需要以下插件,但尚未安装: MPEG-4 AAC decoder
  2. efficientransac_【泡泡图灵智库】基于图割优化的RANSAC算法(CVPR)
  3. verilog基础—规范化参数定义parameter
  4. c++ lambda 重载_您会后悔对Lambdas应用重载!
  5. 三维姿态:关于solvePnP与cvPOSIT
  6. 收藏 | 万字长文带你理解Pytorch官方Faster RCNN代码
  7. java三目表达式_Java8新特性Lambda表达式
  8. 两个JS文件使用全局变量并互相调用funciton,JS判断checkbox状态,延迟执行JS语句
  9. numpy 常用产生随机数方法
  10. 20200728每日一句
  11. matlab画三原色品图,怎么为色品图填充颜色,Error using == TriScatteredInterp
  12. 一文读懂什么是ICT
  13. 变速齿轮修改服务器时间,可改变游戏速度!游戏变速齿轮安装使用说明
  14. 医学图像分割——Unet
  15. DbContext(String)+SqlQuery一起使用
  16. RSA 加密解密使用实例(c++实现)
  17. 软件测试项目管理系统系统描述
  18. BI数据分析从业者从零开始学习财务知识?有哪些入门书籍推荐
  19. weka之数据集学习
  20. 密码学归约证明——基于伪随机函数的消息鉴别码方案

热门文章

  1. 福布斯:雅虎代理权争夺战背后的十大问题
  2. 【Unity】从零使用Amplify Shader - 超简单2D外轮廓
  3. laravel-admin 省市区三级联动的爬坑问题
  4. uniapp之导航栏设置和沉浸式的解决方法
  5. C#日历calendar.cs
  6. nsis安装包(四)_软件环境
  7. LPA* 路径搜索算法介绍及完整代码
  8. PWM控制的基本原理及相关概念
  9. jquery:选择器【基础选择器、层级选择器、属性选择器和方法操作、过滤选择器、筛选选择器和方法,可见性过滤选择器】
  10. createGiottoVisiumObject从10x原始数据创建 giotto对象