实际上，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); |
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; |
18 |
this.root.appendChild(node); |
20 |
//now actually draw the node, and style it |
21 |
this.drawGeometryNode(node, geometry); |
渲染器的继承关系这样的：
具体实现渲染的方法在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(); |
05 |
node.style.left = (geometry.x /resolution).toFixed() - radius; |
06 |
node.style.top = (geometry.y /resolution).toFixed() - radius; |
08 |
var diameter = radius * 2; |
10 |
node.style.width = diameter; |
11 |
node.style.height = diameter; |
转载自：https://blog.csdn.net/lzkqcc/article/details/81631972
