3.2. OpenLayers

建立基于网络的地图是本书的灵感来源。OpenLayers是一个开放源代码JavaScript库，用于显示基于网络的地图， OpenLayers是一个用于开发WebGIS客户端的JavaScript包。 OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers 中进行叠加，在这一方面OpenLayers提供了非常多的选择。 除此之外，OpenLayers实现访问地理空间数据的方法都符合行业标准。 OpenLayers 支持Open GIS 协会制定的WMS（Web Mapping Service）和WFS（Web Feature Service）等网络服务规范， 可以通过远程服务的方式，将以 OGC 服务形式发布的地图数据加载到基于浏览器的OpenLayers 客户端中进行显示。 OpenLayers采用面向对象方式开发，并使用来自Prototype.js和Rico中的一些组件。

与Google Maps的地图客户端相似，并且数量越来越多。 OpenLayers 也是 OSGeo（Open Source Geospatial Foundation） 的项目.

OpenLayers 在 2.13 版本中引入了 Web Processing Services(WPS)标准，可以对空间数据进行地理分析，例如缓冲区分析。

LeafLet（ http://leafletjs.com )是一个很有前途的地图客户端，与 OpenLayers 有联系。

在以后的章节中注意使用LeafLet的例子。

单击 选项 。其中一些选项是GeoServer特有的，而不是WMS规范的一部分。

图 3.2 image86

3.2.1. 探索OpenLayers选项

当OpenLayers地图打开时，您将在地图中看到三个图标。 单击左上角显示了几个与GeoServer WMS交互的选项。 我们现在将探讨其中一些选择。

1.如果您还没有，选择 OpenLayers output option for topp:states; 可以使用以下URL打开演示：

http://localhost:8080/geoserver/topp/wms?service=WMS&version=1.1.0&request=GetMap&layers=topp:states&styles=&bbox=-124.73142200000001,24.955967,-66.969849,49.371735&width=780&height=330&srs=EPSG:4326&format=application/openlayers

如您所见，请求本身是 GetMap 请求WMS服务，为什么你得到一个完整的应用而不是一个普通的图像？看看参数；

• service ：解释发送那种请求类型给 Geoserver ， service=WMS 表示我们想要请求地图;

• version ：请求的geoserver版本；

• request ：表示请求调用的方法，这里为 GetMap ；

• layer ：表示请求的图层标示。 layers=topp:states 一般表示工作区 topp ，存储为 states ;

• styles :表示请求图层渲染需要用到的样式。 style 为空表示使用默认的样式;

• bbox ：是显示地图的边界框，或者地图上的一个区域。格式为 minx,miny,maxx,maxy ;

• width,height : 表示返回区域地图图片的尺寸;

• srs :表示采用投影系的编码

format=application/openlayers 键值对。 这使得GeoServer为您提供了一个完整的JavaScript应用程序。

2.将高度更改为 512 宽度为 512 在URL栏中：

http://localhost:8080/geoserver/topp/wms?service=WMS&version=1.1.0&request=GetMap&layers=topp:states&styles=&bbox=-124.73142200000001,24.955967,-66.969849,49.371735&width=512&height=512&srs=EPSG:4326&format=application/openlayers

3.加载OpenLayers后，单击左上角的图标。显示地图选项。

4.在瓦片下拉菜单中，平移和缩放地图时，在 Single tile 和 Tiled 之间切换。 注意每个选项的地图刷新方式。

图 3.3 singtile.png

Single tile 加载填充整个可见区域的图像， Tiled 版本获得256x256方形图像并将其合并。 如果您将 Firebug 用于 Firefox ，对于瓦片版本，您可以看到发送到GeoServer的请求为 width = 256＆height = 256 ，并针对单个图块以 width = 512＆height = 512 的形式提出一个请求。

3.2.2. 使用瓦片

对于宽度为512、高度为512的 OpenLayers 地图，您将获得四个图像来显示该地图。

对服务器的每个请求都是相同的，除了 bbox 指定区域的参数。

图 3.4 image87

bounding box参数被调用 bbox. 价值 bbox 是从GeoServer调用的区域的经纬度。 此参数的格式为 bbox=minx,miny,maxx,maxy.

如果贴图的高度和宽度相当小，则使用单个瓦片可能需要较少的时间进行渲染。 这也取决于数据过滤器和功能的数量，但这是一个很好的经验法则。 如果需要输出大于256x256的JPEG或PNG以满足更大的显示需求， 则使用单个瓦片也很有用。它是同一个显示器，但作为一个单一的瓦片。

图 3.5 image88

大多数基于web的地图（例如使用OpenLayers）将使用瓦片图像。 将图像分割成更小的块有助于加快加载速度。

3.2.3. 选择一个带有过滤器的功能子集

快速开始过滤。 使用 Filter 下拉菜单中的 FeatureID 参数输入过滤器。 输入 states.17，states.6 。 这应该显示 Colorado 和 Alabama. 在后面的章节中，我们将更深入地研究 CQL （ Contextual Query Language ）过滤器。