WebGIS中矢量切图的初步研究

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

1.背景

在GIS领域,金字塔技术一直是一个基础性技术,WMTS规范专门制定了针对切片请求的格式。利用这种技术,前端可以快速展示出指定级别的地图或影像。

但是,由于切图本身是一张图片,图片上看似是兴趣点的要素根本无法进行前端交互。于是,针对兴趣点等矢量数据的展示,基本原理都是先获取到矢量的地理信息(比如GeoJson),在前端绘制(内核为一个element),于是该element便能进行鼠标响应等交互了。

2.矢量数据的一般展示方法

2.1 矢量数据按需请求

根据需要,每次向服务器(比如根据地理范围、属性信息)进行请求,将请求返回的数据绘制在前端。

优点是,按需请求,数据返回量有限,单个请求效率较高。

缺点是,频繁和服务器交互,在给服务器造成巨大压力的同时,多个请求,甚至某些重复请求,都会增大前端交互耗时,降低用户体验。

2.2 矢量数据一次请求,按需展示

随着前端技术越来越成熟,电脑内存越来越大,RIA技术对矢量数据的展示做了更多的优化,其中一种常用方式就是矢量数据一次请求,按需展示方式。

比如以下使用LeafLet开发的例子:http://demo.qunee.com/map/LeafLet+MapABC.html

                       

查看后端请求:

 

可以看见,在页面初始化时就将所有矢量信息读取到前端,然后根据需求进行分级别聚类展示。

优点是:减少与服务端的交互,降低服务端的压力,提高用户体验。

缺点是:第一次请求返回的数据量过大,网络耗时较多,服务器在迎接第一次请求时也有相当压力,并且对客户端电脑配置有一定的依赖。

3.换一种解决思路——矢量切图

3.1 何为矢量切图

何为矢量切图呢?说直白点,就是将矢量数据以建立金字塔的方式,切割成一个一个描述性文件,比如以GeoJson格式组织或者以自定义格式组织。

这是一份矢量数据切图完后的截图:

 

文件中具体内容为geojson格式组织:

 

3.2切图工具

3.2.1商业切图工具

在最近召开的esri大会上公布的esri的一个新的亮点便是他们的arcgispro产品在支持遥感数据处理、三维高效展示外,着重强调了对矢量切图的支持。但是,目前该产品为beta版。

早前接触过苏州超擎公司,对方的产品也能支持矢量切图,并且在此基础上,对方还支持影像数据不切图压缩为流方式前端实时展示。

3.2.2 开源切图软件

目前支持矢量切图的开源软件,在网上大家比较推崇的是TileStache工具,安装这个工具比较耗费精力,以下均是该工具需要依赖的其他软件环境:

 

 

简单点说,需要配置好GDAL环境,python环境,均配置好后才可使用。并且目前只测试了在win7上运行,在win8上便不可以。

3.3 前端支持矢量瓦片展示

目前支持矢量瓦片展示的前端有leaflet,openlayers,arcgis js4.0。

3.3.1 arcgis js4.0中的解决方案

展示例子地址为:http://basemapsbeta.arcgis.com/preview/app/index.html

 

 

其支持的矢量瓦片格式为满足Mapbox图片存储的格式(https://www.mapbox.com/)。

3.3.2leaflet中的解决方案

展示例子地址为:http://basemapsbeta.arcgis.com/preview/app/index.html

 

 

这里支持的是GeoJson格式的矢量瓦片。

4. 目前研究中发现的缺点

a.矢量切图工具只能切WGS84坐标系下的矢量图层。

b.leaflet只能加载显示可以转换为WGS84坐标系的矢量瓦片数据。

5. 优化

5.1前端支持任何坐标系下的矢量瓦片

继承已有GIS框架中的canvastilelayer,利用开源的pbf解析库,重写gettile并解析重绘。摆脱leaflet对矢量瓦片坐标系的限制。利用该方式,矢量瓦片为任何坐标系均能支持。

 

 

 

5.2前端缓存优化

将读取过的矢量瓦片以一定的缓存机制缓存至内存中,使用缓存调度算法进行调度。

6.使用场景

a.根据范围查询展示矢量数据时,可以完全使用矢量切图。

b.根据范围和属性展示矢量数据时,可以先根据范围返回数据,在前端根据属性数据进行过滤,最后展示。

7.有待解决的地方

开源矢量切图工具目前只能切WGS84的矢量数据,将任何格式数据转换成WGS84的数据是不现实的。针对这种问题,自己开发矢量切图工具不失为一种选择。开发可以支持点数据的矢量切图工具难度不大,但是开发能够支持线和面数据的矢量切图工具则存在不小的难度。后续还需继续研究。

 

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

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

                                              

时间: 2024-09-20 08:45:21

WebGIS中矢量切图的初步研究的相关文章

(十二) WebGIS中矢量图层的设计

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在前几章中我们已经了解了什么是矢量查询.屏幕坐标与地理坐标之前的转换以及要素的设计,有了这些知识,这一章里我们终于可以进行矢量图层的设计了. 在Catalog里创建一个FeatureClass时,我们能够选择是创建点图层或者线图层或者面图层等.所谓点图层,即该图层中的要素只能是点,其他几个图层顾名思义,也是如此.那么在WebGIS中,我们同样也可以按照Arc

(七)WebGIS中栅格、矢量图层设计之栅格、矢量图层的本质

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.何为栅格数据,何为矢量数据? 在GIS中,对于数据格式的分类,我们一般会将其分为栅格数据和矢量数据两种类型.栅格数据是将空间看做离散的像元,由二维数组或者其他数据组织方式来进行表达.矢量数据恰恰相反,它将空间看成是连续的,用要素(点.线.面)来进行表达. 我们把栅格数据和矢量数据的特点归纳如下: (1)栅格数据是离散的,矢量数据是连续的.所以栅格数据多用二维数组(

以项目谈WebGIS中Web制图的设计和实现

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景介绍 一般WebGIS项目中,前端展示数据的流程基本是先做数据入库.服务发布.然后前端调用展示.假设用户没有基本的GIS背景,需要将本地的excel或CSV等文件快速在地图上进行展示,此需求该如何解决? 目前市场上针对解决这种需求的产品已陆续出现,比如mapbox的studio,esri的portal,超图的地图慧以及由超图原项目经理离职后创办的地图无忧等产品.

WebGIS中利用AGS JS+eCharts实现一些数据展示的探索

 文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 eCharts提供了迁徙图.热点图.夜视图等跟地图能够很好的结合起来的数据展示方式.但是如何将eCharts和我们的AGS JS框架以及自身的地图相结合,是一个很值得研究的地方.我所在小组中的一位同事上两周作为主力对eChart和我们目前所使用的AGS JS的结合做了一些研究,取得了不错的进展.我本人对其研究进行了跟进,这里作为二传手,将这些进展以及效果做

超全面的切图规范指南

设计师的切图输出物是是体现一个设计师专业水准的重要标准,同时也是设计师表达自己对设计态度的最有力的语言.合适.精准的切图可以最大限度的还原设计图,起到事半功倍的效果. 如何输出具有全局把控和细节专注的高段位切图,应该是所有设计师一直需要追求的能力. 设计切图的原则 设计切图输出的目的是跟下游的工程师团队协同工作,那么在团队协作过程中,首先应该保证切图输出能够满足工程师设计效果图的高保真还原需求. 其次,切图输出应该尽可能降低工程师的开发工作量,避免因切图输出而导致不必要的工作量. 最后,输出的切

聊聊原生APP切图那些事儿

  如何切图? 了解iphone界面的尺寸 最小的分辨率是320×480,我们把这个尺寸定为基准界面尺寸(baseline),基准尺寸所用的图标定为1倍图(1x). 在实际设计过程中,为了降低设计成本,一般拿设备最高的分辨率作为设计稿的原始尺寸,拿iphone来说就是iphone5或5s的640×1136啦,当然也可以用iphone4或4s的640×960,因为宽度都是640px,他们切图的标准是一样的.显然,以1倍图的基准尺寸(宽320px)为相对的参考依据,宽640px的设计稿,以原始尺寸切

提供预生成图片webgis(切图webgis)的解决方案

问题描述 基于服务器端的地图瓦片形式的webgis,也是现在大多数地图服务网站的技术方式,同样在很多的项目中运用到:做webgis多年,在实际项目中开发出成熟的应用系统,(由于项目的数据是以Tab数据组织的,所以地图切图基于MapXtreme2004来开发)后台利用MapXtreme2004+.netC#开发的地图切图程序.通过切图程序的文件,从第一级开始,逐级按照4分法来完成切割,切割后的数据直接应用在前台发布,客户端含有大量的javascript+Vml来显示:运用在切图程序中的gis平台,

iOS应用开发中矢量图的使用及修改矢量图颜色的方法_IOS

之前捣鼓了点东西,要适配6和Plus,自己做做切图才发现确实有够烦.基于矢量图生成PNG图形的方法也是事后才知道,学习下,希望接下来可以实践.下面进入译文. iOS应用的视觉形式通常是以图形元素驱动的.在设计开发一款应用时,你需要不同规格的应用图标,例如不同尺寸的Default.png图片,同时还需要为UI的实现准备@1x和@2x图形资源.所有这些图形元素都会让你的产品看上去更吸引人,但弊端也是很明显的 - 你需要为每种规格的图形元素单独切图.而随着iPhone 6及Plus的发布,我们又多了一

iOS多线程的初步研究(四、五、六)--NSTimer--NSURLConnection子线程中运行 ---- NSOperation

iOS多线程的初步研究(四)-- NSTimer 理解run loop后,才能彻底理解NSTimer的实现原理,也就是说NSTimer实际上依赖run loop实现的. 先看看NSTimer的两个常用方法: + (NSTimer *)timerWithTimeInterval:(NSTimeInterval)ti target:(id)aTarget selector:(SEL)aSelector userInfo:(id)userInfo repeats:(BOOL)yesOrNo; //生成