（转）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>  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/telwanggs/p/6972914.html