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. Redis学习总结（1）——Redis内存数据库详细教程

    1.redis是什么 2.redis的作者何许人也 3.谁在使用redis 4.学会安装redis 5.学会启动redis 6.使用redis客户端 7.redis数据结构 – 简介 8.redis数 ...

  2. codevs——T1214 线段覆盖

    http://codevs.cn/problem/1214/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Descr ...

  3. MySQL5.7出现无法启动服务等问题

    MySQL5.7版本后有点不同,就是没有DATA文件夹.总是莫名其妙出现一些错误.比如连不上数据库了,出现错误 can't connect mysql on localhost,键入 net star ...

  4. Spring MVC的@RequestMapping多个URL映射到同一个方法

    @RequestMapping可以是一个URL对应一个方法,也可以多个URL对应同一个方法,写法如下: @RequestMapping(value={"url","res ...

  5. 计算两个日期之间相差的年数月数天数(JS实现)

    前言 如何计算年龄?我的第一直觉做法:(当前时间戳 - 出生时的时间戳)/ (365*86400)  所得结果向下取整.后来发现这种做法获得的结果不准确,不是多了一岁就是少了一岁,不能简单粗暴的这么处 ...

  6. 机器学习1k近邻

    自己一直学习计算机视觉方面的东西,现在想学习一下数据挖掘跟搜索引擎,自己基础也有点薄弱,看朱明的那本数据挖掘,只能片面的了解这个数据挖掘.不过最近有一本书 机器学习实战,于是乎通过实战的形式了解一下基 ...

  7. spring mvc dispatcherservlet处理request流程

    1.dispatcherservlet接收到请求后,doDispatch(request,response) 2.doDispatch()里进行handlermapping,handlermappin ...

  8. JMS解决系统间通信问题

    近期在给公司项目做二次重构,将原来庞大的系统拆分成几个小系统.系统与系统之间通过接口调用,系统间通信有非常多方式,如系统间通信接口做成请求controller,只是这样不方便也不安全,经常使用的方式是 ...

  9. web压力測试-Web Bench

    1.web bench下载.地址:http://home.tiscali.cz/~cz210552/webbench.html 2.wen bench安装: [root@web111 tmp]#tar ...

  10. 我对ThreadLocal的理解

    声明:小弟菜狗一个.对ThreadLocal的描写叙述和理解难免有所偏差 近期由于须要深入的了解android的handler消息机制而去查看了Looper的源代码.众所周知在主线程中是不须要在程序猿 ...