OpenLayers开发：调用栅格数据

栅格图像是GIS系统中非常重要的一类数据。OpenLayers可以集成调用多种不同来源的栅格图像，比如GoogleMaps、Bing Maps、OpenStreetMap以及任何提供了WMS规范的服务。

在调用栅格图像的过程中，为提高地图浏览速度，获得良好的用户体验，增强客户端与服务端的交互能力，应尽量使用瓦片地图，即使用缓存过的地图。本章介绍了栅格图层的使用，重点介绍WMS图层的调用。

使用Google Maps

OpenLayers调用GoogleMaps imagery的方法实际上是对GoogleMaps API进行了封装，使用过程包括以下步骤：

1. 创建HTML文件，引入OpenLayers开发类库。

2. HTML文件中加入以下对GoogleMaps API引用：

<scripttype="text/javascript"src="http://maps.google.com/maps/api/js?v=3.5&sensor=false"></script>
3. 添加一个包含地图的div元素：

<!-- Map DOM element -->
<div id="google_maps"style="width: 100%; height: 100%;"></div>
4. 编写javascript脚本代码，创建地图实例，并添加图层控制列表控件，如下：

<!-- The magic comes here-->
<scripttype="text/javascript">
//Create the map using the specified DOM element
varmap = new OpenLayers.Map("google_maps ");
map.addControl(newOpenLayers.Control.LayerSwitcher());
5. 创建GoogleMaps图层，并添加到地图：

varstreets = new OpenLayers.Layer.Google("Google Streets", {
numZoomLevels:20
});
varphysical = new OpenLayers.Layer.Google("Google Physical", {
type:google.maps.MapTypeId.TERRAIN
});
varhybrid = new OpenLayers.Layer.Google("Google Hybrid", {
type:google.maps.MapTypeId.HYBRID, numZoomLevels: 20
});
varsatellite = new OpenLayers.Layer.Google("Google Satellite", {
type:google.maps.MapTypeId.SATELLITE, numZoomLevels: 22
});
map.addLayers([physical,streets, hybrid, satellite]);
6. 最后设置地图中心：

map.setCenter(newOpenLayers.LonLat(0, 0), 2);
</script>
运行结果如下：

使用Bing Maps

使用BingMaps之前，应该首先到官网上注册，并获得一个API密钥，在以后的每次请求中都要验证该密钥。

1. 创建HTML文件，引入OpenLayers开发类库。

2. 添加一个包含地图的div元素：

<div id="ch2_bing"style="width: 100%; height: 100%;"></div>
3. 编写javascript脚本代码，创建地图实例，并添加图层控制列表控件，如下：

<scripttype="text/javascript">
//Create the map using the specified DOM element
varmap = new OpenLayers.Map("ch2_bing");
map.addControl(newOpenLayers.Control.LayerSwitcher());
4. 创建Bing图层，并添加到地图：

varbingApiKey = "your_bing_API_must_be_put_here";
varroad = new OpenLayers.Layer.Bing({
name:"Road",
type:"Road",
key:bingApiKey
});
varhybrid = new OpenLayers.Layer.Bing({
name:"Hybrid",
type:"AerialWithLabels",
key:bingApiKey
});
varaerial = new OpenLayers.Layer.Bing({
name:"Aerial",
type:"Aerial",
key:bingApiKey
});
map.addLayers([road,hybrid, aerial]);
map.setCenter(newOpenLayers.LonLat(0, 0), 2);
</script>
运行结果如下：

调用WMS图层

WebMap Service (WMS)是OpenGeospatial Consortium (OGC)的服务标准之一，规定了地图服务器以统一的方式发布地图服务，客户端则严格按照该方式访问地图服务。关于WMS服务的详细信息可以参照http://en.wikipedia.org/wiki/Web_Map_Service。

BeyonServer便是提供了WMS标准服务的地图服务器，下面以BeyonServer提供的WMS服务为例说明客户端如何调用WMS图层。

1. 创建HTML文件，引入OpenLayers开发类库。

2. 添加一个包含地图的div元素：

<div id="wms_layer"style="width: 100%; height: 100%;"></div>
3.编写javascript脚本代码，创建地图实例：

//Create the map using the specified DOM element
varmap = new OpenLayers.Map("wms_layer");
4.增加两个WMS图层，第一个是基础图层，第二是普通的叠加图层，如下：

//添加WMS图层
varfirstwms = new OpenLayers.Layer.WMS("中国",
"http://map.chinalbs.org/beyonserver/gwc/service/wms",
{
layers:'china',
format:'image/png8'
},
{
isBaseLayer: true
}
);
//添加第二个WMS图层
varsecondwms = new OpenLayers.Layer.WMS("中国注记",
"http://map.chinalbs.org/beyonserver/gwc/service/wms",
{
layers:"beyondb:b0100p014",
format:'image/png'
},
{
isBaseLayer:false
});
map.addLayers([firstwms,secondwms]);
这里用到了OpenLayers.Layer.WMS类，实例化该类的构造方法如下：

new OpenLayers.Layer.WMS(name,url, params, options)
其中，

l name参数表示图层名称，是客户端所看到的图层名称，避免与地图服务器上的图层名称混淆

l url参数指向WMS服务器地址

l params参数包含了WMS请求的具体参数，例如图层或图层组名称、格式、样式等，详细信息可查阅WMS标准

l options参数包含了WMS图层有关的可选项

5.最后，添加图层列表控件，设置地图中心。

//Add layer switcher control
map.addControl(newOpenLayers.Control.LayerSwitcher());
//Set the center of the view
map.setCenter(newOpenLayers.LonLat(116.39, 39.91), 8);
运行结果如下：