OpenLayers3基础教程——OL3 介绍interaction

lzugis

发布于 2018-10-23 15:08:22

8630

发布于 2018-10-23 15:08:22

文章被收录于专栏：跟牛老师一起学WEBGIS跟牛老师一起学WEBGIS

概述：

本节主要讲述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.

Fires:

drawend (ol.DrawEvent) - Triggered upon feature draw end
drawstart (ol.DrawEvent) - Triggered upon feature draw start

Extends

ol.interaction.Pointer

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

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 this in listener.

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

Name	Type	Description
options	Options.

Extends

ol.interaction.Interaction

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

Name	Type	Description
options	Options.

Extends

ol.interaction.Pointer

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

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 this in listener.

实现实例：

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>

2、select

<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>

3、modify

<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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2015年07月08日，如有侵权请联系 cloudcommunity@tencent.com 删除