7.2. 使用 OpenLayers¶
Google Maps API并不是开发JavaScript映射应用程序的唯一选项。 OpenLayers 是最古老、最常用的框架之一。 它是一个由越来越多的热心开发人员不断维护和开发的开源项目。 正如您所注意到的，它用于 GeoServer 预览。
复制 OpenLayers 预览并没有多大用处， 所以让我们来看看 OpenLayers 的一些基础知识。
7.2.1. 行动时间–集成GeoServer 和 OpenLayers¶
再次，让我们深入到源代码中，看看 OpenLayers 如何与GeoServer 一起工作：
1.正常打开 chapter7/index.html 在你最喜欢的浏览器中。
2.选择 ** OpenLayers Basic Map** 示例:
图 7.7 image167¶
3.正常打开 chapter7/openlayers/geoserverbase/index.html 和 /chapter7/openlayers/geoserverbase/map.js . 这个 index.html 文件与前一个非常相似。 不同之处在于加载 OpenLayers API代码：
<script type="text/javascript" src="http://openlayers.org/ api/2.12/ OpenLayers .js"></script>
4.这个 map.js 文件完全不同。首先我们定义地图选项， 也就是说， 界限 和 投影 ：
Var map;
function mapinitialize（）{{
var bounds = new OpenLayers .Bounds(-180.0, -90.0, 180.0, 90.0);
var options = {{
maxExtent: bounds,
projection: 'EPSG:4326',
units: 'degrees'
}};
5.然后我们创建一个新的 map 对象：
map = new OpenLayers .Map('map', options);
6.创建新图层对象并定义其参数：
var countries = new OpenLayers .Layer.WMS(
CountriesLayer, GEOSERVERBASE + '/geoserver/NaturalEarth/ wms',
{
layers: CountriesLayer,
format: 'image/png'
}
);
7.最后，我们将其添加到地图上，并以美国为中心：
map.addLayer（countries）；
map.zoomTo（4）；
map.panTo(new OpenLayers .LonLat(-95.0,40.0));
}
8.当然，只有一层的地图几乎是无用的。让我们从自然地球上添加河流和湖泊的层次。在 counties 图层定义：
var rivers = new OpenLayers .Layer.WMS(
RiversLayer, GEOSERVERBASE + '/geoserver/NaturalEarth/ wms',
{
layers: RiversLayer,
transparent: 'true'
},
{
isBaseLayer:false，
}
);
map.addLayer(countries);
map.addLayer(rivers);
9.现在打开地图样本；
图 7.8 image168¶
刚刚发生了什么？¶
我们使用GeoServer 创建了一个基本的 OpenLayers 地图，用作瓦片。 当我们希望在GeoServer 中使用 OpenLayers 时，这是一个很好的起点， 因为如果将其复制并粘贴到自己的应用程序中，GeoServer 预览将不起作用。
7.2.2. 行动的时间-使用带有 OpenLayers 的GeoRSS¶
我们将展示一些以点表示的特征：
1.正常打开 chapter7/index.html 在你最喜欢的浏览器中。
2.选择 ** OpenLayers GeoRSS** 示例.
3.打开 /chapter7/openlayers/georss/index.html 和 /chapter7/ openlayers/georss/map.js .
4.回顾 map.js 文件：
var map, rss;
function mapinitialize() {
map = new OpenLayers .Map('map', {
maxResolution:'auto',
projection: 'EPSG:4326'
});
layer = new OpenLayers .Layer.WMS(
CountyLayer, GEOSERVERBASE + "/geoserver/tiger/wms",
{
LAYERS: CountyLayer,
format: 'image/png'
}
);
map.addLayer(layer);
map.zoomTo(9);
map.panTo(new OpenLayers .LonLat(-73.99, 40.75));
addGeoRSS();
}
function addGeoRSS() {
var value = GEOSERVERBASE + '/geoserver/tiger/wms?
service=WMS&
version=1.1.0&
request=GetMap&
layers=tiger:poi&
styles=&
bbox=-74.0118315772888,40.70754683896324,-
74.00153046439813,40.719885123828675&
width=427&height=512&
srs=EPSG:4326&
var georss = new OpenLayers .Layer.GeoRSS('Tiger POI',value);
map.addLayer(georss);
}
图 7.9 image169¶
刚刚发生了什么？¶
我们仍在查看基础地图的县数据，但我们使用GeoRSS输出格式覆盖了 Tiger POI 层。 记住使用 ProxyPass 以避免在为来自不同于 GeoServer 的URL的示例文件提供服务时出现XSS错误。
查看GeoRSS的示例了解更多信息， 请访问 http://openlayers.org/dev/examples/georss.html .