OpenLayers3基础教程——OL3 介绍interaction

原创 2015年07月08日 21:29:54

概述:

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




版权声明:本文为LZUGIS原创文章,未经允许不得转载。

相关文章推荐

Openlayers3中如何优雅的表示等值面

等值面,顾名思义,就是值相等的面,在水文或气象中会有很多这样的需求。本文不讲如何做等值面,本文将如何展示等值面。

openlayers3异步调用geojson, Ajax

Load Json <script src="js/

OL3矢量图层样式自定义

本文讲述如何在OL3中加载Geojson并动态修改图层样式。

geotools中等值面的生成与OL3中的展示

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

openlayers3中三种动画实现

一、.在div中使用CSS3动画,以overlay的形式添加 1.先为一个div创建css,我的css不太好,直接引用别人的css.css_animation{ height:50px...

【学习笔记之Openlayers3】要素保存篇(第四篇)

上一篇中已经讲了要素的绘制功能,既然要素都绘制出来了,绘制完就应该保存起来了吧,那么怎么保存呢?这一篇就是讲解怎么保存绘制好的要素的。 个人用到过两种保存要素的方法,一种是通过WFS直接保存要素入库,...

postgres+socket.io+nodejs实时地图应用实践

nodejs一直以异步io著称,其语言特性尤其擅长于在realtime应用中,如聊天室等。在进行实时应用开发时,必不可少的需要用到 socket.io库,可以说,nodejs+socket.io在...

OL3和echart的结合

本文讲述OL3结合echart,实现echart中的炫酷特效。
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)