码迷，mamicode.com
首页 > 其他好文 > 详细

OpenLayers3基础教程——OL3 介绍interaction

时间：2015-07-08 22:38:24      阅读：1838      评论：0      收藏：0      [点我收藏+]

标签：openlayers3   ol3   draw   select   modify   

概述：

本节主要讲述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:ExtendsMethods
on(type, listener, opt_this){goog.events.Key} inherited
NameTypeDescription
typestring | Array.<string>

The event type or array of event types.

listenerfunction

The listener function.

thisObject

The object to use as this in listener.

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

Options.

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

Options.

NameTypeDescription
ExtendsMethods
on(type, listener, opt_this){goog.events.Key} inherited
NameTypeDescription
typestring | Array.<string>

The event type or array of event types.

listenerfunction

The listener function.

thisObject

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


技术分享

版权声明：本文为博主原创文章，未经博主允许不得转载。

OpenLayers3基础教程——OL3 介绍interaction

标签：openlayers3   ol3   draw   select   modify   

原文地址：http://blog.csdn.net/gisshixisheng/article/details/46808647
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！