思享工具箱

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

摘要：
http://blog.csdn.net/gisshixisheng/article/details/46808647概述：本节主要讲述OL3的交互操作interaction，重点介绍draw，select以及modify。接口说明：OL3的interaction继承自ol.interaction.defaults，下面实现了以下几中交互操作：创建方式为：varinteraction=newol.

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

概述：

本节主要讲述OL3的交互操作interaction，重点介绍draw，select以及modify。

接口说明：

OL3的interaction继承自ol.interaction.defaults，下面实现了以下几中交互操作：

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

创建方式为：

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:

Extends

Methods
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 asthisinlistener.

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

NameTypeDescription
options

Options.

NameTypeDescription

Extends

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

NameTypeDescription
options

Options.

NameTypeDescription

Extends

Methods
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 asthisinlistener.

实现实例：

1、draw

  1. <htmlxmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  4. <title>Ol3draw</title>
  5. <linkrel="stylesheet"type="text/css"href="http://localhost/ol3/css/ol.css"/>
  6. <styletype="text/css">
  7. body,#map{
  8. border:0px;
  9. margin:0px;
  10. padding:0px;
  11. 100%;
  12. height:100%;
  13. font-size:13px;
  14. }
  15. .form-inline{
  16. position:absolute;
  17. top:10pt;
  18. right:10pt;
  19. z-index:99;
  20. }
  21. </style>
  22. <scripttype="text/javascript"src="http://localhost/ol3/build/ol.js"></script>
  23. <scripttype="text/javascript"src="http://localhost/jquery/jquery-1.8.3.js"></script>
  24. <scripttype="text/javascript">
  25. functioninit(){
  26. varformat='image/png';
  27. varbounds=[73.4510046356223,18.1632471876417,
  28. 134.976797646506,53.5319431522236];
  29. varuntiled=newol.layer.Image({
  30. source:newol.source.ImageWMS({
  31. ratio:1,
  32. url:'http://localhost:8081/geoserver/lzugis/wms',
  33. params:{'FORMAT':format,
  34. 'VERSION':'1.1.1',
  35. LAYERS:'lzugis:province',
  36. STYLES:''
  37. }
  38. })
  39. });
  40. varprojection=newol.proj.Projection({
  41. code:'EPSG:4326',
  42. units:'degrees'
  43. });
  44. varmap=newol.Map({
  45. controls:ol.control.defaults({
  46. attribution:false
  47. }),
  48. target:'map',
  49. layers:[
  50. untiled
  51. ],
  52. view:newol.View({
  53. projection:projection
  54. })
  55. });
  56. map.getView().fitExtent(bounds,map.getSize());
  58. varsource=newol.source.Vector();
  59. varvector=newol.layer.Vector({
  60. source:source,
  61. style:newol.style.Style({
  62. fill:newol.style.Fill({
  63. color:'rgba(255,0,0,0.2)'
  64. }),
  65. stroke:newol.style.Stroke({
  66. color:'#ffcc33',
  67. 2
  68. }),
  69. image:newol.style.Circle({
  70. radius:7,
  71. fill:newol.style.Fill({
  72. color:'#ffcc33'
  73. })
  74. })
  75. })
  76. });
  78. map.addLayer(vector);
  79. vartypeSelect=document.getElementById('type');
  80. vardraw;//globalsowecanremoveitlater
  81. functionaddInteraction(){
  82. varvalue=typeSelect.value;
  83. if(value!=='None'){
  84. draw=newol.interaction.Draw({
  85. source:source,
  86. type:/**@type{ol.geom.GeometryType}*/(value)
  87. });
  88. map.addInteraction(draw);
  89. }
  90. }
  93. /**
  94. *Letuserchangethegeometrytype.
  95. *@param{Event}eChangeevent.
  96. */
  97. typeSelect.onchange=function(e){
  98. map.removeInteraction(draw);
  99. addInteraction();
  100. };
  102. addInteraction();
  103. }
  104. </script>
  105. </head>
  106. <bodyonLoad="init()">
  107. <divid="map">
  108. <formclass="form-inline">
  109. <label>选择绘制类型：</label>
  110. <selectid="type">
  111. <optionvalue="None">None</option>
  112. <optionvalue="Point">点</option>
  113. <optionvalue="LineString">线</option>
  114. <optionvalue="Polygon">多边形</option>
  115. </select>
  116. </form>
  117. </div>
  118. </body>
  119. </html>


2、select

  1. <htmlxmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  4. <title>Ol3select</title>
  5. <linkrel="stylesheet"type="text/css"href="http://localhost/ol3/css/ol.css"/>
  6. <styletype="text/css">
  7. body,#map{
  8. border:0px;
  9. margin:0px;
  10. padding:0px;
  11. 100%;
  12. height:100%;
  13. font-size:13px;
  14. }
  15. .form-inline{
  16. position:absolute;
  17. top:10pt;
  18. right:10pt;
  19. z-index:99;
  20. }
  21. </style>
  22. <scripttype="text/javascript"src="http://localhost/ol3/build/ol.js"></script>
  23. <scripttype="text/javascript"src="http://localhost/jquery/jquery-1.8.3.js"></script>
  24. <scripttype="text/javascript">
  25. varpoint="POINT(103.58429749802736.119086450265)";
  26. varline="MULTILINESTRING((106.51911520618636.119086450265,108.96712780981136.5936423859273))";
  27. varpolygon="MULTIPOLYGON(((106.51911520618629.4789248520356,108.96712780981134.2761116373967,113.22668288693523.1830703234799)))";
  28. varwkts=[point,line,polygon];
  29. varwktformat=newol.format.WKT();
  30. functioninit(){
  31. varformat='image/png';
  32. varbounds=[73.4510046356223,18.1632471876417,
  33. 134.976797646506,53.5319431522236];
  34. varuntiled=newol.layer.Image({
  35. source:newol.source.ImageWMS({
  36. ratio:1,
  37. url:'http://localhost:8081/geoserver/lzugis/wms',
  38. params:{'FORMAT':format,
  39. 'VERSION':'1.1.1',
  40. LAYERS:'lzugis:province',
  41. STYLES:''
  42. }
  43. })
  44. });
  45. varprojection=newol.proj.Projection({
  46. code:'EPSG:4326',
  47. units:'degrees'
  48. });
  49. varfeatures=newArray();
  50. for(vari=0;i<wkts.length;i++){
  51. varfeature=wktformat.readFeature(wkts[i]);
  52. feature.getGeometry().transform('EPSG:4326','EPSG:4326');
  53. features.push(feature);
  54. }
  56. varvector=newol.layer.Vector({
  57. source:newol.source.Vector({
  58. features:features
  59. }),
  60. style:newol.style.Style({
  61. fill:newol.style.Fill({
  62. color:'rgba(255,0,0,0.2)'
  63. }),
  64. stroke:newol.style.Stroke({
  65. color:'#ffcc33',
  66. 2
  67. }),
  68. image:newol.style.Circle({
  69. radius:7,
  70. fill:newol.style.Fill({
  71. color:'#ffcc33'
  72. })
  73. })
  74. })
  75. });
  76. varmap=newol.Map({
  77. controls:ol.control.defaults({
  78. attribution:false
  79. }),
  80. target:'map',
  81. layers:[
  82. untiled,vector
  83. ],
  84. view:newol.View({
  85. projection:projection
  86. })
  87. });
  88. map.getView().fitExtent(bounds,map.getSize());
  90. //选择对象
  91. varselect=null;//reftocurrentlyselectedinteraction
  92. //selectinteractionworkingon"singleclick"
  93. varselectSingleClick=newol.interaction.Select();
  94. //selectinteractionworkingon"click"
  95. varselectClick=newol.interaction.Select({
  96. condition:ol.events.condition.click
  97. });
  98. //selectinteractionworkingon"mousemove"
  99. varselectMouseMove=newol.interaction.Select({
  100. condition:ol.events.condition.mouseMove
  101. });
  102. varselectElement=document.getElementById('selecttype');
  103. varchangeInteraction=function(){
  104. if(select!==null){
  105. map.removeInteraction(select);
  106. }
  107. varvalue=selectElement.value;
  108. if(value=='singleclick'){
  109. select=selectSingleClick;
  110. }elseif(value=='click'){
  111. select=selectClick;
  112. }elseif(value=='mousemove'){
  113. select=selectMouseMove;
  114. }else{
  115. select=null;
  116. }
  117. if(select!==null){
  118. map.addInteraction(select);
  119. }
  120. };
  121. /**
  122. *onchangecallbackontheselectelement.
  123. */
  124. selectElement.onchange=changeInteraction;
  125. changeInteraction();
  126. }
  127. </script>
  128. </head>
  129. <bodyonLoad="init()">
  130. <divid="map">
  131. <formclass="form-inline">
  132. <label>选择高亮方式：</label>
  133. <selectid="selecttype">
  134. <optionvalue="none"selected>None</option>
  135. <optionvalue="singleclick">单击</option>
  136. <optionvalue="click">点击</option>
  137. <optionvalue="mousemove">鼠标经过</option>
  138. </select>
  139. </form>
  140. </div>
  141. </body>
  142. </html>


3、modify

    1. <htmlxmlns="http://www.w3.org/1999/xhtml">
    2. <head>
    3. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
    4. <title>Ol3modify</title>
    5. <linkrel="stylesheet"type="text/css"href="http://localhost/ol3/css/ol.css"/>
    6. <styletype="text/css">
    7. body,#map{
    8. border:0px;
    9. margin:0px;
    10. padding:0px;
    11. 100%;
    12. height:100%;
    13. font-size:13px;
    14. }
    15. </style>
    16. <scripttype="text/javascript"src="http://localhost/ol3/build/ol.js"></script>
    17. <scripttype="text/javascript"src="http://localhost/jquery/jquery-1.8.3.js"></script>
    18. <scripttype="text/javascript">
    19. varpoint="POINT(103.58429749802736.119086450265)";
    20. varline="MULTILINESTRING((106.51911520618636.119086450265,108.96712780981136.5936423859273))";
    21. varpolygon="MULTIPOLYGON(((106.51911520618629.4789248520356,108.96712780981134.2761116373967,113.22668288693523.1830703234799)))";
    22. varwkts=[point,line,polygon];
    23. varwktformat=newol.format.WKT();
    24. functioninit(){
    25. varformat='image/png';
    26. varbounds=[73.4510046356223,18.1632471876417,
    27. 134.976797646506,53.5319431522236];
    28. varuntiled=newol.layer.Image({
    29. source:newol.source.ImageWMS({
    30. ratio:1,
    31. url:'http://localhost:8081/geoserver/lzugis/wms',
    32. params:{'FORMAT':format,
    33. 'VERSION':'1.1.1',
    34. LAYERS:'lzugis:province',
    35. STYLES:''
    36. }
    37. })
    38. });
    39. varprojection=newol.proj.Projection({
    40. code:'EPSG:4326',
    41. units:'degrees'
    42. });
    43. varfeatures=newArray();
    44. for(vari=0;i<wkts.length;i++){
    45. varfeature=wktformat.readFeature(wkts[i]);
    46. feature.getGeometry().transform('EPSG:4326','EPSG:4326');
    47. features.push(feature);
    48. }
    50. varvector=newol.layer.Vector({
    51. source:newol.source.Vector({
    52. features:features
    53. }),
    54. style:newol.style.Style({
    55. fill:newol.style.Fill({
    56. color:'rgba(255,0,0,0.2)'
    57. }),
    58. stroke:newol.style.Stroke({
    59. color:'#ffcc33',
    60. 2
    61. }),
    62. image:newol.style.Circle({
    63. radius:7,
    64. fill:newol.style.Fill({
    65. color:'#ffcc33'
    66. })
    67. })
    68. })
    69. });
    71. varselect=newol.interaction.Select();
    72. varmodify=newol.interaction.Modify({
    73. features:select.getFeatures()
    74. });
    75. vector.on("afterfeaturemodified",function(evt){
    76. console.log(evt);
    77. });
    78. varmap=newol.Map({
    79. interactions:ol.interaction.defaults().extend([select,modify]),
    80. controls:ol.control.defaults({
    81. attribution:false
    82. }),
    83. target:'map',
    84. layers:[
    85. untiled,vector
    86. ],
    87. view:newol.View({
    88. projection:projection
    89. })
    90. });
    91. map.getView().fitExtent(bounds,map.getSize());
    92. }
    93. </script>
    94. </head>
    95. <bodyonLoad="init()">
    96. <divid="map">
    97. </div>
    98. </body>
    99. </html>

标签：#select | 浏览：393 | 发布日期：

免责声明：文章转载自《（转）OpenLayers3基础教程——OL3 介绍interaction》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇素数回文（高效判断素数法）通用mapper操作 (or)下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

influxdb基本SQL操作2

influxdb0.13命令  1、数据构成 INSERT cpu_load_short,host=server01,region=us-west value=0.64,value2=0.86 1434055562000000000 第一部分：“cpu_load_short,host=server01,region=us-west” 第一部分称为key，...

HiveSQL 数据操控、查询语言（DML、DQL）

第一章 DML-Load加载数据 1.1 背景 回想一下，当在Hive中创建好表之后，默认就会在HDFS上创建一个与之对应的文件夹，默认路径是由参数hive.metastore.warehouse.dir控制，默认值是/user/hive/warehouse。 要想让hive的表和结构化的数据文件产生映射，就需要把文件移到到表对应的文件夹下面，当然，可以在...

SQL查询一个表的总记录数的方法

一、简单查询语句 1. 查看表结构 SQL>DESC emp; 2. 查询所有列 SQL>SELECT * FROM emp; 3. 查询指定列 SQL>SELECT empmo, ename, mgr FROM emp; SQL>SELECT DISTINCT mgr FROM emp; 只显示结果不同的项 4. 查询指定行 S...

(2)OLEDB数据库操作

1、首先要引入 System.Data.OracleClient.dll 2、引入命名空间using System.Data.OleDb; OleDb类https://msdn.microsoft.com/zh-cn/library/system.data.oledb(v=vs.110).aspx 一、连接数据库 连接字符串 string str = "...

展开BOM并使用最终用量的算法(转载)

本文系转载子ITPUB，如果有侵犯您权益的地方，烦请及时的告知与我，我即刻将停止侵权行为: 网址：http://www.itpub.net/thread-1020586-1-1.html http://www.itpub.net/thread-1020772-3-1.html http://www.itpub.net/thread-1020712-1-1....

oracle查询连接数、并发数、共享池大小

1、查看当前数据库建立的会话情况： select sid,serial#,username,program,machine,status from v$session; 2、查询数据库当前进程的连接数： select count(*) from v$process; 3、查看数据库当前会话的连接数： select count(*) from v$sessi...

最新文章

随机推荐

思享工具箱导航