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

随机推荐

Html学习总结（2）——Html页面head标签元素的意义和应用场景
相信在html5之前,很少人会关注html页面上head里标签元素的定义和应用场景,可能记得住的只有"title"."keyword"和"descri ...
[转]wcf系列学习——服务托管
今天是系列的终结篇,当然要分享一下wcf的托管方面的知识. wcf中托管服务一般有一下四种: Console寄宿: 利于开发调试,但不是生产环境中的最佳实践. winform寄 ...
DATASNAP中间件调用带OUTPUT参数的存储过程
服务端: function TServerMethods1.spExecOut(funcId, sqlId, inParams: OleVariant): OleVariant;var d: Tfrm ...
[csdn markdown]使用摘记一源码高亮及图片上传和链接
本文主要内容是体验csdn markdown的代码块高亮显示和图片链接及上传. 图片上传上边这是标题行.仅仅须要使用一个#就能够表示.几个表示是几级标题图片上传本地图片上传控件本地图片上传方式 ...
整理100道 .net面试题
前段时间,我在准备面试的时搜到的一套 net开发人员面试题,感觉比较全面,一直保存在草稿,刚在整理后台时翻了出来,干脆就发出来好了,以备不时之需. 1. .NET和C#有什么区别答:.NET一般指 ...
如何杀掉(kill)Oracle中的会话(Session)
Oracle中造成一些表被死锁或者会话异常退出,如执行了更新记录操作后,既没有commit也没有rollback,网络就断开了,也会造表或记录被锁住,待到超时后才会被解开,那样都会造成应用操作被阻塞. ...
ledisDB底层实现——本质上就是用leveldb这样的底层存储，和ssdb一样，meta里存的是hash、list等的元数据
Hash hash可以算是一种两级kv,首先通过key找到一个hash对象,然后再通过field找到或者设置相应的值. 在ledisdb里面,我们需要将key跟field关联成一个key,用来存放或者 ...
bzoj 1093 [ ZJOI 2007 ] 最大半连通子图 —— 拓扑+DP
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1093 先缩点,然后就是找最长链,DP一下即可: 注意缩点后的重边!会导致重复计算答案. 代码 ...
洛谷 P3515 [ POI 2011 ] Lightning Conductor —— 决策单调性DP
题目:https://www.luogu.org/problemnew/show/P3515 决策单调性... 参考TJ:https://www.cnblogs.com/CQzhangyu/p/725 ...
ArrayList 扩容原理
面试中经常问到的问题之一就是List的扩容机制了,他是怎么做到扩容的,大家都能答出来底层是数组,复制一个数组来扩容,但是再具体一点来说,大家就不知道该怎么说了,如果不看源码说这么多确实就差不多了,但是 ...

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

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

随机推荐

热门专题