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" /> <!-- * Author: zha zhuhua * Date : 2009-01-13 * Email : zhuhuazha@gmail.com --> <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> <script src="http://openlayers.org/dev/OpenLayers.js"></script> <script type="text/javascript"> var map; var gAttributionControl=null; function init(){ map = new OpenLayers.Map('map'); var timestamp = '当前时间是:'+Date(); 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 οnlοad="init()"> <h3 id="title"> Text Control ( encode: utf8 ) </h3> <p id="shortdesc"> 用Attribution控件显示文字内容,变化体现在秒数上。 文字位置由CSS控制。 </p> <p> 实验效果需要联网。 </p> <input type="button" title="注意秒数变化" value="内容变换:秒" οnclick="drawScaleHelper();" /> <div id="map" class="smallmap"></div> </body> </html>
|