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