（转）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)

Name Type Description

options

Options.

Name	Type	Description

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.

Name	Type	Description

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.

Name	Type	Description

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 介绍interaction的更多相关文章

OpenLayers3基础教程——OL3 介绍control
概述: 本文讲述的是Ol3中的control的介绍和应用. OL2和OL3 control比較: 相比較Ol2的control,OL3显得特别少,下图分别为Ol2和Ol3的control: Ol2的c ...
（转） OpenLayers3基础教程——OL3 介绍control
http://blog.csdn.net/gisshixisheng/article/details/46761535 概述: 本文讲述的是Ol3中的control的介绍和应用. OL2和OL3 co ...
OpenLayers3基础教程——OL3之Popup
概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用Overlay取代OL2的Popup功能. 接口简单介绍: overlay跟ol.control.Control一样,是一 ...
（转）OpenLayers3基础教程——OL3基本概念
http://blog.csdn.net/gisshixisheng/article/details/46756275 OpenLayers3基础教程——OL3基本概念从本节开始,我会陆陆续续的更新 ...
OpenLayers3基础教程——OL3基本概念
从本节開始,我会陆陆续续的更新有关OL3的相关文章--OpenLayers3基础教程,欢迎大家关注我的博客,同一时候也希望我的博客可以给大家带来一点帮助. 概述: OpenLayers 3对OpenL ...
（转）OpenLayers3基础教程——OL3之Popup
http://blog.csdn.net/gisshixisheng/article/details/46794813 概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用O ...
ActiveMQ基础教程----简单介绍与基础使用
概述 ActiveMQ是由Apache出品的,一款最流行的,能力强劲的开源消息总线.ActiveMQ是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现,它非常快速,支持多 ...
Embedded Linux Primer----嵌入式Linux基础教程--章节介绍
章节介绍第一章,“导引”,简要介绍了Linux被迅速应用在嵌入式环境的驱动因素,介绍了与嵌入式Linux相关的几个重要的标准和组织. 第二章,“第一个嵌入式经历”,介绍了与后几章所构建的嵌入式Lin ...
（转） OpenLayers3基础教程——加载资源
概述: 本节讲述如何在Ol3中加载wms图层并显示到地图中. Ol3下载: 你可以在OL官网去下载,下载地址为http://openlayers.org/download/,也可以去我的百度云盘下载, ...

随机推荐

【郑轻邀请赛 A】tmk射气球
[题目链接]:https://acm.zzuli.edu.cn/zzuliacm/problem.php?id=2127 [题意] [题解] 把气球和飞艇所代表的直线投影到xoy面上设气球所在位置为 ...
hdu_1040_As Easy As A+B_201308191751
As Easy As A+B Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
Hibernate 之QBC
转自:http://blog.csdn.net/agromach/article/details/1932290 一.Hibernate 中聚合函数的使用 Criteria接口的Projections ...
MDA模型定义及扩展
Tiny框架中.对模型本向没有不论什么强制性约束,也就是说你能够把不论什么类型的对象作为模型.也不必实现不论什么接口. 因此简单的说,你定义一个类.里面有一些描写叙述业务属性或处理的内容,就能够说它是 ...
菜鸟学Java（二十二）——又一次认识泛型
泛型是Java SE 1.5的新特性,泛型的本质是參数化类型,也就是说所操作的数据类型被指定为一个參数.这样的參数类型能够用在类.接口和方法的创建中,分别称为泛型类.泛型接口.泛型方法. Java语言 ...
Ural 1353 Milliard Vasya's Function（DP）
题目地址:Ural 1353 定义dp[i][j].表示当前位数为i位时,各位数和为j的个数. 对于第i位数来说.总能够看成在前i-1位后面加上一个0~9.所以状态转移方程就非常easy出来了: dp ...
HotSpotVM 线程实现浅析
今天来看下HotSpotVM在Linux下的线程模型. Thread.start HotSpot Runtime Overview 中说道, There are two basic ways for ...
iOS 图像处理－图像拼接
解决这个问题:将两个图像拼接在一起前提:须要加入Framework:CoreGraphics.framework 源代码: - (UIImage *) combine:(UIImage*)leftI ...
K度限制MST poj 1639
/* k度限制MST:有一个点的度<=k的MST poj 1639 要求1号点的度不超过k 求MST 我们先把1号点扔掉跑MST 假设有sum个连通分支然后把这sum个分支连到1上就得到了 ...
oc26--Property,省略setget的声明
// // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject { int _age; } /* ...

（转）OpenLayers3基础教程——OL3 介绍interaction

（转）OpenLayers3基础教程——OL3 介绍interaction的更多相关文章

随机推荐

热门专题