• 欢迎访问少将全栈，学会感恩，乐于付出，珍惜缘份，成就彼此、推荐使用最新版火狐浏览器和Chrome浏览器访问本网站。
  • 吐槽，投稿，删稿，交个朋友，商务沟通v：ai_draw
  • 如果您觉得本站非常有看点，那么赶紧使用Ctrl+D 收藏少将全栈吧
> Web前端 > Openlayers源代码分析（一）

Openlayers源代码分析（一）

Web前端 admin 8年前 (2016-05-18) 1768次浏览 已收录 0个评论 扫描二维码

OpenLayers 是由MetaCarta公司开发的，用于WebGIS客户端的JavaScript包，目前的最高版本是2.5 V，通过BSD License 发行。它实现访问地理空间数据的方法都符合行业标准，比如OpenGIS的WMS和WFS规范， OpenLayers采用纯面向对象的JavaScript方式开发，同时借用了Prototype框架和Rico库的一些组件。

采用OpenLayers作为客户端不存在浏览器依赖性。由于OpenLayers采用JavaScript语言实现，而应用于Web浏览器中的DOM（文档对象模型）由JavaScript实现，同时，Web浏览器（比如IE，FF等）都支持DOM 。

OpenLayers APIs采用动态类型脚本语言JavaScript编写，实现了类似与Ajax功能的无刷新更新页面，能够带给用户丰富的桌面体验（它本身就有一个Ajax类，用于实现Ajax功能）。

目前，OpenLayers所能够支持的Format有：XML、GML、GeoJSON、GeoRSS、JSON、KML、WFS、WKT(Well-Known Text)。在OPenlayers.Format名称空间下的各个类里，实现了具体读／写这些Format的解析器。

OpenLayers所能够利用的地图数据资源“丰富多彩”，在这方面提供给拥护较多的选择，比如WMS、WFS、GoogleMap、KaMap、MSVirtualEarth、WorldWind等等。当然，也可以用简单的图片作为源。

第一次使用OpenLayers：

先到它的官方网站http://www.openlayers.org下载他的压缩包，解压后可以看到其中的一些目录和文件，拷贝目录下的OpenLayer.js、根目录下的lib目录、根目录下的img目录到你网站的Scripts目录下（当然，这个只是例子，您网站的目录结构您自己说得算，只要保证OpenLayers.js，/lib，/img在同一目录中即可）。 然后，创建一个index.html作为查看地图的页面，导入OpenLayers.js和你将要创建的js。

文件：/lib/OpenLayers.js 

//利用匿名函数来封装Openlayers的名字空间
(function() {
//当你直接导入压缩过的Openlayers.js文件时这个singleFile的值为true，如果是导入lib目录下的Openlayers.js文件，这个值就为false
var singleFile = (typeof OpenLayers == "object" && OpenLayers.singleFile);

//名字空间
window.OpenLayers = {

//脚本名字（变量前面带有下划线，在js中一般表示是私有变量，相当于java中的private）
_scriptName: (!singleFile) ? "lib/OpenLayers.js" : "OpenLayers.js",
//脚本目录
_getScriptLocation: function () {
var scriptLocation = ""; 
//正则表达式，匹配src中含有脚本名字的script标签 
var isOL = new RegExp("(^|(.*?///))(" + OpenLayers._scriptName + ")(//?|$)");
//获取页面中的所有script标签
var scripts = document.getElementsByTagName(’script’);
//循环这个数组，用isOL去匹配，把匹配项的目录值赋给scriptLocation变量
for (var i=0, len=scripts.length; i<len; i++) {
var src = scripts[i].getAttribute(’src’);
if (src) {
var match = src.match(isOL);
if(match) {
scriptLocation = match[1];
break;
}
}
}
return scriptLocation;
}
};
//这里是动态加载script，用了两种方式一种是W3C的标准DOM模型操作，一种是document.write()直接输出script的html代码。考虑到使用两种方式主要是js文件的加载有先后顺序。如果加载的顺序出错，在Openlayers则不能使用。而IE如果是用W3C的DOM模型来加载js代码，则加载的顺序是按那个js文件先下载回来，就先加载那个。这个应该是IE的一个bug，而Firefox用这两种方法都可以，不会出现顺序混乱的现象。
if(!singleFile) {
var jsfiles = new Array(
"OpenLayers/Util.js",
"OpenLayers/BaseTypes.js",
"OpenLayers/BaseTypes/Class.js",
"OpenLayers/BaseTypes/Bounds.js",
"OpenLayers/BaseTypes/Element.js",
"OpenLayers/BaseTypes/LonLat.js",
"OpenLayers/BaseTypes/Pixel.js",
"OpenLayers/BaseTypes/Size.js",
"OpenLayers/Console.js",
"OpenLayers/Tween.js",
"Rico/Corner.js",
"Rico/Color.js",
"OpenLayers/Ajax.js",
"OpenLayers/Events.js",
"OpenLayers/Request.js",
"OpenLayers/Request/XMLHttpRequest.js",
"OpenLayers/Projection.js",
"OpenLayers/Map.js",
"OpenLayers/Layer.js",
"OpenLayers/Icon.js",
"OpenLayers/Marker.js",
"OpenLayers/Marker/Box.js",
"OpenLayers/Popup.js",
"OpenLayers/Tile.js",
"OpenLayers/Tile/Image.js",
"OpenLayers/Tile/WFS.js",
"OpenLayers/Layer/Image.js",
"OpenLayers/Layer/SphericalMercator.js",
"OpenLayers/Layer/EventPane.js",
"OpenLayers/Layer/FixedZoomLevels.js",
"OpenLayers/Layer/Google.js",
"OpenLayers/Layer/VirtualEarth.js",
"OpenLayers/Layer/Yahoo.js",
"OpenLayers/Layer/HTTPRequest.js",
"OpenLayers/Layer/Grid.js",
"OpenLayers/Layer/MapGuide.js",
"OpenLayers/Layer/MapServer.js",
"OpenLayers/Layer/MapServer/Untiled.js",
"OpenLayers/Layer/KaMap.js",
"OpenLayers/Layer/KaMapCache.js",
"OpenLayers/Layer/MultiMap.js",
"OpenLayers/Layer/Markers.js",
"OpenLayers/Layer/Text.js",
"OpenLayers/Layer/WorldWind.js",
"OpenLayers/Layer/ArcGIS93Rest.js",
"OpenLayers/Layer/WMS.js",
"OpenLayers/Layer/WMS/Untiled.js",
"OpenLayers/Layer/ArcIMS.js",
"OpenLayers/Layer/GeoRSS.js",
"OpenLayers/Layer/Boxes.js",
"OpenLayers/Layer/XYZ.js",
"OpenLayers/Layer/TMS.js",
"OpenLayers/Layer/TileCache.js",
"OpenLayers/Popup/Anchored.js",
"OpenLayers/Popup/AnchoredBubble.js",
"OpenLayers/Popup/Framed.js",
"OpenLayers/Popup/FramedCloud.js",
"OpenLayers/Feature.js",
"OpenLayers/Feature/Vector.js",
"OpenLayers/Feature/WFS.js",
"OpenLayers/Handler.js",
"OpenLayers/Handler/Click.js",
"OpenLayers/Handler/Hover.js",
"OpenLayers/Handler/Point.js",
"OpenLayers/Handler/Path.js",
"OpenLayers/Handler/Polygon.js",
"OpenLayers/Handler/Feature.js",
"OpenLayers/Handler/Drag.js",
"OpenLayers/Handler/RegularPolygon.js",
"OpenLayers/Handler/Box.js",
"OpenLayers/Handler/MouseWheel.js",
"OpenLayers/Handler/Keyboard.js",
"OpenLayers/Control.js",
"OpenLayers/Control/Attribution.js",
"OpenLayers/Control/Button.js",
"OpenLayers/Control/ZoomBox.js",
"OpenLayers/Control/ZoomToMaxExtent.js",
"OpenLayers/Control/DragPan.js",
"OpenLayers/Control/Navigation.js",
"OpenLayers/Control/MouseDefaults.js",
"OpenLayers/Control/MousePosition.js",
"OpenLayers/Control/OverviewMap.js",
"OpenLayers/Control/KeyboardDefaults.js",
"OpenLayers/Control/PanZoom.js",
"OpenLayers/Control/PanZoomBar.js",
"OpenLayers/Control/ArgParser.js",
"OpenLayers/Control/Permalink.js",
"OpenLayers/Control/Scale.js",
"OpenLayers/Control/ScaleLine.js",
"OpenLayers/Control/Snapping.js",
"OpenLayers/Control/Split.js",
"OpenLayers/Control/LayerSwitcher.js",
"OpenLayers/Control/DrawFeature.js",
"OpenLayers/Control/DragFeature.js",
"OpenLayers/Control/ModifyFeature.js",
"OpenLayers/Control/Panel.js",
"OpenLayers/Control/SelectFeature.js",
"OpenLayers/Control/NavigationHistory.js",
"OpenLayers/Control/Measure.js",
"OpenLayers/Control/WMSGetFeatureInfo.js",
"OpenLayers/Geometry.js",
"OpenLayers/Geometry/Rectangle.js",
"OpenLayers/Geometry/Collection.js",
"OpenLayers/Geometry/Point.js",
"OpenLayers/Geometry/MultiPoint.js",
"OpenLayers/Geometry/Curve.js",
"OpenLayers/Geometry/LineString.js",
"OpenLayers/Geometry/LinearRing.js", 
"OpenLayers/Geometry/Polygon.js",
"OpenLayers/Geometry/MultiLineString.js",
"OpenLayers/Geometry/MultiPolygon.js",
"OpenLayers/Geometry/Surface.js",
"OpenLayers/Renderer.js",
"OpenLayers/Renderer/Elements.js",
"OpenLayers/Renderer/SVG.js",
"OpenLayers/Renderer/Canvas.js",
"OpenLayers/Renderer/VML.js",
"OpenLayers/Layer/Vector.js",
"OpenLayers/Layer/Vector/RootContainer.js",
"OpenLayers/Strategy.js",
"OpenLayers/Strategy/Fixed.js",
"OpenLayers/Strategy/Cluster.js",
"OpenLayers/Strategy/Paging.js",
"OpenLayers/Strategy/BBOX.js",
"OpenLayers/Strategy/Save.js",
"OpenLayers/Protocol.js",
"OpenLayers/Protocol/HTTP.js",
"OpenLayers/Protocol/SQL.js",
"OpenLayers/Protocol/SQL/Gears.js",
"OpenLayers/Protocol/WFS.js",
"OpenLayers/Protocol/WFS/v1.js",
"OpenLayers/Protocol/WFS/v1_0_0.js",
"OpenLayers/Protocol/WFS/v1_1_0.js",
"OpenLayers/Layer/PointTrack.js",
"OpenLayers/Layer/GML.js",
"OpenLayers/Style.js",
"OpenLayers/StyleMap.js",
"OpenLayers/Rule.js",
"OpenLayers/Filter.js",
"OpenLayers/Filter/FeatureId.js",
"OpenLayers/Filter/Logical.js",
"OpenLayers/Filter/Comparison.js",
"OpenLayers/Filter/Spatial.js",
"OpenLayers/Format.js",
"OpenLayers/Format/XML.js",
"OpenLayers/Format/ArcXML.js",
"OpenLayers/Format/ArcXML/Features.js",
"OpenLayers/Format/GML.js",
"OpenLayers/Format/GML/Base.js",
"OpenLayers/Format/GML/v2.js",
"OpenLayers/Format/GML/v3.js",
"OpenLayers/Format/KML.js",
"OpenLayers/Format/GeoRSS.js",
"OpenLayers/Format/WFS.js",
"OpenLayers/Format/WFSCapabilities.js",
"OpenLayers/Format/WFSCapabilities/v1.js",
"OpenLayers/Format/WFSCapabilities/v1_0_0.js",
"OpenLayers/Format/WFSCapabilities/v1_1_0.js",
"OpenLayers/Format/WFSDescribeFeatureType.js",
"OpenLayers/Format/WMSDescribeLayer.js",
"OpenLayers/Format/WMSDescribeLayer/v1_1.js",
"OpenLayers/Format/WKT.js",
"OpenLayers/Format/OSM.js",
"OpenLayers/Format/GPX.js",
"OpenLayers/Format/Filter.js",
"OpenLayers/Format/Filter/v1.js",
"OpenLayers/Format/Filter/v1_0_0.js",
"OpenLayers/Format/Filter/v1_1_0.js",
"OpenLayers/Format/SLD.js",
"OpenLayers/Format/SLD/v1.js",
"OpenLayers/Format/SLD/v1_0_0.js",
"OpenLayers/Format/SLD/v1.js",
"OpenLayers/Format/WFST.js",
"OpenLayers/Format/WFST/v1.js",
"OpenLayers/Format/WFST/v1_0_0.js",
"OpenLayers/Format/WFST/v1_1_0.js",
"OpenLayers/Format/Text.js",
"OpenLayers/Format/JSON.js",
"OpenLayers/Format/GeoJSON.js",
"OpenLayers/Format/WMC.js",
"OpenLayers/Format/WMC/v1.js",
"OpenLayers/Format/WMC/v1_0_0.js",
"OpenLayers/Format/WMC/v1_1_0.js",
"OpenLayers/Format/WMSCapabilities.js",
"OpenLayers/Format/WMSCapabilities/v1_1.js",
"OpenLayers/Format/WMSCapabilities/v1_1_0.js",
"OpenLayers/Format/WMSCapabilities/v1_1_1.js",
"OpenLayers/Format/WMSGetFeatureInfo.js",
"OpenLayers/Layer/WFS.js",
"OpenLayers/Control/GetFeature.js",
"OpenLayers/Control/MouseToolbar.js",
"OpenLayers/Control/NavToolbar.js",
"OpenLayers/Control/PanPanel.js",
"OpenLayers/Control/Pan.js",
"OpenLayers/Control/ZoomIn.js",
"OpenLayers/Control/ZoomOut.js",
"OpenLayers/Control/ZoomPanel.js",
"OpenLayers/Control/EditingToolbar.js",
"OpenLayers/Lang.js",
"OpenLayers/Lang/en.js"
); // etc.
var agent = navigator.userAgent;
var docWrite = (agent.match("MSIE") || agent.match("Safari"));
if(docWrite) {
var allScriptTags = new Array(jsfiles.length);
}
var host = OpenLayers._getScriptLocation() + "lib/"; 
for (var i=0, len=jsfiles.length; i<len; i++) {
if (docWrite) {
allScriptTags[i] = "<mce:script src="" + host + jsfiles[i] +
"" mce_src="" + host + jsfiles[i] +
""></mce:script>"; 
} else {
var s = document.createElement("script");
s.src = host + jsfiles[i];
var h = document.getElementsByTagName("head").length ? 
document.getElementsByTagName("head")[0] : 
document.body;
h.appendChild(s);
}
}
if (docWrite) {
document.write(allScriptTags.join(""));
}
}
})();
//Openlayers的版本号
OpenLayers.VERSION_NUMBER="OpenLayers 2.8 -- $Revision: 9492 $";

转自:http://www.openlayers.cn/forum.php?mod=viewthread&tid=32&extra=page%3D6

喜欢 (0)赏
[🍬谢谢你请我吃糖果🍬🍬～]
分享 (0)
关于作者：
少将，关注Web全栈开发、项目管理，持续不断的学习、努力成为一个更棒的开发，做最好的自己，让世界因你不同。
作者主页 赞助作者
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi，您需要填写昵称和邮箱！

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址