OpenLayers技术研究参考文档Word文件下载.docx
《OpenLayers技术研究参考文档Word文件下载.docx》由会员分享，可在线阅读，更多相关《OpenLayers技术研究参考文档Word文件下载.docx（31页珍藏版）》请在冰豆网上搜索。
5;
//x-axis
coodinate
in
map
units
lat
40;
//y-axis
coordinate
zoom
//number
of
levels
map,
layer;
//声明变量map、layer；
等同于
null;
layer
new
OpenLayers.Map（'
map'
）;
//实例化一个地图类OpenLayers.Map
OpenLayers.Layer.WMS（
"
OpenLayers
WMS"
{layers:
'
basic'
}
//以WMS的格式实例化图层类OpenLayers.Layer
map.addLayer（layer）;
map.zoomToExtent（newOpenLayers.Bounds（-3.922119,44.335327,
4.866943,49.553833））;
//在Map对象上加载Layer对象，并用map.zoomToExtent函数使地图合适地显示 map.addLayer（new
OpenLayers.Layer.GML（"
GML"
gml/polygon.xml"
））;
//再在刚加载的WMS文件上，加载一GML文件
剩下的工作就是，加上一些控件OpenLayers.Control之类的东西，比如LayerSwitcher等。
它们会在地图浏览的“窗口”上增加一些工具栏或是“按钮”，增加互动性和功能性。
当然，Openlayers中的东西远不止这些，至于它的框架分析、APIs实现机制，会在后续文章中说出。
写这个的过程，也是一个学习的过程，其中难免有不妥之处，热烈欢迎大家批评指正，相互交流。
（二）源代码总体结构分析
通过前面的项目介绍，我们大概已经知道Openlayers是什么，能够做什么，有什么意义。
接下来我们分析它怎么样，以及怎样实现的等问题。
这个图是从它的文档上截取的，旨在从感官上认识一下OpenLayers的类。
下面分别介绍（文档中的类是按字母顺序排列的，也按这个顺序说吧）：
我们看到在类的顶层“高高在上”的是OpenLayers，它为整个项目实现提供名称空间（JavaScript语言没有名称空间一说，但是它确实有自己的机制实现类似的功能，后面会说明），它直接拥有一常量
VERSION_NUMBER，以标识版本。
Ajax：
顾名思义，用于实现Ajax功能，只是OpenLayers的开发者们把它单独写到一个类里了，其中用到了Prototype.js框架里的一些东西。
同时，设计的时候也考虑了跨浏览器的问题。
BaseTypes：
这里定制了OpenLayers中用到的string，number
和
function。
比如，OpenLayers.
String.
startsWith，用于测试一个字符串是否一以另一个字符串开头；
OpenLayers.
Number.
limitSigDigs，用于限制整数的有效数位；
Function.bind，用于把某一函数绑定于对象等等。
Console：
OpenLayers.Console，此名称空间用于调试和把错误等输出到“控制台”上，需要结合使用../Firebug/firebug.js。
Control：
我们通常所说的控件类，它提供各种各样的控件，比如上节中说的图层开关LayerSwitcher，编辑工具条EditingToolbar等等。
加载控件的例子：
class
{
controls:
[]
}）;
map.addControl（new
OpenLayers.Control.PanZoomBar（））;
OpenLayers.Control.MouseToolbar（））;
Events：
用于实现OpenLayers的事件机制。
具体来说，OpenLayers中的事件分为两种，一种是浏览器事件，例如mouseup,mousedown之类的；
另外一种是自定义的，如addLayer之类的。
OpenLayers中的事件机制是非常值得我们学习的，后面将具体讨论。
Feature：
我们知道：
Feature是geography
和attributes的集合。
在OpenLayers中，特别地OpenLayers.Feature
类由一个Feature和一个lonlat组成。
OpenLayers.Feature.WFS与OpenLayers.Feature.Vector继承于它。
Format：
此类用于读／写各种格式的数据，它的子类都分别创建了各个格式的解析器。
这些格式有：
Geometry：
怎么翻译呢，几何？
是对地理对象的描述。
它的子类有Collection、Curve、LinearRing、LineString、MultiLineString、MultiPoint、MultiPolygon、Point、Polygon、Rectangle、Surface，正是这些类的实例，构成了我们看到的地图。
需要说明的是，Surface
类暂时还没有实现。
Handler：
这个类用于处理序列事件，可被激活和取消。
同时，它也有命名类似于浏览器事件的方法。
当一个handler
被激活，处理事件的方法就会被注册到浏览器监听器listener
，以响应相应的事件；
当一个handler被取消，这些方法在事件监听器中也会相应的被取消注册。
Handler通过控件control被创建，而control通过icon表现。
Icon：
在计算机屏幕上以图标的形式呈现，有url、尺寸size和位置position３个属性。
一般情况，它与
OpenLayers.Marker结合应用，表现为一个Marker。
Layer：
图层。
Map：
网业中动态地图。
它就像容器，可向里面添加图层Layer和控件Control。
实际上，单个Map是毫无意义的，正是Layer和Control成就了它。
Marker：
它的实例是OpenLayers.LonLat
和OpenLayers.Icon的集合。
通俗一点儿说，Icon附上一定的经纬度就是Marker。
它们的组合关系是：
Popup：
地图上一个小巧的层，实现地图“开关”功能。
使用例子：
Class
OpenLayers.Popup（"
chicken"
OpenLayers.LonLat（5,40）,
OpenLayers.Size（200,200）,
example
popup"
true）;
map.addPopup（popup）;
Renderer：
渲染类。
在OpenLayers中，渲染功能是作为矢量图层的一个属性存在的，我们称之为渲染器，矢量图层就是通过这个渲染器提供的方法将矢量数据显示出来。
以SVG和VML为例，继承关系是这样的：
至于OpenLayers.
Renderer.
Elements为什么要存在，以及它的渲染机制，后面会说。
Tile：
设计这个类用于指明单个“瓦片”Tile，或者更小的分辨率。
Tiles存储它们自身的信息，比如url和size等。
它的类继承关系如下：
Util：
“跑龙套”的类。
写到这里，可以看到OpenLayers
的类缠绕的挺麻烦的，接下来的文章将从代码部分分析更细部的东西。
（三）BaseTypes
：
定义底层类与定制JS内置类
先说基类型BaseTypes下，OpenLyers构建的“自己”的类。
它们分别是：
OpenLayers.LonLat、OpenLayers.Pixel、OpenLayers.Size、OpenLayers.Element、OpenLayers.Bounds和OpenLayers.Class。
下面分别介绍：
OpenLayers.
LonLat：
经纬度类，其实例为地图提供一经度、纬度对，即位置。
有两个属性lon（x-axis
）和lat（y-axis
）。
这里说明一下，怎么经纬度又与x轴坐标、y轴坐标纠缠在一起？
是这样：
当地图是在地理坐标投影下，它就是经纬度；
不然就是地图上的x／y轴坐标。
除构造函数外，实现了五个函数：
toShortString:
function（） 把坐标转换为字符串；
clone:
function（） 复制一个LonLat对象；
Add:
function（lon,lat） 改变现有地图的位置；
return
OpenLayers.LonLat（this.lon
+
lon,
this.lat
lat）;
equals:
function（ll） 判断传入的lon，lat对是否与当前的相等；
wrapDateLine:
function（maxExtent）复制下（lon,lat），指定为边界的最大范围。
OpenLayers.Pixel：
像素类，在显示器上以（x,y）坐标的的形式呈现像素位置。
有两个属性x坐标、y坐标，提供四个成员函数：
function（）
拷贝像素；
function（px）
判断两像素是否相等；
add:
function（x,y）
改变（x,y）使其成为新像素；
return
OpenLayers.Pixel（this.x
x,
this.y
y）;
offset:
function（px） 调用add（）使像素位置发生偏移。
newPx
this.add（px.x,
px.y）;
OpenLayers.Size：
也有两个属性，宽度width、高度height。
实现了两个成员函数：
function（）和equals:
function（sz）不多说了。
OpenLayers.Element：
在这个名称空间下，开发者写了好多API，有visible、toggle、hide、show、remove、getHeight、getDimensions和getStyle，以实现元素的显示、隐藏、删除、取得高度，取得范围等功能。
以getHeight函数为例我们看看它的代码：
/**
*
APIFunction:
getHeight
Parameters:
element
-
{DOMElement}
Returns:
{Integer}
The
offset
height
the
passed
in
*/
getHeight:
function（element）
{
OpenLayers.Util.getElement（element）;
element.offsetHeight;
}
这里涉及到文档对象模型DOM的一些东西，函数本身很简单，最后返回元素的高度。
OpenLayers.Bounds：
在这个类中，数据以四个浮点型数left,
bottom,
right,
top
的格式存储，它是一个像盒子一样的范围。
它实现了三个描述一个Bound的函数：
toString、toArray和toBBOX。
其中，toString的代码如下：
/**
APIMethod:
toString
{String}
String
representation
bounds
object.
（ex.<
i>
left-bottom=（5,42）
right-top=（10,45）"
/i>
）
toString:
（
left-bottom=（"
this.left
"
this.bottom
）"
right-top=（"
this.right
this.top
结果类似于"
三个Bound数据来源函数：
fromString、fromArray和fromSize；
五个获取对象属性的函数：
getWidth、getHeight、getSize、getCenterPixel、getCenterLonLat；
余下还有：
function（x,y），extend:
function（object），containsLonLat，containsPixel，contains，intersectsBounds，containsBounds，determineQuadrant，wrapDateLine。
以函数extend为例，看看源码。
extend:
function（object）
if
（object）
switch（object.CLASS_NAME）
case
OpenLayers.LonLat"
:
OpenLayers.Bounds
（object.lon,
object.lat,
object.lon,
object.lat）;
break;
OpenLayers.Geometry.Point"
OpenLayers.Bounds（object.x,
object.y,object.x,
object.y）;
OpenLayers.Bounds"
object;
（bounds）
（this.left
==
null）
||
（bounds.left
thi
s.left））
this.left
bounds.left;
（this.bottom
（bounds.bottom
this.bottom）
）
bounds.bottom;
（this.right
（bounds.right
t
his.right）
bounds.right;
（this.top
（bounds.top
this.
top）
bounds.top;
可以看出，对Bounds的扩展可以有三种形式：
point,
lonlat,
或者bounds，计算的条件是零坐标是在屏幕的左上角。
OpenLayers.Class：
这个类是OpenLayers
中的“大红人”，只要创建其他类就得用它，同时也实现了多重继承。
用法如下：
单继承创建：
OpenLayers.Class（prototype）;
多继承创建：
OpenLayers.Class（Class1,
Class2,
prototype）;
净说底层类了，对js内置类的扩展下回写。
（三）BaseTypes：
OpenLayers中定制JavaScript内置类
OpenLayers不仅“自己”写了一些底层的类，像上回说的那些都是。
同时也定制了一些JS的一些内置类，即对JS内置类的扩展。
这个扩展主要包含3类：
String，Number，Function，存在于BaseTypes.js文件中。
String：
OpenLayers对string类型定制了８个方法，分别是startsWith、contains、trim和camelize；
还有另外４个方法：
startsWith、String.
contains、String.trim和String.
Camelize，它们将会在3.0Version中被删除，可能是以前版本遗留下来的，这里就不说它们了。
//Test
whether
a
string
starts
with
another
string.
startsWith:
function（str,
sub）
（str.indexOf（sub）
0）;
contains
string.
contains:
!
-1）;
//Removes
leading
and
trailing
whitespace
characters
from
trim:
function（str）
str.replace（/^\s*（.*?
）\s*$/,
$1"
//Camel-case
hyphenated
//Ex."
chicken-head"
becomes"
chickenHead"
//and"
-chicken-head"
ChickenHead"
.
//
“骆驼”化带有连字符的字符串。
camelize:
oStringList
str.split（'
-'
camelizedString
oStringList[0];
for
（var
i
1;
oStringList.length;
i++）
s
oStringList[i];
+=
s.charAt（0）.toUpperCase（）
s.substring
（1）;
camelizedString;
Number
升级会员 