zoukankan      html  css  js  c++  java

  • （转） 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>  

    上述代码效果如下：
  • 相关阅读:
    MonoRail学习Component
    Eclipse中用户库的使用
    ASP.Net2.0中自定义控件在page中的注册
    WF学习Console Workflow Application
    Which Style of Workflow When?[转]
    使用UserControl时，在Page中定义方式
    参数类型异常
    GridView使用一些记录
    在使用Mybatis进行测试时出现报错：Caused by: java.lang.ClassNotFoundException: Cannot find class: Student
    递归反向输出字符串
  • 原文地址：https://www.cnblogs.com/telwanggs/p/6972895.html
Copyright © 2011-2022 走看看