概述:
本节主要讲述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)
Name | Type | Description | |||
---|---|---|---|---|---|
options |
Options.
|
drawend
(ol.DrawEvent) - Triggered upon feature draw enddrawstart
(ol.DrawEvent) - Triggered upon feature draw startName | Type | Description |
---|---|---|
type |
string | Array.<string> | The event type or array of event types. |
listener |
function | The listener function. |
this |
Object | The object to use as |
Name | Type | Description | |||
---|---|---|---|---|---|
options |
Options.
|
Name | Type | Description | |||
---|---|---|---|---|---|
options |
Options.
|
Name | Type | Description |
---|---|---|
type |
string | Array.<string> | The event type or array of event types. |
listener |
function | The listener function. |
this |
Object | The object to use as |
实现实例:
1、draw
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ol3 draw</title> <link rel="stylesheet" type="text/css" href="http://localhost/ol3/css/ol.css"/> <style type="text/css"> body, #map { border: 0px; margin: 0px; padding: 0px; width: 100%; height: 100%; font-size: 13px; } .form-inline{ position: absolute; top: 10pt; right: 10pt; z-index: 99; } </style> <script type="text/javascript" src="http://localhost/ol3/build/ol.js"></script> <script type="text/javascript" src="http://localhost/jquery/jquery-1.8.3.js"></script> <script type="text/javascript"> function init(){ var format = 'image/png'; var bounds = [73.4510046356223, 18.1632471876417, 134.976797646506, 53.5319431522236]; var untiled = new ol.layer.Image({ source: new ol.source.ImageWMS({ ratio: 1, url: 'http://localhost:8081/geoserver/lzugis/wms', params: {'FORMAT': format, 'VERSION': '1.1.1', LAYERS: 'lzugis:province', STYLES: '' } }) }); var projection = new ol.proj.Projection({ code: 'EPSG:4326', units: 'degrees' }); var map = new ol.Map({ controls: ol.control.defaults({ attribution: false }), target: 'map', layers: [ untiled ], view: new ol.View({ projection: projection }) }); map.getView().fitExtent(bounds, map.getSize()); var source = new ol.source.Vector(); var vector = new ol.layer.Vector({ source: source, style: new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(255, 0, 0, 0.2)' }), stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }), image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: '#ffcc33' }) }) }) }); map.addLayer(vector); var typeSelect = document.getElementById('type'); var draw; // global so we can remove it later function addInteraction() { var value = typeSelect.value; if (value !== 'None') { draw = new ol.interaction.Draw({ source: source, type: /** @type {ol.geom.GeometryType} */ (value) }); map.addInteraction(draw); } } /** * Let user change the geometry type. * @param {Event} e Change event. */ typeSelect.onchange = function(e) { map.removeInteraction(draw); addInteraction(); }; addInteraction(); } </script> </head> <body onLoad="init()"> <div id="map"> <form class="form-inline"> <label>选择绘制类型:</label> <select id="type"> <option value="None">None</option> <option value="Point">点</option> <option value="LineString">线</option> <option value="Polygon">多边形</option> </select> </form> </div> </body> </html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ol3 select</title> <link rel="stylesheet" type="text/css" href="http://localhost/ol3/css/ol.css"/> <style type="text/css"> body, #map { border: 0px; margin: 0px; padding: 0px; width: 100%; height: 100%; font-size: 13px; } .form-inline{ position: absolute; top: 10pt; right: 10pt; z-index: 99; } </style> <script type="text/javascript" src="http://localhost/ol3/build/ol.js"></script> <script type="text/javascript" src="http://localhost/jquery/jquery-1.8.3.js"></script> <script type="text/javascript"> var point = "POINT(103.584297498027 36.119086450265)"; var line = "MULTILINESTRING((106.519115206186 36.119086450265,108.967127809811 36.5936423859273))"; var polygon = "MULTIPOLYGON(((106.519115206186 29.4789248520356,108.967127809811 34.2761116373967,113.226682886935 23.1830703234799)))"; var wkts = [point, line, polygon]; var wktformat = new ol.format.WKT(); function init(){ var format = 'image/png'; var bounds = [73.4510046356223, 18.1632471876417, 134.976797646506, 53.5319431522236]; var untiled = new ol.layer.Image({ source: new ol.source.ImageWMS({ ratio: 1, url: 'http://localhost:8081/geoserver/lzugis/wms', params: {'FORMAT': format, 'VERSION': '1.1.1', LAYERS: 'lzugis:province', STYLES: '' } }) }); var projection = new ol.proj.Projection({ code: 'EPSG:4326', units: 'degrees' }); var features = new Array(); for(var i=0;i<wkts.length;i++){ var feature = wktformat.readFeature(wkts[i]); feature.getGeometry().transform('EPSG:4326', 'EPSG:4326'); features.push(feature); } var vector = new ol.layer.Vector({ source: new ol.source.Vector({ features: features }), style: new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(255, 0, 0, 0.2)' }), stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }), image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: '#ffcc33' }) }) }) }); var map = new ol.Map({ controls: ol.control.defaults({ attribution: false }), target: 'map', layers: [ untiled, vector ], view: new ol.View({ projection: projection }) }); map.getView().fitExtent(bounds, map.getSize()); //选择对象 var select = null; // ref to currently selected interaction // select interaction working on "singleclick" var selectSingleClick = new ol.interaction.Select(); // select interaction working on "click" var selectClick = new ol.interaction.Select({ condition: ol.events.condition.click }); // select interaction working on "mousemove" var selectMouseMove = new ol.interaction.Select({ condition: ol.events.condition.mouseMove }); var selectElement = document.getElementById('selecttype'); var changeInteraction = function() { if (select !== null) { map.removeInteraction(select); } var value = selectElement.value; if (value == 'singleclick') { select = selectSingleClick; } else if (value == 'click') { select = selectClick; } else if (value == 'mousemove') { select = selectMouseMove; } else { select = null; } if (select !== null) { map.addInteraction(select); } }; /** * onchange callback on the select element. */ selectElement.onchange = changeInteraction; changeInteraction(); } </script> </head> <body onLoad="init()"> <div id="map"> <form class="form-inline"> <label>选择高亮方式:</label> <select id="selecttype"> <option value="none" selected>None</option> <option value="singleclick">单击</option> <option value="click">点击</option> <option value="mousemove">鼠标经过</option> </select> </form> </div> </body> </html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ol3 modify</title> <link rel="stylesheet" type="text/css" href="http://localhost/ol3/css/ol.css"/> <style type="text/css"> body, #map { border: 0px; margin: 0px; padding: 0px; width: 100%; height: 100%; font-size: 13px; } </style> <script type="text/javascript" src="http://localhost/ol3/build/ol.js"></script> <script type="text/javascript" src="http://localhost/jquery/jquery-1.8.3.js"></script> <script type="text/javascript"> var point = "POINT(103.584297498027 36.119086450265)"; var line = "MULTILINESTRING((106.519115206186 36.119086450265,108.967127809811 36.5936423859273))"; var polygon = "MULTIPOLYGON(((106.519115206186 29.4789248520356,108.967127809811 34.2761116373967,113.226682886935 23.1830703234799)))"; var wkts = [point, line, polygon]; var wktformat = new ol.format.WKT(); function init(){ var format = 'image/png'; var bounds = [73.4510046356223, 18.1632471876417, 134.976797646506, 53.5319431522236]; var untiled = new ol.layer.Image({ source: new ol.source.ImageWMS({ ratio: 1, url: 'http://localhost:8081/geoserver/lzugis/wms', params: {'FORMAT': format, 'VERSION': '1.1.1', LAYERS: 'lzugis:province', STYLES: '' } }) }); var projection = new ol.proj.Projection({ code: 'EPSG:4326', units: 'degrees' }); var features = new Array(); for(var i=0;i<wkts.length;i++){ var feature = wktformat.readFeature(wkts[i]); feature.getGeometry().transform('EPSG:4326', 'EPSG:4326'); features.push(feature); } var vector = new ol.layer.Vector({ source: new ol.source.Vector({ features: features }), style: new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(255, 0, 0, 0.2)' }), stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }), image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: '#ffcc33' }) }) }) }); var select = new ol.interaction.Select(); var modify = new ol.interaction.Modify({ features: select.getFeatures() }); vector.on("afterfeaturemodified",function(evt){ console.log(evt); }); var map = new ol.Map({ interactions: ol.interaction.defaults().extend([select, modify]), controls: ol.control.defaults({ attribution: false }), target: 'map', layers: [ untiled, vector ], view: new ol.View({ projection: projection }) }); map.getView().fitExtent(bounds, map.getSize()); } </script> </head> <body onLoad="init()"> <div id="map"> </div> </body> </html>
OpenLayers3基础教程——OL3基本概念
OpenLayers3基础教程——加载资源
OpenLayers3基础教程——OL3 介绍control
OpenLayers3基础教程——OL3之Popup