1.1 openlayers入门

来源：互联网发布：免费vip软件下载编辑：程序博客网时间：2024/05/19 20:46

<html>
<head>
<meta charset='utf-8' />
<title>创建多个图层的地图</title>
<script src="OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript">
var map;
function init()
{
   map = new OpenLayers.Map('map', {});
   //创建基底图层
   //layers:'basic' 向WMS服务请求basic图层
   //isBaseLayer: 将图层设为基底图层
   var wms_layer_map = new OpenLayers.Layer.WMS(
     'Base layer',
     'http://vmap0.tiles.osgeo.org/wms/vmap0',
     { layers: 'basic' },
     { isBaseLayer: true }
   );
   //创建叠加图层
   //layers: 'clabel,ctylabel,statelabel' 向WMS服务请求一些不同的label图层
   //transparent:true 从服务器返回的地图图像是透明的
   //opacity:0.5 客户端图层半透明
   var wms_layer_labels = new OpenLayers.Layer.WMS(
     'Location Labels',
     'http://vmap0.tiles.osgeo.org/wms/vmap0',
     { layers: 'clabel,ctylabel,statelabel', transparent: true },
     { opacity: 0.5,visibility:false}
   );
   //添加图层到地图
   map.addLayers([wms_layer_map, wms_layer_labels]);
   if (!map.getCenter())
   {
     map.zoomToMaxExtent(); //缩放到全图最大范围
   }
}
</script>
</head>

<body onload="init()">
   <div id='map' style='width: 500px; height: 500px;'>
   </div>
</body>

</html>