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集

  1. var controls = map.getControls();

添加

  1. map.addControl(ctrl);

删除

  1. map.removeControl(ctrl);

OL3添加control示例：

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

  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. width: 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. width: 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. var zoomToExtentControl = new ol.control.ZoomToExtent({
  68. extent: bounds,
  69. className: 'zoom-to-extent',
  70. tipLabel:"全图"
  71. });
  72. controls.push(zoomToExtentControl);
  73. //比例尺
  74. var scaleLineControl = new ol.control.ScaleLine({});
  75. controls.push(scaleLineControl);
  76. //全图
  77. var fullScreenControl = new ol.control.FullScreen({});
  78. controls.push(fullScreenControl);
  79. //缩放控件
  80. var zoomSliderControl = new ol.control.ZoomSlider({});
  81. controls.push(zoomSliderControl);
  82. var rotate = new ol.control.Rotate({
  83. //              label:"↑",
  84. tipLabel:"重置",
  85. target:document.getElementById('rotation'),
  86. autoHide:false
  87. });
  88. controls.push(rotate);
  89. var untiled = new ol.layer.Image({
  90. source: new ol.source.ImageWMS({
  91. ratio: 1,
  92. url: 'http://localhost:8081/geoserver/lzugis/wms',
  93. params: {'FORMAT': format,
  94. 'VERSION': '1.1.1',
  95. LAYERS: 'lzugis:province',
  96. STYLES: ''
  97. }
  98. })
  99. });
  100. var projection = new ol.proj.Projection({
  101. code: 'EPSG:4326',
  102. units: 'degrees'
  103. });
  104. var map = new ol.Map({
  105. controls: ol.control.defaults({
  106. attribution: false
  107. }).extend(controls),
  108. interactions: ol.interaction.defaults().extend([
  109. new ol.interaction.DragRotateAndZoom()
  110. ]),
  111. target: 'map',
  112. layers: [
  113. untiled
  114. ],
  115. view: new ol.View({
  116. projection: projection,
  117. rotation:-45
  118. })
  119. });
  120. map.getView().fitExtent(bounds, map.getSize());
  121. $("#setRotate").on("click",function(){
  122. var angle = $("#rotate").val();
  123. map.getView().setRotation(angle);
  124. });
  125. }
  126. </script>
  127. </head>
  128. <body onLoad="init()">
  129. <div class="layer-change-switch" id="switch">
  130. <div id="slider">
  131. <input id="rotate" type="text" value="-45" maxlength="10" style="width: 50px;" /><button id="setRotate">旋转</button>
  132. </div>
  133. </div>
  134. <div id="map">
  135. <div id="rotation"></div>
  136. <div id="location"></div>
  137. </div>
  138. </body>
  139. </html>

上述代码效果如下：

（转） OpenLayers3基础教程——OL3 介绍control的更多相关文章

  1. OpenLayers3基础教程——OL3 介绍control

    概述: 本文讲述的是Ol3中的control的介绍和应用. OL2和OL3 control比較: 相比較Ol2的control,OL3显得特别少,下图分别为Ol2和Ol3的control: Ol2的c ...

  2. （转）OpenLayers3基础教程——OL3 介绍interaction

    http://blog.csdn.net/gisshixisheng/article/details/46808647 概述: 本节主要讲述OL3的交互操作interaction,重点介绍draw,s ...

  3. OpenLayers3基础教程——OL3之Popup

    概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用Overlay取代OL2的Popup功能. 接口简单介绍: overlay跟ol.control.Control一样,是一 ...

  4. （转）OpenLayers3基础教程——OL3基本概念

    http://blog.csdn.net/gisshixisheng/article/details/46756275 OpenLayers3基础教程——OL3基本概念 从本节开始,我会陆陆续续的更新 ...

  5. OpenLayers3基础教程——OL3基本概念

    从本节開始,我会陆陆续续的更新有关OL3的相关文章--OpenLayers3基础教程,欢迎大家关注我的博客,同一时候也希望我的博客可以给大家带来一点帮助. 概述: OpenLayers 3对OpenL ...

  6. （转）OpenLayers3基础教程——OL3之Popup

    http://blog.csdn.net/gisshixisheng/article/details/46794813 概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用O ...

  7. ActiveMQ基础教程----简单介绍与基础使用

    概述 ActiveMQ是由Apache出品的,一款最流行的,能力强劲的开源消息总线.ActiveMQ是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现,它非常快速,支持多 ...

  8. Embedded Linux Primer----嵌入式Linux基础教程--章节介绍

    章节介绍 第一章,“导引”,简要介绍了Linux被迅速应用在嵌入式环境的驱动因素,介绍了与嵌入式Linux相关的几个重要的标准和组织. 第二章,“第一个嵌入式经历”,介绍了与后几章所构建的嵌入式Lin ...

  9. （转） OpenLayers3基础教程——加载资源

    概述: 本节讲述如何在Ol3中加载wms图层并显示到地图中. Ol3下载: 你可以在OL官网去下载,下载地址为http://openlayers.org/download/,也可以去我的百度云盘下载, ...

随机推荐

  1. 运维系列之二 Linux文件种类和扩展名

    一.文件种类 1.普通文件 用ls查看文件属性时,显示的是[-] 2.目录文件(directory) 文件属性第一个为[d] 3.连接文件(link) 类似于win下的快捷方式,文件第一个属性为[l] ...

  2. nyoj_171_聪明的kk_201402281518

    聪明的kk时间限制:1000 ms  |  内存限制:65535 KB 难度:3描述 聪明的“KK”非洲某国展馆的设计灵感源于富有传奇色彩的沙漠中陡然起伏的沙丘,体现出本国不断变换和绚丽多彩的自然风光 ...

  3. CF #319 div 2 D

    这道题算不算脑洞题.. 可以发现,当一个排列中有循环节时长度为1或2时可能有解.当为1时,只需把全部点都连到这个题即可,当为2时,就要求所有循环节长度均为偶数,这很容易理解,因为如果存在为奇数,它们之 ...

  4. [Tools] Using colours in a NodeJS terminal - make your output pop

    Use can use colour and styles to make it easy to spot errors and group common functionality into blo ...

  5. 在mac osX下安装openCV，used for python

    OpenCV是个开源的图像处理库,里面的内容多多. 想了解很多其它,请自行百度咯~ 篇blog是记录在mac下.安装openCV.然后使用python来引用openCV库. 环境是: Python 2 ...

  6. 多个结果显示成一个group_concat函数

    需求:获取班级.课程中文名.老师 扩展:一个班级一门课程,老师可能多个,想把多个教师显示成在一个结果里 解决方案:加个group by 参考资料:https://www.cnblogs.com/zhu ...

  7. 飘逸的python - 极简的二叉树前中后序通杀函数

    对于任一结点.能够按某种次序运行三个操作: 訪问结点本身(N) 遍历该结点的左子树(L) 遍历该结点的右子树(R) 用来表示顺序,即,前序NLR/中序LNR/后序LRN. 以下我们用namedtupl ...

  8. iOS刷新某个cell时候crash

    //一个section刷新     NSIndexSet *indexSet=[[NSIndexSet alloc]initWithIndex:2];     [tableview reloadSec ...

  9. hook 鼠标键盘消息实例分析

    1.木马控制及通信方法包含:双管道,port重用.反弹技术.Hook技术,今天重点引用介绍一下hook的使用方法,hook信息后能够将结果发送到hacker邮箱等.实现攻击的目的. 转自:http:/ ...

  10. css3 动态背景

    动态背景 利用多层背景的交替淡入淡出,实现一种背景在不停变换的效果,先看图. 效果图: DEMO地址 步骤 1.利用css的radial-gradient创建一个镜像渐变的背景.当中的80% 20%为 ...