实现：最初显示”中国地图（省界）“，放大到一定程度显示”中国地图（地市分界）“，继续放大切换到Google街道地图。
?
?
<!DOCTYPE html><html> <head> <title>中国地图</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="css/style.css" type="text/css" /> <style type="text/css" media="screen"> body { margin:0; padding:0; height:100%; } .bigmap { position:absolute; left:0; top:0px; padding:0; width:100%; height:100%; border:1px solid #333; } </style> <script type="text/javascript" src="js/OpenLayers/lib/OpenLayers.js"></script> <script src="http://maps.google.com/maps/api/js?v=3.6&sensor=false"></script> <script type="text/javascript"> var map, layer_province, layer_city, layer_street, vlayer; // 第一次打开地图的中心位置（经度、纬度） var firstLon = 109.33981; var firstLat = 33.72419; /* * 切换地图比例尺设置 * scale1： * scale2: 省地图和地市地图切换点 * scale3: 地市地图和谷歌街道地图切换点 */ var scale1 = 20000000; var scale2 = 10000000; var scale3 = 2000000; var level1 = 1; var level2 = 2; var level3 = 3; var level = level1; function init() { // 创建MAP DIV框架 map = new OpenLayers.Map("map", { maxResolution: 'auto', maxExtent: new OpenLayers.Bounds( 73.44696044921875, 6.318641185760498, 135.08583068847656, 53.557926177978516), displayProjection: new OpenLayers.Projection("EPSG:4326") }); // 增加中国地图(省界) Layer addProvinceLayer() // 增加中国地图(地市分界) Layer addCityLayer(); // 增加Google Street Layer addStreetLayer(); // 增加地图Layer切换Register addMapRegister(); map.zoomToMaxExtent(); map.setCenter(new OpenLayers.LonLat(firstLon, firstLat), 0); map.addControl(new OpenLayers.Control.Scale()); map.addControl(new OpenLayers.Control.MousePosition()); map.addControl(new OpenLayers.Control.LayerSwitcher()); } function addProvinceLayer() { layer_province = new OpenLayers.Layer.WMS( "China:province", "http://10.0.0.239:8081/geoserver/wms", { layers: "China:province", }, { singleTile: true, //set single label isBaseLayer: true, projection: "EPSG:4326", maxExtent: new OpenLayers.Bounds( 73.44696044921875, 6.318641185760498, 135.08583068847656, 53.557926177978516) } ); map.addLayer(layer_province); } function addCityLayer() { layer_city = new OpenLayers.Layer.WMS( "China:city", "http://10.0.0.239:8081/geoserver/wms", { layers: "China:city" }, { singleTile: true, //set single label visibility: false, projection: "EPSG:4326", displayInLayerSwitcher: false, maxExtent: new OpenLayers.Bounds( 73.44696044921875, 6.318641185760498, 135.08583068847656, 53.557926177978516) } ); map.addLayer(layer_city); } function addStreetLayer() { layer_street = new OpenLayers.Layer.Google( "Google Streets", // the default { numZoomLevels: 18 , projection: "EPSG:900913", visibility: false, displayInLayerSwitcher: false, maxExtent: new OpenLayers.Bounds( -128 * 156543.03390625, -128 * 156543.03390625, 128 * 156543.03390625, 128 * 156543.03390625) } ); map.addLayer(layer_street); } function addMapRegister(){ map.events.register("zoomend", map, function(){ var cur_scale = map.getScale(); if(cur_scale >= scale2) { if(level != level1) { if(level == level2) { map.setCenter(map.center.transform( new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:4326") ), map.getZoom()); } else { map.setCenter(map.center.transform( new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326") ), map.getZoom()); } level = level1; layer_province.displayInLayerSwitcher = true; layer_city.displayInLayerSwitcher = false; layer_street.displayInLayerSwitcher = false; map.setBaseLayer(layer_province); layer_city.setVisibility(false); layer_street.setVisibility(false); } } else if(cur_scale < scale2 && cur_scale >= scale3){ if(level != level2){ if(level == level1) { map.setCenter(map.center.transform( new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:4326") ), map.getZoom()); } else { map.setCenter(map.center.transform( new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326") ), map.getZoom()); } level = level2; layer_province.displayInLayerSwitcher = false; layer_city.displayInLayerSwitcher = true; layer_street.displayInLayerSwitcher = false; map.setBaseLayer(layer_city); layer_province.setVisibility(false); layer_street.setVisibility(false); } } else if(cur_scale < scale3){ if(level != level3) { map.setCenter(map.center.transform( new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913") ), map.getZoom()); level = level3; layer_province.displayInLayerSwitcher = false; layer_city.displayInLayerSwitcher = false; layer_street.displayInLayerSwitcher = true; map.setBaseLayer(layer_street); layer_city.setVisibility(false); layer_province.setVisibility(false); } } }); } </script> </head> <body onload="init()" > <div id="map" class="bigmap"></div> </body></html>?
参考：
add, remove base layers depending on zoom, change baselayer
Zoom Control Example