OpenLayers项目分析(六)数据渲染分析
目录
实际上,OpenLayers的整个表现过程是这样的:通过调用获取数据,然后各种格式的解析器解析数据,在用所谓的渲染器渲染后加到图层上,最后再结合相应的控件表现出来,成为一幅我们看到的“动态”地图。
这里主要讨论OpenLayers. Renderer这个类及其子类。
Renderer类提供了一些虚方法,以供其子类继承,像setExtent、drawFeature、drawGeometry、eraseFeatures、eraseGeometry等。
Elements继承Renderer,具体实现渲染的类又继承Renderer类。之所以这样设计,是因为不同的矢量格式数据需要共享相应的函数,在Elements这个类中封装一下。这个类的核心是drawGeometry和drawGeometryNode两个函数。其中drawGeometry调用了drawGeometryNode,创建出基本的地理对象。
[代码]js代码:
01 |
drawGeometry: function (geometry,
|
02 |
var className
|
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
|
08 |
this .drawGeometry(geometry.components[i],
|
09 |
} |
10 |
return ; |
11 |
}; |
12 |
//first
|
13 |
var nodeType
this .getNodeType(geometry); |
14 |
var node
this .nodeFactory(geometry.id,
|
15 |
node._featureId
|
16 |
node._geometryClass
|
17 |
node._style
|
18 |
this .root.appendChild(node); |
19 |
|
20 |
//now
|
21 |
this .drawGeometryNode(node,
|
22 |
} |
渲染器的继承关系这样的:
具体实现渲染的方法在OpenLayers. Renderer.SVG和OpenLayers. Renderer.VML两个类中实现的,就是实现Elements提供的虚方法,比如drawPoint、drawCircle、drawLineString、drawLinearRing、drawLine、drawPolygon、drawSurface等。以drawCircle为例看看具体的实现过程:
[代码]js代码:
01 |
drawCircle: function (node,
|
02 |
if (!isNaN(geometry.x)&&
|
03 |
var resolution
this .getResolution(); |
04 |
|
05 |
node.style.left
|
06 |
node.style.top
|
07 |
|
08 |
var diameter
|
09 |
|
10 |
node.style.width
|
11 |
node.style.height
|
12 |
} |
13 |
} |
转载自:https://blog.csdn.net/giser_whu/article/details/45748463