zoukankan      html  css  js  c++  java
  • OpenLayers项目分析(四)空间数据的组织与实现

    转自:http://www.openlayers.cn/portal.php?mod=view&aid=10

    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。看看计算两点距离的函数是怎么写的:

    distanceTo: function(point) {
            var distance = 0.0;
            if ( (this.x != null) && (this.y != null) && 
                 (point != null) && (point.x != null) && (point.y != null) ) {             
                 var dx2 = Math.pow(this.x - point.x, 2);
                 var dy2 = Math.pow(this.y - point.y, 2);
                 distance = Math.sqrt( dx2 + dy2 );
            }
            return distance;
        }
      在collection集合对象中,可以存放同一类型的地理对象,也可以放不同的地理对象。定义了一个属性component ,以数组对象的形式存储组成collection对象的“组件”。别的不说了,看一个获取集合大小的函数getLength:
        getLength: function() {
            var length = 0.0;
            for (var i = 0; i < this.components.length; i++) {
                length += this.components[i].getLength();
            }
            return length;
        }
      细心的朋友也许会发现,每一个基类都有一个destroy函数。它是OpenLayers实现的垃圾回收机制,以防止内存泄露,优化性能:
       /* APIMethod: destroy
         * Destroy this geometry.
         */
        destroy: function () {
            this.components.length = 0;
            this.components = null;
        }。
  • 相关阅读:
    css3
    如何去把数据渲染到页面
    js中的正则
    12.4
    react-router HashRouter和BrowserHistory的区别
    react 路由使用react-router-dom
    react 中的 三大重要属性state refs props
    在Vue中如何快速实现小球动画
    模块化 require.js 入门教学(前端必看系列)
    如何把设计稿中px值转化为想要的rem值
  • 原文地址:https://www.cnblogs.com/LCGIS/p/3048324.html
Copyright © 2011-2022 走看看