（转）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/,也可以去我的百度云盘下载, ...

随机推荐

【[Offer收割]编程练习赛14 C】可疑的记录
[题目链接]:http://hihocoder.com/problemset/problem/1507 [题意] [题解] 如果多出来一个的话; 某个人的父亲节点就会变成两个找到有两个父亲节点的人就 ...
【郑轻邀请赛 H】维克兹的进制转换
[题目链接]:https://acm.zzuli.edu.cn/zzuliacm/problem.php?id=2134 [题意] [题解] 设f[i]表示数字i分解为二进制数的方案数; 则如果i为 ...
openstack部署工具简介
个人使用方面DevStack无疑,在可预见的未来时间内,DevStack仍将是众多开发者们的首选安装方式或工具.该方式主要是通过配置参数,执行shell脚本来安装一个OpenStack的开发环境.Gi ...
Windows读取NXP MiFare Ultralight C类型NFC卡片的信息
1,读取我们需要外接一个NFC Reader让Windows可以读取NFC卡片的内容. 因为特殊原因,我们选择了Sony rc-s380 NFC Reader.相关介绍我们需要下载并安装NFC P ...
hdu 4550
c: #include<stdio.h> #include<string.h> #define N 300 int f[N]; char s[N]; int main() { ...
hdu_1014_Uniform Generator_201310141958
Uniform Generator Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
F - True Liars 带权并查集
After having drifted about in a small boat for a couple of days, Akira Crusoe Maeda was finally cast ...
如何重启apache2服务
假设当前Linux用户的apahce安装目录为/usr/local/apache2,那么在命令行终端中使用以下命令启动,停止和重启apache.1. 启动apahce的命令:/usr/local/ap ...
Tween公式
Tween公式 4个参数 t:current time(当前时间) b:beginning value(初始值) c: change in value(变化量) d:duration(持续时间) re ...
CF #321 (Div. 2) D
不说了,爆内存好几次,后来醒起状态有重复... 状压+TSP #include <iostream> #include <cstdio> #include <cstrin ...

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

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

随机推荐

热门专题