生活随笔
收集整理的這篇文章主要介紹了
（转） 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 plaincopy print?
var?controls?=?map.getControls();?? ?
添加
?
[javascript]?view plaincopy print?
map.addControl(ctrl);?? ?
刪除
?
[javascript]?view plaincopy print?
map.removeControl(ctrl);??
OL3添加control示例：
?
下面是一個比較完成的OL3的Control的示例，
?
[html]?view plaincopy print?
<html?xmlns="http://www.w3.org/1999/xhtml">??<head>??????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>??????<title>control</title>??????<link?rel="stylesheet"?type="text/css"?href="http://localhost/ol3/css/ol.css"/>??????<style?type="text/css">??????????body,?#map?{??????????????border:?0px;??????????????margin:?0px;??????????????padding:?0px;??????????????width:?100%;??????????????height:?100%;??????????????font-size:?13px;??????????}??????????#location{??????????????position:?absolute;??????????????bottom:?10px;??????????????left:?45%;??????????????font-weight:?bold;??????????????z-index:?99;??????????}??????????#switch{??????????????position:absolute;??????????????right:20pt;??????????????top:40pt;??????????????z-index:999;??????????}??????????#rotation{??????????????position:?absolute;??????????????top:?10px;??????????????left:?45%;??????????????font-weight:?bold;??????????????z-index:?99;??????????}??????????.ol-zoomslider{??????????????background:?#d0e5f5;??????????????width:?20px;??????????}??????????.zoom-to-extent{??????????????position:?absolute;??????????????top:?5pt;??????????????left:?28pt;??????????}??????????.map-rotate{??????????????position:?absolute;??????????????top:?5pt;??????????????left:?45%;??????????}??????</style>??????<script?type="text/javascript"?src="http://localhost/ol3/build/ol.js"></script>??????<script?type="text/javascript"?src="http://localhost/jquery/jquery-1.8.3.js"></script>??????<script?type="text/javascript">??????????function?init(){??????????????var?format?=?'image/png';??????????????var?bounds?=?[73.4510046356223,?18.1632471876417,??????????????????134.976797646506,?53.5319431522236];??????????????var?controls?=?new?Array();??????????????//鼠標位置??????????????var?mousePositionControl?=?new?ol.control.MousePosition({??????????????????className:?'custom-mouse-position',??????????????????target:?document.getElementById('location'),??????????????????coordinateFormat:?ol.coordinate.createStringXY(5),//保留5位小數??????????????????undefinedHTML:?'?'??????????????});??????????????controls.push(mousePositionControl);????????????????//縮放至范圍??????????????var?zoomToExtentControl?=?new?ol.control.ZoomToExtent({??????????????????extent:?bounds,??????????????????className:?'zoom-to-extent',??????????????????tipLabel:"全圖"??????????????});??????????????controls.push(zoomToExtentControl);????????????????//比例尺??????????????var?scaleLineControl?=?new?ol.control.ScaleLine({});??????????????controls.push(scaleLineControl);????????????????//全圖??????????????var?fullScreenControl?=?new?ol.control.FullScreen({});??????????????controls.push(fullScreenControl);????????????????//縮放控件??????????????var?zoomSliderControl?=?new?ol.control.ZoomSlider({});??????????????controls.push(zoomSliderControl);????????????????var?rotate?=?new?ol.control.Rotate({??//??????????????label:"↑",??????????????????tipLabel:"重置",??????????????????target:document.getElementById('rotation'),??????????????????autoHide:false??????????????});??????????????controls.push(rotate);????????????????var?untiled?=?new?ol.layer.Image({??????????????????source:?new?ol.source.ImageWMS({??????????????????????ratio:?1,??????????????????????url:?'http://localhost:8081/geoserver/lzugis/wms',??????????????????????params:?{'FORMAT':?format,??????????????????????????'VERSION':?'1.1.1',??????????????????????????LAYERS:?'lzugis:province',??????????????????????????STYLES:?''??????????????????????}??????????????????})??????????????});??????????????var?projection?=?new?ol.proj.Projection({??????????????????code:?'EPSG:4326',??????????????????units:?'degrees'??????????????});??????????????var?map?=?new?ol.Map({??????????????????controls:?ol.control.defaults({??????????????????????attribution:?false??????????????????}).extend(controls),??????????????????interactions:?ol.interaction.defaults().extend([??????????????????????new?ol.interaction.DragRotateAndZoom()??????????????????]),??????????????????target:?'map',??????????????????layers:?[??????????????????????untiled??????????????????],??????????????????view:?new?ol.View({??????????????????????projection:?projection,??????????????????????rotation:-45??????????????????})??????????????});??????????????map.getView().fitExtent(bounds,?map.getSize());????????????????$("#setRotate").on("click",function(){??????????????????var?angle?=?$("#rotate").val();??????????????????map.getView().setRotation(angle);??????????????});??????????}??????</script>??</head>??<body?onLoad="init()">??<div?class="layer-change-switch"?id="switch">??????<div?id="slider">??????????<input?id="rotate"?type="text"?value="-45"?maxlength="10"?style="width:?50px;"?/><button?id="setRotate">旋轉</button>??????</div>??</div>??<div?id="map">??????<div?id="rotation"></div>??????<div?id="location"></div>??</div>??</body>??</html>?? ?
上述代碼效果如下：
?
與50位技術專家面對面20年技術見證，附贈技術全景圖
總結
以上是生活随笔為你收集整理的（转） OpenLayers3基础教程——OL3 介绍control的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
