新普金娱乐网址


编码员将改成流水线工人?《连线》撰稿人谈计算机世界未来就业问题

哼教师针对子女发生差不多要?

地理冲图片实现酷炫地图显示以及相互的方案

  • 九月 22, 2018
  • 地理
  • 没有评论

文章版权由作者李晓晖以及博客园共有,若转载请给大庭广众处于标明出处:http://www.cnblogs.com/naaoveGIS/。

文章版权由作者李晓晖同博客园共有,若转载请给大庭广众处于标明出处:http://www.cnblogs.com/naaoveGIS/

1.前言

于达到平等节中我们解了屏幕及一像素等于实际被稍微单位长度(米要透过纬度)的折算方法,而详这个规律后,接下我们若怎么用它们吧?它和我们前端显示地图有啊关系呢?这无异节,我会尽量详细的将这半个问题逐项回答。说一个书外话,这同样层层之章我还见面少为代码,多画流程图或者UML图来和大家交流,一来便于没有多GIS和编程基础之丁念懂,二来使大家不局限为某种代码的落实而更关爱于原理。

1. 背景

     
 目前可怜屏幕上亮酷炫地图的需要逐步成风,我们如常的方案是采用arcmap对数码进行配图。但是,arcmap配图的局限性比较坏,并且针对不同需求,常规配图方案可能反而吃事情复杂化了。这里和大家分享两独经过美工设计的图来化解地图问题的案例。

2.影像金字塔简介

俺们事先反复提到了影像金字塔是概念,但是没针对那个举行一个大约的牵线,这里我用此定义上一下。

2. 案例1——倾斜地图

    地理 1

    地理 2

     此示例中,需求总结出些许碰:

    a.地图需要倾斜展示。

    b.地图上急需盖不同款式显得一些POI点。

   
如果坐民俗方案来做,对地图配图后尚用针对二维地图框架的器皿进行倾斜,并且对所要出示的POI数据坐标点进行倾斜转换,实现比较困难。

   
仔细研究需要,其相设计达到只有发针对点数据POI的竞相,切交互简单,而且在大屏的一体化展示被,地图不需有缩放平移需求。于是,我们得被有另外一栽实现思路:

    a.不用地图框架,前端用DIV引入原始未倾图片。

    b.用CSS控制该DIV的侧角度。

   
c.设定图片左上角的地理坐标,确定图片的1独如素所代表的地理长度,然后对POI地理坐标算有该在原本图片及之图片坐标。

   
d.获得POI的本来面目图片坐标后,再以倾斜角度算有当侧图片及之图样坐标,然后同以DIV引入该POI的图标即可。 

2.1 为什么要起像金字塔是定义

现,我而我们的服务器上发生一个1G之形象,需要用那于前者进行展示。我们传统的做法就是首先以服务器受到之1G形象下充斥至前端,然后浏览器加载渲染出图。但是大家想,首先客户端下充斥1G之形象需之岁月早晚是单漫长的进程,其次浏览器加载这么老之文书呢大半会促成其倒。而尽着重之一个问题是,我们的需要单是浏览全图中之某一个区域下的某某几乎独级别,现在也将皆图下充斥了了,而就无异还致使了数据的非安全性(下充斥到当地),同时我们的各一样不成放大与紧缩同拖拽都以见面使浏览器花上足长之岁月去渲染。

看得出,传统的方法是勿符合实际需求的。到新兴,又发生了初的缓解智,比如arcgis的IMS版本被提出了动态出图的定义。也就是是现阶段端有之请求里含了需要展示的范围、显示窗口的尺寸等参数后,后台动态的以原始数据遭到绝对出一个合要求的瓦,然后以这数量返回给前台,并且以服务器受到针对这瓦片做缓存。

只是,这个法前端出图依旧非常缓慢,并且要地图服务器的压力过特别。终于,我们的影像金字塔解决方案出现了。

3. 案例2——复杂交互的老三维效果地图

    同样,先被起设计稿:

   地理 3

   地理 4

    需求描述:

    a.带3D效果亮地图。

    b.行政区划可以选中交互。

    c.行政中心点图标可以控制。

    难点分析:

   
按照上一个方案中之纯前端方法,在行政区划的入选高亮交互上生一定难度。这里提出了另外一个方案:

   
a.将3D效果地图当做是真实地图,进行简短纠正,处理成包含地理坐标的实地图。 
  

    地理 5

    b.基于正后底图样,将行政区划矢量化。

    c.将地理图片切图,并为此GIS框架加载。

    d.将处理好之矢量化行政数据为矢量图层叠加,响应交互。

    e.将执行政中心点于GIS框架上折加展示。

   
f.鼠标移动到行政点上后得到到行政点的屏幕坐标,利用DIV将规划好的气泡框结合于定义内容进行互动展示。

2.2原理

像金字塔就是,我们先是用原影像按照用户之要求,比如用户需要展示小种比例尺下之数,需要展示的凡原始影像中之哪位区域之数码,将原本影像按照这些需要进行分与提。如图:

 地理 6

最低层就是咱们提和剪切有的比例尺最小之一级的瓦,而最为上层的虽然是比例尺最特别之一级的瓦。我们密切察看可以发现这么的一个原理:比例尺越小的级别瓦片数据进一步少,反的则更为老。而此规律造成的结果就是是:比例尺越聊之级别切图的快慢更快,同时,同样大小的瓦所蕴涵的像范围更加多。

当我们树立好了形象金子塔后,前端再请地图时,则以只是在切好的瓦缓存中,找到相应级别里对应的瓦即可。然后以前者将这些请求到之瓦拼接出来,便可以落用户需之级别下之可视范围外的瓦了。

4. 总结

   
我们举行GIS的口张地图就是不禁的想用地图框架去贯彻,须知针对不同需求,解决方案得以是层出不穷的。

    a.比如现在之echarts、highcharts在缓解简单地图显示及是生好用之。

    b.某些在线环境场合下,利用百度API或者高德API也是立竿见影的。

    c.特定复杂气象,利用图片直接处理为是一个门路。

    d.真不行,配图加上地理框架还上。

 

   
                  —–欢迎转载,但保留版权,请于大庭广众处于标明出处:http://www.cnblogs.com/naaoveGIS/

                                                                    如果你看本文确实帮了公,可以微信扫一扫,进行小额的打赏和鼓励,谢谢
^_^

                                地理 7

3.瓦片排号的折算原理

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

上一致节省吃自己为起了形象图切成离散型图后文件的团队形式,其中为大家展示了以这种切图下,文件的集团其实是遵循瓦片的级别、行、列号来组织的。事实上,紧凑型瓦片(Bundle)的组织体制也是这样,只是它在获得了排号晚还要开展同样文山会海换算,比如读取索引文件找到文件中之偏移量等,这个换算方式本身在后来的回跟大家来谈谈。并且,标准的WMS请求被为论及到队号的折算,WMS请求被发出一个Bbox的参数,而以此参数为与行列号的折算出涉嫌。而正式的WMTS请求被,TILEMATRIX、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省中干的少数栽需求,我们进行了不同之折算过程,这里我先是为出流程图:

 地理 8

5.2 详细讲解

以下步骤中干到一些国有变量,为了有利于描述,我这里用英文代表有参数。

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

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

Level:地图级别。

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

canvasWidth、canvasHeight:屏幕的长宽

geoMaxX、geoMinX:地理范围中的极老就是无限小X坐标。

5.2.1率先步,获得请地理范围中之核心点(centerGeoPoint)

此换算比较简单,但是怎么咱们设率先换算这个核心点也。原因是我们最后要之真正地理范围,并不一定是屏幕范围所对应之充分地理范围,它最好有或是过此屏幕地理范围之。而实际是,它肯定是超乎的,在末端我们上课瓦片图层类的计划性时,会干一个地理范围缓冲宽度,那时候大家就还能分晓怎么是使首先获得地理范围被之为主点了。

5.2.2 第二步,判断请求被是不是包含了特需出示的地图级别,分别处理

5.2.2.1 包含了Level

如要被已经指定了以的Level,则我们连下好一直行使此Level来拓展地图实际上请求范围的折算。

5.2.2.2 没有包含Level

假如当求中无Level时,我们的折算将会晤比较复杂一些,这个换算的目的就是是要出这之地形图应坐什么Level显示是极致适用的,即nearestLevel。它的进程是,首先根据请求被之地理范围与屏幕大小范围,求得此时我们随需要之瓦片实际尺寸,即:(geoMaxX-geoMinX)/(
canvasWidth/tileSize),也就是是因此实际地理长度除以此时的瓦片个数,从而获得了咱们呼吁中本需求的瓦片实际尺寸。

然而,目前我们不克保证我们所断的图中是必生之需要里的比例尺的。于是我们尚亟需开一个遍历,遍历我们的地图中所有的比例尺,找有一个同之需要比例尺下之瓦片实际尺寸最贴近的实瓦片实际尺寸,而这瓦片实际大小所对应之此时底地图比例尺,即是咱们要获得的极致宜的比例尺,它所表示的地图级别就是最好贴近需求的地图级别,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)

以掌握了请求的地理范围后,此起始行列号的折算便是回至渠道成了。不过此还是如多少开只上,我们算是出来的地理范围并无克担保真实的瓦的起始瓦片所对应之地理坐标与地理范围的左上角地理范围重合,为这我们应当允许地理范围的一个恢弘,这个扩张多少是一个良值得推敲的地方。这里我们默认为扩张到请求到的首先摆瓦片左上角所对应之地理坐标。

公式为:

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

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

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

咱们前就是求得了屏幕范围所对应之地理范围,而当我们换算出这个界定所欲之瓦片后,这些算是得之瓦其所对应的地理范围并不一定是屏幕范围所对应之不可开交地理范围,此时我们用重新算有实际地理范围。

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)

此间自己先行让有一个屏幕地理范围以及事实上请求出底瓦片地理范围里边涉及的示意图:

 地理 9

 在眼前我已经诉说了,我们求得的屏幕地理范围外的瓦所表示的瓦个数基本上是会见比较屏幕范围本身是一旦充分的。其实是由不难理解,因为瓦片是地图表示的绝小单位了,其无可能又分叉,所以当我们要瓦片的开场行列号时,用到了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轴的个数。同时我们还求得了将瓦片画于画布上不时所欲的参数,左上角偏移像素。

当下同一节相信大家还见面看之不胜麻烦,因为这无异节省流程最多,公式太多,但是也正好因这样,这同节是咱介绍前端显示地图的千家万户被极度关键的同等节省了,希望大家能够及本人一同拿之规律好好的酝酿和琢磨。下一致省里我以写的类容相对比轻松了,主要介绍的见面是咱们终于有了班号晚,如何行使它们。我将针对几乎种常见在线地图跟离线地图的求方式做一个介绍和总结。欢迎大家连关注。

今是七夕,祝节日快乐。对和自家同样好过节的人口,写句话和豪门共勉:

以少思念的中途

汝是小船一独,大桥一所。

 

                                                     
—–欢迎转载,但保留版权,请于大庭广众处于标明出处:http://www.cnblogs.com/naaoveGIS/

                                                               
如果你认为本文确实帮了若,可以微信扫一扫,进行小额的打赏和鞭策,谢谢
^_^

                              地理 10

相关文章

No Comments, Be The First!
近期评论
    分类目录
    功能
    网站地图xml地图