您的位置：首页 > 运维架构

OpenLayers-控件篇

2015-10-30 13:25 465 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航