OpenLayers简介
OpenLayers是一种用JavaScript编写的功能强大且开源的映射解决方案,可以在网页上显示多种不同的映射服务。这意味着您可以使用GoogleMaps创建一个映射工具,并在以后替换它以使用BingMaps,而不必完全重写代码。OpenLayers的工作原理是建立一系列适合于形成映射,工具,信息甚至是KML解析和AJAX之类的实用程序的图层。向量和标记也可以用于在映射上添加信息层。
OpenLayers(和大多数其他映射服务)中的映射本质上是一组称为“平铺”的图像。加载映射时,您要做的就是加载一堆映射图块,OpenLayers然后将其放置在正确的位置。当您在映射上移动或更改缩放系数时,会加载其他映射图块以构建新的映射视图。
进入OpenLayers的最佳方法(许多技术都是这样),是构建一系列简单的原型。最初弄清楚如何使用它时,我创建了一大堆简单的原型,只完成了一项任务。当我准备构建更重要的东西时,我就有创建映射,使用工具,解析KML供稿或我需要的其他任何东西的经验。
要开始使用OpenLayers,您需要从以下网站下载最新版本openlayers.org并解压缩。在此下载中,您将找到主OpenLayers.js文件以及许多其他资源。创建更复杂的工具时,您仅需要其中一些组件。要启动OpenLayers并在网页上运行,您需要做的就是添加OpenLayers.js文件。
您创建的所有映射都将被推送到页面本身的HTML标签中。我将其放在下面的示例中,以及脚本标记和对的调用load()。此函数是我们放置将创建映射的OpenLayers代码的地方。
您可以在OpenLayers中创建的最简单的事情是具有简单缩放控件的单个映射。我们需要做的第一件事是创建一个映射对象,该对象指向我们创建的包含映射的HTML元素。创建映射对象会创建一组默认图层,其中包含一些简单的缩放工具。这实际上不会显示任何映射,这是下一步。
varmap=newOpenLayers.Map("map");
如果运行到目前为止编写的代码,您将在左侧看到一个空白的HTML元素,其中包含一组损坏的图像支架。此处的所有图像源均可在OpenLayerszip文件的“img”目录中找到。为了使工作正常,您只需要将该目录拖放到与OpenLayers.js文件相同的目录中即可。
现在,我们设置了包含映射图块和工具所需的图层。我正在使用WMS对象创建此层,并为其提供要加载的MetaCarter映射数据。如果您需要其他服务,则只需更改此URL即可指向该服务。OpenLayers使用此处的第三个参数为映射服务提供满足请求所需的必要参数。请注意,如果您更改了映射服务,则可能还需要更改它。
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
现在,我们使用addLayers()映射对象的功能将此图层添加到映射中。作为附加步骤,我还将缩放系数设置为第二高的级别。此处较高的数字将放大映射,并且值0将显示所有映射。
map.addLayers([ol_wms]); map.zoomTo(1);
将所有这些放在一起将创建一个带有简单世界映射的网页。默认情况下,映射以纬度/经度坐标0,0为中心。这是进入OpenLayers的一个很好的起点,也是创建映射工具时的一个很好的模板。
这是完整的代码。
有关OpenLayers的更多信息,您可以阅读最终用户文档或API文档。OpenLayers网站上也提供了许多示例,这是弄清楚如何使用API中某些功能的好地方。