WebGIS中矢量切图的初步研究

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-10-17 23:38:36

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

网页设计中的切图

一般的网站制作步骤大体上为:设计效果图–>切图+制作静态html模板–>嵌套至CMS,其中,切图虽然是很简单的一个步骤,但其中也有很多技巧,以下是我个人总结出来的几点. 总体上,把握一个原则,能用css写的,坚决不要用图片. 经验告诉我们,首页图片很多的网站打开会很慢,一是因为图片多,需要下载的文件体积就增大,二是每一个图片下载都会对服务器有一个请求,增大了浏览器与服 务端的交互次数,如果能把纯色的部分用css来写,而不因为省事直接切图,就会极大提高网站的运行效率,我最早开始学习制作网站时,就

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

1.前言 在前几章中我们已经了解了什么是矢量查询.屏幕坐标与地理坐标之前的转换以及要素的设计,有了这些知识,这一章里我们终于可以进行矢量图层的设计了. 在Catalog里创建一个FeatureClass时,我们能够选择是创建点图层或者线图层或者面图层等.所谓点图层,即该图层中的要素只能是点,其他几个图层顾名思义,也是如此.那么在WebGIS中,我们同样也可以按照ArcGIS里的这个设计思路来设计我们的矢量图层,虽然这个方法是肯定可行的,但是在实际的业务需求中,如果按照这种点图层等来严格控制的话,

网页设计中ps切图注意问题

最近工作中老是用到ps切图,然后高手说我切图做的不好,在此去网上找了点材料汇集起来,作为参考: 网页设计的切图,最好先用PS做出效果图,然后进行切图.   一.切图的原则:  1.图切的大小越小越好. 2.图切的数量越少越好. 那对于一整张图来说,同时达到这两个原则是相互矛盾的,所以一个网页差不多切成20-30个图就可以了,这样网页的加载速度是不会受影响的.  二.切图的技巧:  1.一行一行的切图.  2.背景的切成小条.  3.不能分开的不分好了,选行的时候要注意怎么样合理.  4.切图的时

Mac 如何导出ipa文件中Assets.car包中的切图

在之前 获取 AppStore 中 应用 的 IPA 包文件(Mac OS 13+)中获取到应用的 IPA 包,可以取出应用的部分图片(如 Logo),如果项目工程中把图片添加到 Assets.xcassets 中的话,只能在包中看到 Assets.car 文件,这时需要把里面的图片资源取出来. 在 Github 上 cartool是专门解决这个问题的开源工具,下载,使用 Xcode 打开工程,添加如下配置: 运行工程,就可以看到控制台有输出 Log 在指定文件中就会有解压过的图片资源. 原文地

(七)WebGIS中的栅格图层和矢量图层的显示原理

1.何为栅格数据,何为矢量数据? 在GIS中,对于数据格式的分类,我们一般会将其分为栅格数据和矢量数据两种类型.栅格数据是将空间看做离散的像元,由二维数组或者其他数据组织方式来进行表达.矢量数据恰恰相反,它将空间看成是连续的,用要素(点.线.面)来进行表达. 我们把栅格数据和矢量数据的特点归纳如下: (1)栅格数据是离散的,矢量数据是连续的.所以栅格数据多用二维数组(行.列)的方式组织.而矢量数据可以理解为一种向量,它用平面坐标(X.Y)的有序几何来组织. (2)栅格数据的最小单位是像素,矢量数

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

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

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

1.背景 eChart提供了迁徙图.热点图.夜视图等跟地图能够很好的结合起来的数据展示方式.但是如何将eChart和我们的AGS JS框架以及自身的地图相结合,是一个很值得研究的地方.我所在小组中的一位同事上两周作为主力对eChart和我们目前所使用的AGS JS的结合做了一些研究,取得了不错的进展.我本人对其研究进行了跟进,这里作为二传手,将这些进展以及效果做一个小的总结,同时也利于我对他研究的进一步学习.感谢我这位优秀的同事. 2.必须解决的问题——坐标问题 series中的geoCoord

页面制作学习笔记:D2.Photoshop切图

一.什么是切图? 切图就是从网页设计稿中切出网页素材,比如一些小的按钮.小的图片.页面的LOGO.网页的背景图片等. 然后就是页面编码,引入图片资源 在HTML里通过 img 标签引入图片资源 <img src="images/avatar.jpg" alt="头像"> 在CSS里面通过background属性引入图片资源 .icon { background-image:url(../images/avtar.jpg); background-posi

【学习笔记】前端开发调试工具与PS切图技巧

[学习过程遇到疑问和延伸阅读] 1.Sublime Text 安装插件的方式 一开始以为直接安装.原来在安装丰富的插件之前,Sublime Text需要通过Package Control这个插件来管理.作为基础插件来管理其他的插件.安装成功之后在菜单栏Preferences下才会有Package Control. "Sublime Text 2 也拥有良好的扩展功能,这就是安装包(Package):通过 Sublime Package Control,安装.升级和卸载 Package 也变得轻松