时下的OpenLayers版本为v2.10,不仅可以支持OGC的标准服务如WMS、WFS等,还支持其它地图服务商如GoogleMaps,VirtualEarth,YahooMaps等,如下为OpenLayers v2.10中进行的多底图示例代码:

  1. <html> 
  2. <head> 
  3. <title>OpenLayers多方底图示例</title> 
  4. <META  charset="utf-8"> 
  5. <script src="http://www.openlayers.org/api/OpenLayers.js"></script> 
  6. <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
  7. <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3" type="text/javascript"></script> 
  8. <script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers" type="text/javascript"></script> 
  9. <script type=text/javascript> 
  10. (function(){ 
  11.     var map; 
  12.     var wms, google, ve, yahoo; 
  13.     var lon = 105.9960, lat = 36.8701, zoom = 3
  14.     window.init=function(){ 
  15.         map = new OpenLayers.Map('divMap'); 
  16.         wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
  17.              "http://labs.metacarta.com/wms/vmap0", 
  18.             {layers: 'basic'}); 
  19.         google = new OpenLayers.Layer.Google("Google"); 
  20.         ve = new OpenLayers.Layer.VirtualEarth("Virtual Earth"); 
  21.         yahoo = new OpenLayers.Layer.Yahoo("Yahoo"); 
  22.         map.addLayers([wms, google, ve, yahoo]); 
  23.         map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); 
  24.         map.addControl(new OpenLayers.Control.LayerSwitcher()); 
  25.         map.addControl(new OpenLayers.Control.MousePosition()); 
  26.     }; 
  27. })(); 
  28. </script> 
  29. </head> 
  30. <body onload="init()"> 
  31.   <div id="divMap" style="height: 400px; width:600px; border:solid 1px gray"></div> 
  32. </body> 
  33. </html> 

1.OpenLayers WMS做底图 

OpenLayers基础:多方底图_virtualearth

2.GoogleMaps做底图

OpenLayers基础:多方底图_virtualearth_02

3.VirtualEarth做底图

OpenLayers基础:多方底图_yahoomaps_03

4.YahooMaps做底图

OpenLayers基础:多方底图_virtualearth_04

P.S. 通过OpenLayers进行各图商的整合非常方便和快速,从而实现地理信息的集成与共享。