博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

OpenLayers-控件

Posted on 2013-02-17 17:15  marsprj  阅读(11657)  评论(0)  编辑  收藏  举报

OpenLayers带有很多的控件，只需要添加简单的代码，就可以在 OpenLayers上添加控件。
OpenLayers控件位于OpenLayers.Control命令空间下。

1. 图层Switcher控件(Layer Switcher) 
    图层Switcher控件用于切换OpenLayers Map上的图层。Layer Swither的类为：OpenLayers.Control.LayerSwitcher。添加LayerSwitcher的代码为：

map.addControl(new OpenLayers.Control.LayerSwitcher());

2. MousePosition控件
   用于显示当前鼠标所在的地图坐标。如下图右下角红框处为当前鼠标所在位置的地图坐标。
1) 定义显示坐标值的容器
    使用MousePosition控件需要定义显示坐标值的div容器，MousePosition控件会将坐标值写入该div中。

<div id="location">location</div>

 2) 创建MousePosition控件

map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));

 OpenLayers.Control.MousePosition的参数即为前面定义的div的id值。

3. MapScale控件
    用于显示当前地图的显示比例尺。如下图左下角红框处为当前地图的显示比例尺。
1) 定义显示坐标值的容器
    使用MapScale控件需要定义显示内容的div容器，MapScale控件会值写入该div中。
2) 创建MapScale控件

map.addControl(new OpenLayers.Control.Scale($('scale')));

 OpenLayers.Control.Scale的参数即为前面定义的div的id值。

4. PanZoomBar控件

map.addControl(new OpenLayers.Control.PanZoomBar());

 

5.MouseToolbar控件

map.addControl(new OpenLayers.Control.MouseToolbar());

 

6. ScaleLine控件

map.addControl(new OpenLayers.Control.ScaleLine());

 

7.鹰眼控件

map.addControl(new OpenLayers.Control.OverviewMap());

 

 

完整的代码如下

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2 <HTML>
 3  <HEAD>
 4   <TITLE> OpenLayer : Map Controls </TITLE>
 5   <link rel="stylesheet" href="./OpenLayers-2.10/theme/default/style.css" type="text/css" />
 6   <link rel="stylesheet" href="css/style.css" type="text/css" />
 7   <style type="text/css">
 8         #wrapper
 9             {
10                 width: 600px;
11             }
12         #location {
13                 float: right;
14             }
15         #scale {
16                 float: left;
17             }
18   </style>
19   <script src="./OpenLayers-2.10/lib/OpenLayers.js"></script>
20   <script  type="text/javascript">
21     
22     var map = null;
23     var wms_url = "http://192.168.111.156:8080/geoserver/wms?";
24     var wms_layer = "world:country";
25     var wms_format = 'image/png';
26     var wms_version = "1.3.0";
27 
28     function init()
29     {
30         //创建map对象，
31         map = new OpenLayers.Map("map");
32         var layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
33                                              wms_url,
34                                              {
35                                                 layers    : wms_layer, 
36                                                 format    : wms_format,
37                                                 singleTile: true
38                                              });
39         // 添加图层
40         map.addLayer(layer);
41         
42         // 添加Layer Switcher控件
43         map.addControl( new OpenLayers.Control.LayerSwitcher() );
44         // 添加Mouse Position控件
45         map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
46         // 添加Map Scale控件
47         map.addControl(new OpenLayers.Control.Scale($('scale')));
48         // 添加PanZoomBar
49         map.addControl(new OpenLayers.Control.PanZoomBar());
50         map.addControl(new OpenLayers.Control.MouseToolbar());
51         map.addControl(new OpenLayers.Control.Permalink());
52         map.addControl(new OpenLayers.Control.ScaleLine());
53         map.addControl(new OpenLayers.Control.OverviewMap());
54 
55         // 放大到全屏
56         map.zoomToMaxExtent();
57     }
58   </script>
59 
60  </HEAD>
61 
62  <BODY onload="init()">
63     <div>
64       <div id="map" class="smallmap"></div>
65     </div>
66     <div id="wrapper">
67         <div id="location"></div>
68         <div id="scale"></div>
69     </div>
70 
71  </BODY>
72 </HTML>