console 命令行工具 X clear
console
   1:  <!DOCTYPE html>

   2:  <html>

   3:  <head>

   4:      <meta charset='utf-8' />

   5:      <title>创建多个图层的地图</title>

   6:      <script src="OpenLayers.js" type="text/javascript"></script>

   7:      <script type="text/javascript">

   8:          var map;

   9:          function init() {

  10:              map = new OpenLayers.Map('map', {});

  11:              //创建基底图层

  12:              //layers:'basic' 向WMS服务请求basic图层

  13:              //isBaseLayer: 将图层设为基底图层

  14:              var wms_layer_map = new OpenLayers.Layer.WMS(

  15:                  'Base layer',

  16:                  'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',

  17:                  { layers: 'basic' },

  18:                  { isBaseLayer: true }

  19:              );

  20:              //创建叠加图层

  21:              //layers: 'clabel,ctylabel,statelabel' 向WMS服务请求一些不同的label图层

  22:              //transparent:true 从服务器返回的地图图像是透明的

  23:              //opacity:.5 客户端图层半透明

  24:              var wms_layer_labels = new OpenLayers.Layer.WMS(

  25:                   'Location Labels',

  26:                   'http://vmap0.tiles.osgeo.org/wms/vmap0',

  27:                   { layers: 'clabel,ctylabel,statelabel', transparent: true },

  28:                   { opacity: 1 }

  29:                  );

  30:              //添加图层到地图

  31:              map.addLayers([wms_layer_map, wms_layer_labels]);

  32:              if (!map.getCenter()) {

  33:                  map.zoomToMaxExtent();

  34:              }

  35:          }

  36:      </script>

  37:  </head>

  38:  <body onload="init()">

  39:      <div id='map' style='width: 500px; height: 500px;'>

  40:      </div>

  41:  </body>

  42:  </html>