将数据与OpenLayers结合在一起

无论您是向客户展示如何前往您的企业，显示水质采样点或对度假图片进行地理标记，地图都是一种呈现数据的有趣方式。 在网站上使用地图变得越来越普遍，人们经常使用免费服务，例如Google Maps，Microsoft Virtual Earth和Yahoo!。 地图。 这些主要参与者提供的工具非常有用，可以使您快速获取带有地图的网页。 但是，除了添加标记或航路点之类的基本功能之外，它们不是非常可定制的。

假设您是制图师或地理信息系统（GIS）的专业人士，代表一个人工作，或者是高级业余爱好者，并且希望从各种来源中获取多个数据集。 传统方法是使用Web映射解决方案，例如商业ESRI ArcIMS或开源MapServer工具。 两种工具都擅长允许您合并不同的数据源并显示它们。 但是，它们不允许您自己使用数据源，例如Google Maps和Virtual Earth。 此外，使用MapServer模板或自行编写JavaScript在网站上使用功能齐全的地图可能会很费时间，以实现良好的功能水平。

OpenLayers解决了这些问题。 使用OpenLayers，您可以轻松快捷地在您的网站上整理功能齐全的地图。 生成的地图可以使用来自各种来源的数据，包括公共服务器，MapServer，ArcIMS服务，ESRI ArcGIS甚至是NASA World Wind。 通过让地图使用MapServer驱动的Web地图服务（WMS）服务，您还可以包含自己的数据集，例如shapefile和栅格数据。

注意：如果你不熟悉的GIS术语，例如投影和shape文件，请参阅相关信息的链接，developerWorks文章“Linux上的应用程序中使用地理空间数据使用GDAL。”

图书馆架构概述

OpenLayers是一个独立JavaScript库，不需要服务器端组件或特定的Web服务器要求，它由一组组织良好JavaScript类组成。 起始位置是OpenLayers.Map ，实际的地图对象本身。 实例化各个图层类，例如Layer.ArcIMS或Layer.Google ，并将其添加到地图中。 表示地图控件的类（例如Control.Pan ）用于与地图进行交互。 最后，还有各种用于样式，数据格式，坐标存储等的实用程序类。 请参阅链接的OpenLayers API文档相关信息的完整文档。

本文在构建图1所示的示例网站时探索了这些类，该网站结合了Google Earth，Virtual Earth，本地shapefile和美国国家海洋与大气管理局北雷达与地理空间元素集成显示（NOAA RIDGE）雷达覆盖范围的数据WMS。

图1。在hike.chrismichaelis.com上完成的示例

该示例网站还允许用户在地图上绘制远足路线。 用户可以使用Google Gears在浏览器会话之间保存这些路由，也可以将其导出为Keyhole标记语言（KML）。 Google Gears是一个扩展JavaScript的浏览器插件，因此它可以代表页面存储数据，并在会话之间保持持久性。 它还提供了后台JavaScript执行和其他好处。 在此示例中，仅将其用于存储。 请参阅链接到谷歌齿轮开发者网站相关主题的更多信息。

建立网站

第一步是建立将包含地图的网站。 本文中的示例为HTML，CSS和JavaScript内容使用一个单独的文件，以使事情井井有条。 这种结构还有助于将来的维护，并便于以后扩展站点。 由于OpenLayers完全是JavaScript，因此您的页面是纯HTML，不使用服务器端语言。 因此，您可以使用Nginx之类的快速且瘦小的Web服务器来托管它，而不是使用Apache之类的服务器。 由于所有数据都存储在Google Gears中或从Internet来源提取，因此不需要数据库服务器。

jQuery JavaScript库也包含在您的新站点中。 您可以使用jQuery提供的加速JavaScript开发的工具，例如允许快速访问文档对象的选择器 ，例如，使用$('.btnActive').removeClass('btnActive'); 从出现的所有实例中删除btnActive CSS类，而无需专门循环遍历使用getElementsByClassName函数检索的对象。 同样， $('#someID')通过其HTML id属性选择一个元素。

实施OpenLayers

通过下载从的OpenLayers站点的OpenLayers包开始（参见相关主题 ）。 将其解压缩到网站位置的子目录中，并将其与HTML文件中的以下行一起包括：

<script type="text/javascript" 
    src="OpenLayers/OpenLayers.js"></script>'

在您JavaScript中，使用jQuery“文档就绪”功能来设置地图。 该函数在onLoad事件之后触发； 并非所有图像和DOM元素都可以在onLoad事件触发时加载并准备就绪，但是可以保证在jQuery“ ready”函数触发时可以加载并准备就绪。 创建一个映射并