OpenLayers项目分析(四)空间数据的组织与实现

左手的ㄟ右手 2022-08-08 11:52 200阅读 0赞

GIS，核心是什么？数据？平台？服务？　　  
　　空间数据的特征、表达方式？  
　　地理数据的模型（结构）？  
　　在OpenLayers空间数据的实现主要存在OpenLayers. Geometry类及其子类中。我们先看下面的两个图片，表现了这些类的继承关系。从图上可以清楚的看出MultiPoint、Polygon和MultiLineString 这三个类实现了多重继承，即直接继承于Geometry类，又继承于Collection类（为什么要这样实现？）。  
　　OpenLyers对于Geometry对象的组织是这样的，其实最基础的就是点，然后MultiPoint由点构成，继承自Openlayers.Geometry.Collection,而LinearRing,LineString均由Point构成，  
Polygon由OpenLayers.Geometry.LinearRing构成。OpenLyers在解析数据时候，将所有的面、线包含的点全部都对象化为Openlayers.Geometry.Point。有人测试这里面存在问题：解析矢量数据慢，甚至在点数多的情况下，会使浏览器“崩溃”掉。想想是有道理的：OpenLyers在解析数据时候，将所有的面、线包含的点全部都对象化为点对象t，并首先将所有的对象读取到内存，得到一个Feature的集合，然后将这个集合提交给渲染器进行渲染。这样渲染起来当然慢了。至于为什么要这样，可能是OpenLayers项目本身在标准上，在框架结构上做的比较好，更细部的东西还得优化呀。可话又说回来，OpenLayers作为一个优秀的开源JS框架，学习借鉴的意义要比应用的意义大吧。　  
  
  
　　下面以Point和Collection为例来说明其内部实现过程，先看Point。  
　　我们知道一个点就是一个坐标对(x,y)嘛，当然它得有两个属性x，y。在point类里，提供了六个成员函数，分别是clone、distanceTo、equals、move、rotate和resize。看看计算两点距离的函数是怎么写的：

### \[代码\]js代码： ###

[view source][]

[print][] [?][Link 1]

<table style="word-wrap:break-word; empty-cells:show; border-collapse:collapse!important; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-size:10pt!important; min-height:inherit!important"> 
 <tbody style="word-wrap:break-word; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-size:10pt!important; min-height:inherit!important"> 
  <tr style="word-wrap:break-word; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-size:10pt!important; min-height:inherit!important"> 
   <td style="word-wrap:break-word; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:top!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:3em!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:10pt!important; min-height:inherit!important; color:rgb(175,175,175)!important"> <code style="word-wrap:break-word; margin:0px!important; padding:0px 0.3em 0px 0px!important; border:0px!important; outline:0px!important; text-align:right!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:2.7em!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:10pt!important; min-height:inherit!important; display:block!important">04</code></td> 
   <td style="word-wrap:break-word; margin:0px!important; padding:0px 0px 0px 0.5em!important; border-width:0px 0px 0px 3px!important; border-left-style:solid!important; border-left-color:rgb(108,226,108)!important; outline:0px!important; float:none!important; vertical-align:top!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:10pt!important; min-height:inherit!important"> <code style="word-wrap:break-word; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:10pt!important; min-height:inherit!important">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="word-wrap:break-word; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:10pt!important; min-height:inherit!important">(point !=&nbsp;</code><code style="word-wrap:break-word; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-weight:bold!important; font-size:10pt!important; min-height:inherit!important; color:rgb(0,102,153)!important">null</code><code style="word-wrap:break-word; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:10pt!important; min-height:inherit!important">) &amp;&amp; (point.x !=&nbsp;</code><code style="word-wrap:break-word; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-weight:bold!important; font-size:10pt!important; min-height:inherit!important; color:rgb(0,102,153)!important">null</code><code style="word-wrap:break-word; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:10pt!important; min-height:inherit!important">) &amp;&amp; (point.y !=&nbsp;</code><code style="word-wrap:break-word; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-weight:bold!important; font-size:10pt!important; min-height:inherit!important; color:rgb(0,102,153)!important">null</code><code style="word-wrap:break-word; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:10pt!important; min-height:inherit!important">) ) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style="word-wrap:break-word; empty-cells:show; border-collapse:collapse!important; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-size:10pt!important; min-height:inherit!important"> 
 <tbody style="word-wrap:break-word; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-size:10pt!important; min-height:inherit!important"> 
  <tr style="word-wrap:break-word; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-size:10pt!important; min-height:inherit!important"> 
   <td style="word-wrap:break-word; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:top!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:3em!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:10pt!important; min-height:inherit!important; color:rgb(175,175,175)!important"> <code style="word-wrap:break-word; margin:0px!important; padding:0px 0.3em 0px 0px!important; border:0px!important; outline:0px!important; text-align:right!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:2.7em!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:10pt!important; min-height:inherit!important; display:block!important">14</code></td> 
   <td style="word-wrap:break-word; margin:0px!important; padding:0px 0px 0px 0.5em!important; border-width:0px 0px 0px 3px!important; border-left-style:solid!important; border-left-color:rgb(108,226,108)!important; outline:0px!important; float:none!important; vertical-align:top!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:10pt!important; min-height:inherit!important"> <code style="word-wrap:break-word; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:10pt!important; min-height:inherit!important">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="word-wrap:break-word; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-weight:bold!important; font-size:10pt!important; min-height:inherit!important; color:rgb(0,102,153)!important">for</code>&nbsp;<code style="word-wrap:break-word; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:10pt!important; min-height:inherit!important">(</code><code style="word-wrap:break-word; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-weight:bold!important; font-size:10pt!important; min-height:inherit!important; color:rgb(0,102,153)!important">var</code>&nbsp;<code style="word-wrap:break-word; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:10pt!important; min-height:inherit!important">i = 0; i &lt;&nbsp;</code><code style="word-wrap:break-word; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-weight:bold!important; font-size:10pt!important; min-height:inherit!important; color:rgb(0,102,153)!important">this</code><code style="word-wrap:break-word; margin:0px!important; padding:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:10pt!important; min-height:inherit!important">.components.length; i++) { </code></td> 
  </tr> 
 </tbody> 
</table>

[view source]: http://www.openlayers.cn/#viewSource
[print]: http://www.openlayers.cn/#printSource
[Link 1]: http://www.openlayers.cn/#about