【转载】OpenLayers项目分析——（六）数据渲染分析|Openlayers - Ge...

【转载】OpenLayers项目分析——（六）数据渲染分析

管理提醒： 本帖被 rchlz 设置为精华(2009-08-15)

（六）数据渲染分析

　 实际上，OpenLayers的整个表现过程是这样的：通过调用获取数据，然后各种格式的解析器解析数据，在用所谓的渲染器渲染后加到图层上，最后再结合相应的控件表现出来，成为一幅我们看到的“动态”地图。
　　这里主要讨论 OpenLayers. Renderer这个类及其子类。
　　Renderer类提供了一些虚方法，以供其子类继承，像 setExtent 、 drawFeature 、 drawGeometry 、 eraseFeatures 、 eraseGeometry 等。
　　 Elements 继承 Renderer，具体实现渲染的类又继承Renderer类。之所以这样设计，是因为不同的矢量格式数据需要共享相应的函数，在 Elements 这个类中封装一下。这个类的核心是 drawGeometry 和 drawGeometryNode 两个函数。其中 drawGeometry 调用了 drawGeometryNode ，创建出基本的地理对象。

    drawGeometry: function(geometry, style, featureId) { 
        var className = geometry.CLASS_NAME; 
        if ((className == "OpenLayers.Geometry.Collection") || 
            (className == "OpenLayers.Geometry.MultiPoint") || 
            (className == "OpenLayers.Geometry.MultiLineString") || 
            (className == "OpenLayers.Geometry.MultiPolygon")) { 
            for (var i = 0; i < geometry.components.length; i++) { 
                this.drawGeometry(geometry.components, style, featureId); 
            } 
            return; 
        }; 

        //first we create the basic node and add it to the root 
        var nodeType = this.getNodeType(geometry); 
        var node = this.nodeFactory(geometry.id, nodeType, geometry); 
        node._featureId = featureId; 
        node._geometryClass = geometry.CLASS_NAME; 
        node._style = style; 
        this.root.appendChild(node); 
 
        //now actually draw the node, and style it 
         this.drawGeometryNode(node, geometry); 
    }

　　渲染器的继承关系这样的：

　　具体实现渲染的方法在 OpenLayers. Renderer.SVG 和 OpenLayers. Renderer.VML两个类中实现的，就是实现 Elements 提供的虚方法，比如 drawPoint 、 drawCircle 、 drawLineString 、 drawLinearRing 、 drawLine 、 drawPolygon 、 drawSurface 等 。以 drawCircle 为例看看具体的实现过程：

    drawCircle: function(node, geometry, radius) { 
        if(!isNaN(geometry.x)&& !isNaN(geometry.y)) { 
            var resolution = this.getResolution();      

            node.style.left = (geometry.x /resolution).toFixed() - radius; 
            node.style.top = (geometry.y /resolution).toFixed() - radius; 

            var diameter = radius * 2; 

            node.style.width = diameter; 
            node.style.height = diameter; 
        } 
    }

转载自：http://www./html/24/10624-17492.html