【转】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代码：

view sourceprint?

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

}