文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处: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/

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

                                              

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

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

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在前几章中我们已经了解了什么是矢量查询.屏幕坐标与地理坐标之 ...

  2. 点9图 Android设计中如何切图.9.png

    转载自:http://blog.csdn.net/buaaroid/article/details/51499516 本文主要介绍如何制作 切图.9.png(点9图),另一篇姊妹篇文章Android屏 ...

  3. ArcGIS Server 10中的切图/缓存机制深入【转】

    http://blog.newnaw.com/?p=789 两年前我写过一篇关于ArcGIS地图切图/缓存原理的文章,<ArcGIS Server的切图原理深入>,里面以tiling sc ...

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

    在之前 获取 AppStore 中 应用 的 IPA 包文件(Mac OS 13+)中获取到应用的 IPA 包,可以取出应用的部分图片(如 Logo),如果项目工程中把图片添加到 Assets.xca ...

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

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.何为栅格数据,何为矢量数据? 在GIS中,对于数据格式的分类,我们 ...

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

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景介绍 一般WebGIS项目中,前端展示数据的流程基本是先做数据入 ...

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

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 eChart提供了迁徙图.热点图.夜视图等跟地图能够很好的结 ...

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

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 eCharts提供了迁徙图.热点图.夜视图等跟地图能够很好的 ...

  9. iOS - 如何切图适配各种机型

    关于iPhone6/6+适配问题一直有争议,今天小编专门为大家整理了相关的有效方案,希望对大伙儿有帮助! 移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选 ...

随机推荐

  1. STL之priority_queue

    下面以 long long 型队列介绍: Q.empty() // 判断队列是否为空 返回ture表示空 返回false表示空 bool Q.top() // 返回顶端元素的值 元素还在队列里 lon ...

  2. SQL Server中CROSS APPLY和OUTER APPLY的应用详解

    SQL Server数据库操作中,在2005以上的版本新增加了一个APPLY表运算符的功能.新增的APPLY表运算符把右表表达式应用到左表表达式中的每一行.它不像JOIN那样先计算那个表表达式都可以, ...

  3. Python读写文件

    Python读写文件1.open使用open打开文件后一定要记得调用文件对象的close()方法.比如可以用try/finally语句来确保最后能关闭文件. file_object = open('t ...

  4. shell条件测试test

    shell条件测试可以通过以下两种方式: test   参数    测试内容 [ 参数  测试内容 ] 一.测试文件类型: test  -e   文件名          (测试文件是否存在) [ - ...

  5. 利用SSH Filesystem实现远程文件系统

         远程文件系统的访问有很多种不同的实现方式,一些常见的连接方式比其它特定情况下的更有用.最著名的一个例子就是微软的通用互联网文件系统(CIFS),它可以容许微软Windows"映射网 ...

  6. .NET面试题系列[0] - 写在前面

    .NET面试题系列目录 .NET面试题系列[1] - .NET框架基础知识(1) .NET面试题系列[2] - .NET框架基础知识(2) .NET面试题系列[3] - C# 基础知识(1) .NET ...

  7. .NET面试题系列[14] - LINQ to SQL与IQueryable

    .NET面试题系列目录 名言警句 "理解IQueryable的最简单方式就是,把它看作一个查询,在执行的时候,将会生成结果序列." - Jon Skeet LINQ to Obje ...

  8. 一步步学习javascript基础篇(3):Object、Function等引用类型

    我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...

  9. Lesson 13 The Greenwood Boys

    Text The Greenwood Boys are group of pop singers. At present, they are visiting all parts of the cou ...

  10. MySQL5.7 新增配置

    1.log_timestamps 在5.7.2以后的版本中增加一个单独控制error log , general log,slow log的记录的时间,默认是UTC,需要配置成SYSTEM(本地时间) ...