（转） OpenLayers3基础教程——OL3 介绍control

http://blog.csdn.net/gisshixisheng/article/details/46761535

概述：

本文讲述的是Ol3中的control的介绍和应用。

OL2和OL3 control比较：

相比较Ol2的control，OL3显得特别少，下图分别为Ol2和Ol3的control：

Ol2的control

Ol3的control

相比较Ol2，OL3保留了mouseposition，scaleline，zoom，zoomslider，而将很多东西例如draw等转移到了interaction下面，下图为Ol3的interaction：

OL3中control的常用操作：

Ol3中control的常用操作包括获取control集，添加，删除。

获取control集

[javascript] view plain copy
 
 print?
  1. var controls = map.getControls();  

添加

[javascript] view plain copy
 
 print?
  1. map.addControl(ctrl);  

删除

[javascript] view plain copy
 
 print?
  1. map.removeControl(ctrl);  


OL3添加control示例：

下面是一个比较完成的OL3的Control的示例，

[html] view plain copy
 
 print?
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4.     <title>control</title>  
  5.     <link rel="stylesheet" type="text/css" href="http://localhost/ol3/css/ol.css"/>  
  6.     <style type="text/css">  
  7.         body, #map {  
  8.             border: 0px;  
  9.             margin: 0px;  
  10.             padding: 0px;  
  11.              100%;  
  12.             height: 100%;  
  13.             font-size: 13px;  
  14.         }  
  15.         #location{  
  16.             position: absolute;  
  17.             bottom: 10px;  
  18.             left: 45%;  
  19.             font-weight: bold;  
  20.             z-index: 99;  
  21.         }  
  22.         #switch{  
  23.             position:absolute;  
  24.             right:20pt;  
  25.             top:40pt;  
  26.             z-index:999;  
  27.         }  
  28.         #rotation{  
  29.             position: absolute;  
  30.             top: 10px;  
  31.             left: 45%;  
  32.             font-weight: bold;  
  33.             z-index: 99;  
  34.         }  
  35.         .ol-zoomslider{  
  36.             background: #d0e5f5;  
  37.              20px;  
  38.         }  
  39.         .zoom-to-extent{  
  40.             position: absolute;  
  41.             top: 5pt;  
  42.             left: 28pt;  
  43.         }  
  44.         .map-rotate{  
  45.             position: absolute;  
  46.             top: 5pt;  
  47.             left: 45%;  
  48.         }  
  49.     </style>  
  50.     <script type="text/javascript" src="http://localhost/ol3/build/ol.js"></script>  
  51.     <script type="text/javascript" src="http://localhost/jquery/jquery-1.8.3.js"></script>  
  52.     <script type="text/javascript">  
  53.         function init(){  
  54.             var format = 'image/png';  
  55.             var bounds = [73.4510046356223, 18.1632471876417,  
  56.                 134.976797646506, 53.5319431522236];  
  57.             var controls = new Array();  
  58.             //鼠标位置  
  59.             var mousePositionControl = new ol.control.MousePosition({  
  60.                 className: 'custom-mouse-position',  
  61.                 target: document.getElementById('location'),  
  62.                 coordinateFormat: ol.coordinate.createStringXY(5),//保留5位小数  
  63.                 undefinedHTML: ' '  
  64.             });  
  65.             controls.push(mousePositionControl);  
  66.   
  67.             //缩放至范围  
  68.             var zoomToExtentControl = new ol.control.ZoomToExtent({  
  69.                 extent: bounds,  
  70.                 className: 'zoom-to-extent',  
  71.                 tipLabel:"全图"  
  72.             });  
  73.             controls.push(zoomToExtentControl);  
  74.   
  75.             //比例尺  
  76.             var scaleLineControl = new ol.control.ScaleLine({});  
  77.             controls.push(scaleLineControl);  
  78.   
  79.             //全图  
  80.             var fullScreenControl = new ol.control.FullScreen({});  
  81.             controls.push(fullScreenControl);  
  82.   
  83.             //缩放控件  
  84.             var zoomSliderControl = new ol.control.ZoomSlider({});  
  85.             controls.push(zoomSliderControl);  
  86.   
  87.             var rotate = new ol.control.Rotate({  
  88. //              label:"↑",  
  89.                 tipLabel:"重置",  
  90.                 target:document.getElementById('rotation'),  
  91.                 autoHide:false  
  92.             });  
  93.             controls.push(rotate);  
  94.   
  95.             var untiled = new ol.layer.Image({  
  96.                 source: new ol.source.ImageWMS({  
  97.                     ratio: 1,  
  98.                     url: 'http://localhost:8081/geoserver/lzugis/wms',  
  99.                     params: {'FORMAT': format,  
  100.                         'VERSION': '1.1.1',  
  101.                         LAYERS: 'lzugis:province',  
  102.                         STYLES: ''  
  103.                     }  
  104.                 })  
  105.             });  
  106.             var projection = new ol.proj.Projection({  
  107.                 code: 'EPSG:4326',  
  108.                 units: 'degrees'  
  109.             });  
  110.             var map = new ol.Map({  
  111.                 controls: ol.control.defaults({  
  112.                     attribution: false  
  113.                 }).extend(controls),  
  114.                 interactions: ol.interaction.defaults().extend([  
  115.                     new ol.interaction.DragRotateAndZoom()  
  116.                 ]),  
  117.                 target: 'map',  
  118.                 layers: [  
  119.                     untiled  
  120.                 ],  
  121.                 view: new ol.View({  
  122.                     projection: projection,  
  123.                     rotation:-45  
  124.                 })  
  125.             });  
  126.             map.getView().fitExtent(bounds, map.getSize());  
  127.   
  128.             $("#setRotate").on("click",function(){  
  129.                 var angle = $("#rotate").val();  
  130.                 map.getView().setRotation(angle);  
  131.             });  
  132.         }  
  133.     </script>  
  134. </head>  
  135. <body onLoad="init()">  
  136. <div class="layer-change-switch" id="switch">  
  137.     <div id="slider">  
  138.         <input id="rotate" type="text" value="-45" maxlength="10" style=" 50px;" /><button id="setRotate">旋转</button>  
  139.     </div>  
  140. </div>  
  141. <div id="map">  
  142.     <div id="rotation"></div>  
  143.     <div id="location"></div>  
  144. </div>  
  145. </body>  
  146. </html>  

上述代码效果如下：

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/telwanggs/p/6972895.html