（七）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/

                                                                 若是您以为本文确实帮助了您，能够微信扫一扫，进行小额的打赏和鼓励，谢谢 ^_^