(七)WebGIS中栅格、矢量图层设计之栅格、矢量图层的本质
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/。
1.何为栅格数据,何为矢量数据?
在GIS中,对于数据格式的分类,我们一般会将其分为栅格数据和矢量数据两种类型。栅格数据是将空间看做离散的像元,由二维数组或者其他数据组织方式来进行表达。矢量数据恰恰相反,它将空间看成是连续的,用要素(点、线、面)来进行表达。
我们把栅格数据和矢量数据的特点归纳如下:
(1)栅格数据是离散的,矢量数据是连续的。所以栅格数据多用二维数组(行、列)的方式组织。而矢量数据可以理解为一种向量,它用平面坐标(X、Y)的有序几何来组织。
(2)栅格数据的最小单位是像素,矢量数据的最小单位是要素。
(3)栅格数据的属性由像素的像素值来表示,矢量数据的属性由要素的属性来表示。
(4)拓扑关系是基于矢量数据的。
以下分别是一张栅格数据图层和一张由点、线、面组成的矢量数据图层组的截图:
2.由理论引发的推论
首先我同样先提出几个问题:
(1)WebGIS中,地形图本身是栅格数据还是矢量数据?
(2)用户需要与图层交互时,比如需要图层响应点击事件,返回点击处的属性,此时图层是用栅格的数据方式显示,还是矢量数据方式显示?
(3)需要判断两个图层的拓扑关系,比如判断房屋图层中哪些房屋落在了绿地图层中的绿地里,此时是用栅格图层还是矢量图层?
等等。
先回答第一个问题,我们在前面反复讲解了瓦片的获取,并介绍了如何在前端最后拼接出一个完整的地形图,显而易见,这里的地形图也就是由PNG或其他格式组成的一张图片而已。图片本身是由离散的像素在二维方向上组成的,而这正是栅格数据的组织方式,所以WebGIS中,我们得到的地形图可以理解为一种栅格图层。
第二个问题,鼠标点击到图层上的某处,需要返回此时点击处的属性。在第一节中我们已经提到,栅格数据是由像素值来表示属性的,所以它是不能满足用户需求的。这里,我们只能用矢量图层来完成这个需求。那么怎么完成呢?一般来说,有两种方式,分别是前台实现需求和后台实现需求。具体实现原理在后面的矢量图层设计时会给出。
第三个问题,同样也只能选择矢量图层来完成需求。拓扑关系的判断是只有矢量图层可以进行的。
通过上面三个问题,我们可以归纳如下两个推论:
(1)WebGIS中,地形图等底图,是由栅格图层组成的。他们本身与用户无法进行复杂的前端交互。
(2)矢量图层可以满足用户的多种需求,在与要素属性、拓扑关系等有关的需求里,它是不二之选。
3.矢量图层在WebGIS中的表示方式
我们已经知道了WebGIS中的栅格图层就是我们的地图图片,那么WebGIS中的矢量图层又是什么呢?
我们用ArcMap打开一个shape格式的面图层(矢量图层)时,显示框里就会绘出很多个面来,这些面我们可以选择用不同的颜色来表示,我们的鼠标点击到那些面时,这些面也会做出相应的反应。同样,我们在WebGIS中也希望达到相同的效果,那么该如何实现?
首先,能够响应鼠标点击事件,用继承了UIComponent的类是最易实现的。
其次,可以用不同的颜色来表示,并可以绘出不同的形状。继承了UIComponent的类,本身均有graphics属性,在graphics上便可以随意的画出想画的颜色和形状。
于是,结论基本已经可以得出了,WebGIS中矢量图层是用继承了UIComponent的类来表示的。
但是,这里我还是要告诉大家,这个结论其实也只对了一半。真正的结论是:用继承于UIComponent的类来表示要素,用将要素作为children的Canvas来表示矢量图层。
这里,我再给大家提一个问题:
UIComponent中,我们如果要画出要素的形状,就必须首先得到要素的坐标集合,而要素的坐标集合我们是如何得到的呢?这个问题同样我会在后面专门花一个章节来进行讲解。
4.总结
这一章节里,我们讲了WebGIS中的栅格图层和矢量图层的本质,从下一章开始,我们便要真正的开始探索如何来设计和实现栅格图层以及矢量图层了。下一章:栅格图层的设计和优化,敬请关注。
我们以一张WebGIS中,栅格数据和矢量数据同时存在的地图来作为本章的结束:
写几句话送给我一个好朋友:
我们因为不同的原因,都有过绝望的时刻,想过彻底的逃离,无比的期望时间能快点翻到下一页,翻到我们成熟了甚至老去了。我们知道这些事情都会是噩梦,你或许很久很久都无法摆脱,可是经历过这些的,你的几个朋友,到最后都慢慢的好起来了,生活着工作着,事情虽然不好,可是一定没有你想的那么糟。My brother,you have many beautiful things,they will never leave you。
-----欢迎转载,但保留版权,请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/
如果您觉得本文确实帮助了您,可以微信扫一扫,进行小额的打赏和鼓励,谢谢 ^_^
(七)WebGIS中栅格、矢量图层设计之栅格、矢量图层的本质的更多相关文章
- (十五)WebGIS中平移功能的设计和实现
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 这一章我们将详细讲解WebGIS工具栏中另一个基础工具——平 ...
- 以项目谈WebGIS中Web制图的设计和实现
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景介绍 一般WebGIS项目中,前端展示数据的流程基本是先做数据入 ...
- (十四)WebGIS中地图放大缩小的设计和实现
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在上一章中,我们给出了整个工具栏设计的核心,使用命令模式,并 ...
- 从底层谈WebGIS 原理设计与实现(六):WebGIS中地图瓦片在Canvas上的拼接显示原理
从底层谈WebGIS 原理设计与实现(六):WebGIS中地图瓦片在Canvas上的拼接显示原理 作者:naaoveGI… 文章来源:naaoveGIS 点击数:1145 更新时间: ...
- (十六)WebGIS中偏移补偿量引发的问题之探讨
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在上一章里讲解地图平移功能的实现时,我在最后提出了两个问题: ...
- (六)WebGIS中地图瓦片在Canvas上的拼接显示原理
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在之前的五个章节中,我们在第一章节里介绍了WebGIS的基本 ...
- (十二) WebGIS中矢量图层的设计
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在前几章中我们已经了解了什么是矢量查询.屏幕坐标与地理坐标之 ...
- (八)WebGIS中栅格图层的设计
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1. 前言 我们在上一章里了解到WebGIS中栅格图层的本质—— ...
- (二十)WebGIS中图层树功能的设计和实现
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在GIS的桌面工具中,比如arcgis desktop或者S ...
随机推荐
- Unity自动寻路Navmesh之入门
实例 我们要实现一个功能:点击场景中的一个位置,角色可以自动寻路过去.角色会绕过各种复杂的障碍,找到一条理论上”最短路径“. 步骤 1.创建地形 2.添加角色 3.创建多个障碍物,尽量摆的复杂一点,来 ...
- FastReport.Net 常用功能总汇
一.常用控件 文本框:输入文字或表达式 表格:设置表格的行列数,输入数字或表达式 子报表:放置子报表后,系统会自动增加一个页面,你可以在此页面上设计需要的报表.系统在打印处理时,先按主报表打印,当碰到 ...
- solr查询语句示例
url示例:sort=id+desc&&fq=date_time:[20081001 TO 20091031]&wt=json&json.nl=map&q=st ...
- 最后一周psp
团队项目PSP 一:表格 C类型 C内容 S开始时间 E结束时间 I时间间隔 T净时间(mins) 预计花费时间(mins) 讨论 讨论用户界面 10:20 11:45 25 40 80 分析 ...
- rails4.0 session activerecord
Active Record Session Store A session store backed by an Active Record class. A default class is pro ...
- 协议分析 - DHCP协议解码详解
协议分析 - DHCP协议解码详解 [DHCP协议简介] DHCP,全称是 Dynamic Host Configuration Protocol﹐中文名为动态主机配置协议,它的前身是 ...
- Zero Copy I: User-Mode Perspective
By now almost everyone has heard of so-called zero-copy functionality under Linux, but I often run i ...
- cache4j轻量级java内存缓存框架,实现FIFO、LRU、TwoQueues缓存模型
简介 cache4j是一款轻量级java内存缓存框架,实现FIFO.LRU.TwoQueues缓存模型,使用非常方便. cache4j为java开发者提供一种更加轻便的内存缓存方案,杀鸡焉用EhCac ...
- Laravel 5.3 auth中间件底层实现详解
1. 注册认证中间件, 在文件 app/Http/Kernel.php 内完成: protected $routeMiddleware = [ 'auth' => \Illuminate\Aut ...
- c#字段
1.C#中是不允许用new操作符创建String对象的,编译器会报错. 2.实例字段:使用new对class创建对象直接赋初始值,不适用于struct slass Rect { public int ...