OpenLayers项目分析(六)数据渲染分析

实际上,OpenLayers的整个表现过程是这样的:通过调用获取数据,然后各种格式的解析器解析数据,在用所谓的渲染器渲染后加到图层上,最后再结合相应的控件表现出来,成为一幅我们看到的“动态”地图。

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

  Renderer类提供了一些虚方法,以供其子类继承,像setExtent、drawFeature、drawGeometry、eraseFeatures、eraseGeometry等。

  Elements继承Renderer,具体实现渲染的类又继承Renderer类。之所以这样设计,是因为不同的矢量格式数据需要共享相应的函数,在Elements这个类中封装一下。这个类的核心是drawGeometry和drawGeometryNode两个函数。其中drawGeometry调用了drawGeometryNode,创建出基本的地理对象。

[代码]js代码:





01

drawGeometry: function(geometry,
style, featureId) {





02

      var className
= geometry.CLASS_NAME;





03

      if ((className
== 
"OpenLayers.Geometry.Collection")
||





04

          (className
== 
"OpenLayers.Geometry.MultiPoint")
||





05

          (className
== 
"OpenLayers.Geometry.MultiLineString")
||





06

          (className
== 
"OpenLayers.Geometry.MultiPolygon"))
{





07

          for (var i
= 0; i < geometry.components.length; i++) {





08

              this.drawGeometry(geometry.components[i],
style, featureId);





09

          }





10

          return;





11

      };





12

      //first
we create the basic node and add it to the root





13

      var nodeType
this.getNodeType(geometry);





14

      var node
this.nodeFactory(geometry.id,
nodeType, geometry);





15

      node._featureId
= featureId;





16

      node._geometryClass
= geometry.CLASS_NAME;





17

      node._style
= style;





18

      this.root.appendChild(node);





19

       





20

      //now
actually draw the node, and style it





21

      this.drawGeometryNode(node,
geometry);





22

  }




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



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

[代码]js代码:





01

drawCircle: function(node,
geometry, radius) {





02

    if(!isNaN(geometry.x)&&
!isNaN(geometry.y)) {





03

        var resolution
this.getResolution();





04

     





05

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





06

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





07

 





08

        var diameter
= radius * 2;





09

         





10

        node.style.width
= diameter;





11

        node.style.height
= diameter;





12

    }





13

}





转载自:https://blog.csdn.net/giser_whu/article/details/45748463

You may also like...