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/
如果您觉得本文确实帮助了您,可以微信扫一扫,进行小额的打赏和鼓励,谢谢 ^_^
WebGIS中矢量切图的初步研究的更多相关文章
- (十二) WebGIS中矢量图层的设计
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在前几章中我们已经了解了什么是矢量查询.屏幕坐标与地理坐标之 ...
- 点9图 Android设计中如何切图.9.png
转载自:http://blog.csdn.net/buaaroid/article/details/51499516 本文主要介绍如何制作 切图.9.png(点9图),另一篇姊妹篇文章Android屏 ...
- ArcGIS Server 10中的切图/缓存机制深入【转】
http://blog.newnaw.com/?p=789 两年前我写过一篇关于ArcGIS地图切图/缓存原理的文章,<ArcGIS Server的切图原理深入>,里面以tiling sc ...
- Mac 如何导出ipa文件中Assets.car包中的切图
在之前 获取 AppStore 中 应用 的 IPA 包文件(Mac OS 13+)中获取到应用的 IPA 包,可以取出应用的部分图片(如 Logo),如果项目工程中把图片添加到 Assets.xca ...
- (七)WebGIS中栅格、矢量图层设计之栅格、矢量图层的本质
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.何为栅格数据,何为矢量数据? 在GIS中,对于数据格式的分类,我们 ...
- 以项目谈WebGIS中Web制图的设计和实现
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景介绍 一般WebGIS项目中,前端展示数据的流程基本是先做数据入 ...
- WebGIS中利用AGS JS+eChart实现一些数据展示的探索
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 eChart提供了迁徙图.热点图.夜视图等跟地图能够很好的结 ...
- WebGIS中利用AGS JS+eCharts实现一些数据展示的探索
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 eCharts提供了迁徙图.热点图.夜视图等跟地图能够很好的 ...
- iOS - 如何切图适配各种机型
关于iPhone6/6+适配问题一直有争议,今天小编专门为大家整理了相关的有效方案,希望对大伙儿有帮助! 移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选 ...
随机推荐
- python 之 Django 基础篇
1,Django流程介绍 MTV模式 著名的MVC模式:所谓MVC就是把web应用分为模型(M),控制器(C),视图(V)三层:他们之间以一种插件似的,松耦合的方式连接在一起. 模型负责业务对象与数据 ...
- 【转】【10g SQL新特性】q-quote使用
转自:http://blog.chinaunix.net/uid-7655508-id-3684042.html 转发只为留存学习 在Oracle中,字符串的字面量如果含有单引号,那么必须转义,而且转 ...
- js通过注册表找到本地软件安装路径并且执行
场景:用js执行本地的安装软件,如果不存在就执行安装 操作步骤: 1.前台js代码 <script type="text/javascript"> function e ...
- angular学习之路(一)
angular是什么? angular是一个用于设计动态web应用的结构框架! 它不仅仅是一个JavaScript框架,他的核心其实是对HTML标签的增强. 何为HTML标签的增强?其实就是使用标签完 ...
- c# GridControl怎么换行
百度找到的答案 1.ColumnEdit 增加 MemoEdit2.AppearanceCell-TextOptions- WordWrap3.OptionsView RowAutoHeight
- setprecision、fixed、showpoint的用法总结
首先要加头文件:iomanip 一:setprecision 作用:控制输出流显示浮点数的数字个数,setprecision(n)就是输出的n个数,会有四舍五入. 比如:double s=20.784 ...
- PowerDesigner PDM生成sql脚本时:表的名称和表里面的字段名称都有引号解决。。。
PowerDesigner PDM生成sql脚本时:表的名称和表里面的字段名称都有引号解决... 1.当你的PowerDesigner 是新安装时,你得设置可能就会出现一些问题,在这里比如:PDM生成 ...
- Android安全开发之安全使用HTTPS
Android安全开发之安全使用HTTPS 1.HTTPS简介 阿里聚安全的应用漏洞扫描器中有证书弱校验.主机名弱校验.webview未校验证书的检测项,这些检测项是针对APP采用HTTPS通信时容易 ...
- Python黑帽编程2.4 流程控制
Python黑帽编程2.4 流程控制 本节要介绍的是Python编程中和流程控制有关的关键字和相关内容. 2.4.1 if …..else 先上一段代码: #!/usr/bin/python # - ...
- Intro to CSS 3D transforms
原文地址:Intro to CSS 3D transforms,本文只是翻译了其中的一部分,省去了作者写文章的原因浏览器兼容部分(已经过时) Perspective 元素需要设置需要设置perspec ...