3 <head>
4 <meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
5 <title>Layer in OpenLayers</title>
6 <script type="text/javascript" src="OpenLayers.js"></script>
7 <script type="text/javascript">
8 var map
9 function initMap(){
10 // 创建Map
11 map = new OpenLayers.Map('map',{})
12 //创建BaseLayer，并明确的在初始化时指出来. isBaseLayer:true
13 var baseLayer = new OpenLayers.Layer.WMS(
14 'basic layer',
15 'http://vmap0.tiles.osgeo.org/wms/vmap0',
16 {layers:'basic'},
17 {isBaseLayer:true}
18 )
19 var wms_layer_labels = new OpenLayers.Layer.WMS(
20 'Location Labels',
21 'http://vmap0.tiles.osgeo.org/wms/vmap0',
22 {layers:'clabel,ctylabel,statelabel',transparent:true},
23 {opacity:.5}
24 )
25/*
26 * 向map中添加Layers,这里我们不在使用前两章中的addLayer方法，
27 * 需要注意的是这个方法的参数，没错是Layer对象的数组
28 */
29 map.addLayers([baseLayer,wms_layer_labels])
30 /**
31 * 现在，我们手动的添加地图的第一控件 Layer Switcher，图层选择器.
32 * 其中参数也有个匿名对象，不知道要什么参数，或者是继承来的
33 */
34 map.addControl(new OpenLayers.Control.LayerSwitcher({}))
35 /**
36 * 最后依然需要设置，地图显示区域 ，如果没有什么特殊的要求，我们可以使用前两章
37 * 的方法map.zoomToMaxExtent()
38 * 这里我把地图显示到河北 ，使用坐标和缩放等级的方法，缩放到河北大概在lon 116 lat 39左右
39 * //lon 经度 lat 纬度
40 *map.setCenter(new OpenLayers.LonLat(-116,56))
41 *map.zoomTo(5)
42 *或者 map.zoomToExent(new OpenLayers.Bounds([minX,minY,maxX,maxY]))//设置了一个矩形用于显示,
43 */
44 map.setCenter(new OpenLayers.LonLat(116,39))
45 map.zoomTo(7)
47 }
48 </script>
49 </head>
50 <body onload="initMap()">
51 <div id="map" style="width: 500pxheight: 500px"></div>
52 </body>
53 </html>
显示效果
我们可以使用图层选择器来完成覆盖层的显示。值得注意的是我们虽然看到图层显示器里面虽然只显示两个图层，但这只是OpenLayers的概念，
实际上他使用了server端4个图层。大家尝试可以使用FireBug观察和检查代码。
//在初始页面加入以下jswindow.onload = function(){
var u = navigator.userAgent
if (u.indexOf("Android") >-1 || u.indexOf("Linux") >-1) {
return window.location.href = '<a class="baidu-highlight " target="_blank" href="https://www.baidu.com/s?wd=%E5%AE%89%E5%8D%93&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YznWfsn1bzuyRvPj6LPvN-0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7dugPYpyq8Q1fzPjmLPHbvnHTvP1RkPjf4n6">安卓</a>地址'
} else if (u.indexOf("iPhone") >-1) {
return window.location.href = '<a class="baidu-highlight " target="_blank" href="https://www.baidu.com/s?wd=%E8%8B%B9%E6%9E%9C&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YznWfsn1bzuyRvPj6LPvN-0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7dugPYpyq8Q1fzPjmLPHbvnHTvP1RkPjf4n6">苹果</a>地址'
} else if (u.indexOf("Windows Phone") >-1) {
return window.location.href = 'wp地址'
}
}
