<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="OpenLayers.js"></script> <title>地图加载</title> <script type="text/javascript"> var map; function loadmap() { map = new OpenLayers.Map('map', {}); var wms_layer_map = new OpenLayers.Layer.WMS( '基础图层', 'http://vmap0.tiles.osgeo.org/wms/vmap0', { layers: 'basic' }, { isBasicLayer: true } ); var wms_layer_labels = new OpenLayers.Layer.WMS( '地理标识', 'http://vmap0.tiles.osgeo.org/wms/vmap0', { Layers: 'clabel,ctylabel,statelabel', transparent: true }, { visibility: true, opcity: 0.5 } ); var wms_state_lines = new OpenLayers.Layer.WMS( '国家线', 'http://labs.metacarta.com/wms/vmap0', { layers: 'stateboundary', transparent: true }, { displayInLayerSwitcher: true, minScale: 13841995.078125 } ); var wms_water_depth = new OpenLayers.Layer.WMS( '水深', 'http://labs.metacarta.com/wms/vmap0', { layers: 'depthcontour', transparent: true }, { opacity: 0.8 } ); var wms_roads = new OpenLayers.Layer.WMS( '道路', 'http://labs.metacarta.com/wms/vmap0', { layers: 'priroad,secroad,rail', transparent: true }, { transistionEffect: 'resize' } ); map.addLayers([ wms_layer_map, wms_layer_labels, wms_state_lines, wms_roads, wms_water_depth ]); map.addControl(new OpenLayers.Control.LayerSwitcher({})); map.setCenter(new OpenLayers.LonLat(-116, 23)); map.zoomTo(5); } //参数解释 //isBasicLayer:true 设置改图层为基础图层 //visibility:false 设置图层是否显示 //opacity:0.5 设置图层的透明度 //transistionEffect:'resize' 设置图层重新显示的时候,有resize动画效果 //minScale显示到的最小比例 //maxScale显示到的最大比例 //displayInLayerSwitcher:false 是否在图层选择器中出现 //map.zoomTo(9);设置地图的缩放级别 //map.getScale();获取地图的缩放级别 </script> </head> <body onload="loadmap();"> <div id="map" style="width: 500px; height: 500px; margin: auto;"></div> </body> </html>