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 </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>
總結
以上是生活随笔為你收集整理的OpenLayers控件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Syncthing – 数据同步利器--
- 下一篇： python-opencv-视频的简单合