OpenLayers项目分析——(七)数据渲染分析

 实际上,OpenLayers的整个表现过程是这样的:通过调用获取数据,然后各种格式的解析器解析数据,在用所谓的渲染器渲染后加到图层上,最后再结合相应的控件表现出来,成为一幅我们看到的“动态”地图<?xml:namespace prefix = o ns = “urn:schemas-microsoft-com:office:office” />

  这里主要讨论OpenLayers. Renderer这个类及其子类。

  Renderer类提供了一些虚方法,以供其子类继承,像setExtentdrawFeaturedrawGeometryeraseFeatureseraseGeometry等。

  Elements继承Renderer,具体实现渲染的类又继承Renderer类。之所以这样设计,是因为不同的矢量格式数据需要共享相应的函数,在Elements这个类中封装一下。这个类的核心是drawGeometrydrawGeometryNode两个函数。其中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[i], 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);

    }

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

10624_200808291125481.jpg

  具体实现渲染的方法在OpenLayers. Renderer.SVGOpenLayers. Renderer.VML两个类中实现的,就是实现Elements提供的虚方法,比如drawPointdrawCircledrawLineStringdrawLinearRingdrawLinedrawPolygondrawSurface。以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;

        }

    } 

转载自:https://blog.csdn.net/king2232/article/details/3337031

You may also like...