OpenLayers添加地图说明等内容

来源：互联网发布：淘宝上阿迪达斯是真的编辑：程序博客网时间：2024/05/22 14:20

Openlayers作为展现地图的开源AJAX框架，非常方便实用。这里是一段如何添加自己需要的一段话，借助的是Attribution控件。该控件显示的内容依赖于图层，因此切换不同的图层，它显示的是不同的内容。可以用来输出比如图层说明等内容。

<!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-quiv="Content-Type" content="text/html;charset=utf-8" />
  
  <title>text control in ol</title>
  <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css"
   type="text/css" />

  <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css"
   type="text/css" />

  <style type="text/css">
   .olControlAttribution {
    bottom:3px;
    display:block;
    font-size: small;
    position:absolute;
    left:3px;
    background-color: #DDDDDD;
   }
  </style>

            var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                "http://labs.metacarta.com/wms/vmap0",
                {layers: 'basic'},
                { attribution:timestamp } );

            map.addLayers([ol_wms]);
            if (!map.getCenter()) map.zoomToMaxExtent();

            gAttributionControl = new OpenLayers.Control.Attribution();
            map.addControl( gAttributionControl );

            map.addControl(new OpenLayers.Control.MousePosition());
        }

      function drawScaleHelper(){

      var timestamp = Date();
      map.layers[0].attribution = '当前时间是：'+timestamp;
      gAttributionControl.draw();

      }
    </script>
</head>
<body onload="init()">
  <h3 id="title">
   Text Control ( encode: utf8 )
  </h3>
  <p id="shortdesc">
   用Attribution控件显示文字内容，变化体现在秒数上。文字位置由CSS控制。
  </p>
  <p>
   实验效果需要联网。
  </p>
  <input type="button" title="注意秒数变化" value="内容变换：秒" onclick="drawScaleHelper();" />
  <div id="map" class="smallmap"></div>
</body>
</html>