OpenLayers-控件篇

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  </

转载自:https://blog.csdn.net/xiaohan2826/article/details/49510191

You may also like...