zoukankan      html  css  js  c++  java

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

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

    概述：

    本节主要讲述OL3的交互操作interaction，重点介绍draw，select以及modify。

    接口说明：

    OL3的interaction继承自ol.interaction.defaults，下面实现了以下几中交互操作：

    创建方式为：

    var interaction = new ol.interaction.InteractionType({options});
    添加和移除方式为：
    map.addInteraction(draw);
    map.removeInteraction(draw);
    1、draw
    ol.interaction.Draw
    new ol.interaction.Draw(options)

    NameTypeDescription
    options

    Options.

    NameTypeDescription

    Fires:

    Extends

    Methods
    on(type, listener, opt_this){goog.events.Key} inherited

    NameTypeDescription
    type string | Array.<string>

    The event type or array of event types.
    listener function

    The listener function.
    this Object

    The object to use as this in listener.

    2、select
    ol.interaction.Select
    new ol.interaction.Select(opt_options)

    NameTypeDescription
    options

    Options.

    NameTypeDescription

    Extends

    Methods
    getFeatures(){ol.Collection.<ol.Feature>}
    3、modify
    ol.interaction.Modify
    new ol.interaction.Modify(options)

    NameTypeDescription
    options

    Options.

    NameTypeDescription

    Extends

    Methods
    on(type, listener, opt_this){goog.events.Key} inherited

    NameTypeDescription
    type string | Array.<string>

    The event type or array of event types.
    listener function

    The listener function.
    this Object

    The object to use as this in listener.

    实现实例：

    1、draw

    [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>Ol3 draw</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.         .form-inline{  
    16.             position: absolute;  
    17.             top: 10pt;  
    18.             right: 10pt;  
    19.             z-index: 99;  
    20.         }  
    21.     </style>  
    22.     <script type="text/javascript" src="http://localhost/ol3/build/ol.js"></script>  
    23.     <script type="text/javascript" src="http://localhost/jquery/jquery-1.8.3.js"></script>  
    24.     <script type="text/javascript">  
    25.         function init(){  
    26.             var format = 'image/png';  
    27.             var bounds = [73.4510046356223, 18.1632471876417,  
    28.                 134.976797646506, 53.5319431522236];  
    29.             var untiled = new ol.layer.Image({  
    30.                 source: new ol.source.ImageWMS({  
    31.                     ratio: 1,  
    32.                     url: 'http://localhost:8081/geoserver/lzugis/wms',  
    33.                     params: {'FORMAT': format,  
    34.                         'VERSION': '1.1.1',  
    35.                         LAYERS: 'lzugis:province',  
    36.                         STYLES: ''  
    37.                     }  
    38.                 })  
    39.             });  
    40.             var projection = new ol.proj.Projection({  
    41.                 code: 'EPSG:4326',  
    42.                 units: 'degrees'  
    43.             });  
    44.             var map = new ol.Map({  
    45.                 controls: ol.control.defaults({  
    46.                     attribution: false  
    47.                 }),  
    48.                 target: 'map',  
    49.                 layers: [  
    50.                     untiled  
    51.                 ],  
    52.                 view: new ol.View({  
    53.                     projection: projection  
    54.                 })  
    55.             });  
    56.             map.getView().fitExtent(bounds, map.getSize());  
    57.   
    58.             var source = new ol.source.Vector();  
    59.             var vector = new ol.layer.Vector({  
    60.                 source: source,  
    61.                 style: new ol.style.Style({  
    62.                     fill: new ol.style.Fill({  
    63.                         color: 'rgba(255, 0, 0, 0.2)'  
    64.                     }),  
    65.                     stroke: new ol.style.Stroke({  
    66.                         color: '#ffcc33',  
    67.                          2  
    68.                     }),  
    69.                     image: new ol.style.Circle({  
    70.                         radius: 7,  
    71.                         fill: new ol.style.Fill({  
    72.                             color: '#ffcc33'  
    73.                         })  
    74.                     })  
    75.                 })  
    76.             });  
    77.   
    78.             map.addLayer(vector);  
    79.             var typeSelect = document.getElementById('type');  
    80.             var draw; // global so we can remove it later  
    81.             function addInteraction() {  
    82.                 var value = typeSelect.value;  
    83.                 if (value !== 'None') {  
    84.                     draw = new ol.interaction.Draw({  
    85.                         source: source,  
    86.                         type: /** @type {ol.geom.GeometryType} */ (value)  
    87.                     });  
    88.                     map.addInteraction(draw);  
    89.                 }  
    90.             }  
    91.   
    92.   
    93.             /**  
    94.              * Let user change the geometry type.  
    95.              * @param {Event} e Change event.  
    96.              */  
    97.             typeSelect.onchange = function(e) {  
    98.                 map.removeInteraction(draw);  
    99.                 addInteraction();  
    100.             };  
    101.   
    102.             addInteraction();  
    103.         }  
    104.     </script>  
    105. </head>  
    106. <body onLoad="init()">  
    107. <div id="map">  
    108.     <form class="form-inline">  
    109.         <label>选择绘制类型：</label>  
    110.         <select id="type">  
    111.             <option value="None">None</option>  
    112.             <option value="Point">点</option>  
    113.             <option value="LineString">线</option>  
    114.             <option value="Polygon">多边形</option>  
    115.         </select>  
    116.     </form>  
    117. </div>  
    118. </body>  
    119. </html>  


    2、select

    [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>Ol3 select</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.         .form-inline{  
    16.             position: absolute;  
    17.             top: 10pt;  
    18.             right: 10pt;  
    19.             z-index: 99;  
    20.         }  
    21.     </style>  
    22.     <script type="text/javascript" src="http://localhost/ol3/build/ol.js"></script>  
    23.     <script type="text/javascript" src="http://localhost/jquery/jquery-1.8.3.js"></script>  
    24.     <script type="text/javascript">  
    25.         var point = "POINT(103.584297498027 36.119086450265)";  
    26.         var line = "MULTILINESTRING((106.519115206186 36.119086450265,108.967127809811 36.5936423859273))";  
    27.         var polygon = "MULTIPOLYGON(((106.519115206186 29.4789248520356,108.967127809811 34.2761116373967,113.226682886935 23.1830703234799)))";  
    28.         var wkts = [point, line, polygon];  
    29.         var wktformat = new ol.format.WKT();  
    30.         function init(){  
    31.             var format = 'image/png';  
    32.             var bounds = [73.4510046356223, 18.1632471876417,  
    33.                 134.976797646506, 53.5319431522236];  
    34.             var untiled = new ol.layer.Image({  
    35.                 source: new ol.source.ImageWMS({  
    36.                     ratio: 1,  
    37.                     url: 'http://localhost:8081/geoserver/lzugis/wms',  
    38.                     params: {'FORMAT': format,  
    39.                         'VERSION': '1.1.1',  
    40.                         LAYERS: 'lzugis:province',  
    41.                         STYLES: ''  
    42.                     }  
    43.                 })  
    44.             });  
    45.             var projection = new ol.proj.Projection({  
    46.                 code: 'EPSG:4326',  
    47.                 units: 'degrees'  
    48.             });  
    49.             var features = new Array();  
    50.             for(var i=0;i<wkts.length;i++){  
    51.                 var feature = wktformat.readFeature(wkts[i]);  
    52.                 feature.getGeometry().transform('EPSG:4326', 'EPSG:4326');  
    53.                 features.push(feature);  
    54.             }  
    55.   
    56.             var vector = new ol.layer.Vector({  
    57.                 source: new ol.source.Vector({  
    58.                     features: features  
    59.                 }),  
    60.                 style: new ol.style.Style({  
    61.                     fill: new ol.style.Fill({  
    62.                         color: 'rgba(255, 0, 0, 0.2)'  
    63.                     }),  
    64.                     stroke: new ol.style.Stroke({  
    65.                         color: '#ffcc33',  
    66.                          2  
    67.                     }),  
    68.                     image: new ol.style.Circle({  
    69.                         radius: 7,  
    70.                         fill: new ol.style.Fill({  
    71.                             color: '#ffcc33'  
    72.                         })  
    73.                     })  
    74.                 })  
    75.             });  
    76.             var map = new ol.Map({  
    77.                 controls: ol.control.defaults({  
    78.                     attribution: false  
    79.                 }),  
    80.                 target: 'map',  
    81.                 layers: [  
    82.                     untiled, vector  
    83.                 ],  
    84.                 view: new ol.View({  
    85.                     projection: projection  
    86.                 })  
    87.             });  
    88.             map.getView().fitExtent(bounds, map.getSize());  
    89.   
    90.             //选择对象  
    91.             var select = null;  // ref to currently selected interaction  
    92.             // select interaction working on "singleclick"  
    93.             var selectSingleClick = new ol.interaction.Select();  
    94.             // select interaction working on "click"  
    95.             var selectClick = new ol.interaction.Select({  
    96.                 condition: ol.events.condition.click  
    97.             });  
    98.             // select interaction working on "mousemove"  
    99.             var selectMouseMove = new ol.interaction.Select({  
    100.                 condition: ol.events.condition.mouseMove  
    101.             });  
    102.             var selectElement = document.getElementById('selecttype');  
    103.             var changeInteraction = function() {  
    104.                 if (select !== null) {  
    105.                     map.removeInteraction(select);  
    106.                 }  
    107.                 var value = selectElement.value;  
    108.                 if (value == 'singleclick') {  
    109.                     select = selectSingleClick;  
    110.                 } else if (value == 'click') {  
    111.                     select = selectClick;  
    112.                 } else if (value == 'mousemove') {  
    113.                     select = selectMouseMove;  
    114.                 } else {  
    115.                     select = null;  
    116.                 }  
    117.                 if (select !== null) {  
    118.                     map.addInteraction(select);  
    119.                 }  
    120.             };  
    121.             /**  
    122.              * onchange callback on the select element.  
    123.              */  
    124.             selectElement.onchange = changeInteraction;  
    125.             changeInteraction();  
    126.         }  
    127.     </script>  
    128. </head>  
    129. <body onLoad="init()">  
    130. <div id="map">  
    131.     <form class="form-inline">  
    132.         <label>选择高亮方式：</label>  
    133.         <select id="selecttype">  
    134.             <option value="none" selected>None</option>  
    135.             <option value="singleclick">单击</option>  
    136.             <option value="click">点击</option>  
    137.             <option value="mousemove">鼠标经过</option>  
    138.         </select>  
    139.     </form>  
    140. </div>  
    141. </body>  
    142. </html>  


    3、modify

    [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>Ol3 modify</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.     </style>  
      16.     <script type="text/javascript" src="http://localhost/ol3/build/ol.js"></script>  
      17.     <script type="text/javascript" src="http://localhost/jquery/jquery-1.8.3.js"></script>  
      18.     <script type="text/javascript">  
      19.         var point = "POINT(103.584297498027 36.119086450265)";  
      20.         var line = "MULTILINESTRING((106.519115206186 36.119086450265,108.967127809811 36.5936423859273))";  
      21.         var polygon = "MULTIPOLYGON(((106.519115206186 29.4789248520356,108.967127809811 34.2761116373967,113.226682886935 23.1830703234799)))";  
      22.         var wkts = [point, line, polygon];  
      23.         var wktformat = new ol.format.WKT();  
      24.         function init(){  
      25.             var format = 'image/png';  
      26.             var bounds = [73.4510046356223, 18.1632471876417,  
      27.                 134.976797646506, 53.5319431522236];  
      28.             var untiled = new ol.layer.Image({  
      29.                 source: new ol.source.ImageWMS({  
      30.                     ratio: 1,  
      31.                     url: 'http://localhost:8081/geoserver/lzugis/wms',  
      32.                     params: {'FORMAT': format,  
      33.                         'VERSION': '1.1.1',  
      34.                         LAYERS: 'lzugis:province',  
      35.                         STYLES: ''  
      36.                     }  
      37.                 })  
      38.             });  
      39.             var projection = new ol.proj.Projection({  
      40.                 code: 'EPSG:4326',  
      41.                 units: 'degrees'  
      42.             });  
      43.             var features = new Array();  
      44.             for(var i=0;i<wkts.length;i++){  
      45.                 var feature = wktformat.readFeature(wkts[i]);  
      46.                 feature.getGeometry().transform('EPSG:4326', 'EPSG:4326');  
      47.                 features.push(feature);  
      48.             }  
      49.   
      50.             var vector = new ol.layer.Vector({  
      51.                 source: new ol.source.Vector({  
      52.                     features: features  
      53.                 }),  
      54.                 style: new ol.style.Style({  
      55.                     fill: new ol.style.Fill({  
      56.                         color: 'rgba(255, 0, 0, 0.2)'  
      57.                     }),  
      58.                     stroke: new ol.style.Stroke({  
      59.                         color: '#ffcc33',  
      60.                          2  
      61.                     }),  
      62.                     image: new ol.style.Circle({  
      63.                         radius: 7,  
      64.                         fill: new ol.style.Fill({  
      65.                             color: '#ffcc33'  
      66.                         })  
      67.                     })  
      68.                 })  
      69.             });  
      70.   
      71.             var select = new ol.interaction.Select();  
      72.             var modify = new ol.interaction.Modify({  
      73.                 features: select.getFeatures()  
      74.             });  
      75.             vector.on("afterfeaturemodified",function(evt){  
      76.                 console.log(evt);  
      77.             });  
      78.             var map = new ol.Map({  
      79.                 interactions: ol.interaction.defaults().extend([select, modify]),  
      80.                 controls: ol.control.defaults({  
      81.                     attribution: false  
      82.                 }),  
      83.                 target: 'map',  
      84.                 layers: [  
      85.                     untiled, vector  
      86.                 ],  
      87.                 view: new ol.View({  
      88.                     projection: projection  
      89.                 })  
      90.             });  
      91.             map.getView().fitExtent(bounds, map.getSize());  
      92.         }  
      93.     </script>  
      94. </head>  
      95. <body onLoad="init()">  
      96. <div id="map">  
      97. </div>  
      98. </body>  
      99. </html>  
  • 相关阅读:
    堆排序算法
    归并排序的递归算法与非递归
    二叉排序树（BST）的建立
    枚举排列的两种常见方法
    UVa 439骑士的移动（BFS）
    UVa 二叉树重建(先序+中序求后序)
    UVa 四叉树
    UVa 10562看图写树（二叉树遍历）
    JDBC（6）事务处理&批量处理
    JDBC（5）ResSetMetaData&DatabaseMetaData&获取数据库主键的值
  • 原文地址：https://www.cnblogs.com/telwanggs/p/6972914.html
Copyright © 2011-2022 走看看