OpenLayers元素选择工具
OpenLayers的selector工具相信挺多人都没有用过,其实这个工具用处还是不少的。比如完成元素查询时,需要实现图属性联动,使用这个工具很方便。最近做项目时也使用到这个工具,使用起来确实挺方便的。效果如图:
红色部分为使用selector选择的效果。
下面说说实现过程:
定义selector工具,并添加到地图中
//高亮元素选择
selectControls = {
selector: new OpenLayers.Control.SelectFeature(this.hightLightVectorLayer, {
selectStyle: { fillColor: 'red', zIndex: 500 },
toggle: true,
onSelect: function (feature) {
that.hightLineEleSelectCallback(feature, that);
},
onUnselect: function (feature) {
that.map.popups.length > 0 && that.map.popups[0].destroy();
}
})
};
map.addControl(selectControls['selector']]);
这里要和大家说说它的几个属性:
(1)this.hightLightVectorLayer指的是目标图层,这个工具可以选择哪个图层上的元素。
(2)selectStyle:{},是选中元素的样式。
(3)Toggle是指第一个点击选中上,第二次取消选中,第三次选中…..
(4)onSelect是一个事件类型的属性,指选中元素后,执行的操作,有个参数feature,feture有该元素的fid等信息,可以用来进行图属联动
(5)onUnselect指的是图层中非元素的点击事件。
(6)还有其他的许多属性,如hover: false,callback等,有兴趣的可以看看。
2.元素选择回调方法。主要是添加pupop到地图上显示信息。也可使用feature.attributes.fid属性和属性结果进行联动。我这里做的是添加popup到地图上,代码如下:
/*
* 岩石地层高亮元素选择回调方法,展示popup
* Parameters:
* feature: - {Openlayers feature element} 当前选中的元素
* that: - {object} 当前上下文
*/
hightLineEleSelectCallback: function (feature, that) {
//添加popup内容
var popupStr = '<div class="faultInfoPopupCon">'
'<div class="head rockHead">' returnData.name '<label>123</label></div>'
'<div class="rockMain">'
'<table>'
'<tr>'
'<td><label class="name">厚度:</label></td>'
'<td><label class="value">123m</label></td>'
'</tr>'
'<tr>'
'<td><label class="name">岩性描述:</label></td>'
'<td><label class="value">mayday</label></td>'
'</tr>'
'</table>'
'</div>'
'</div>';
//add popup
feature.popup = new OpenLayers.Popup.NestFramedCloud("pop",
feature.geometry.getBounds().getCenterLonLat(),
null, popupStr, null, true,
function () { //pupop关闭方法
selectControls.selector.unselectAll();
map.popups.length > 0 &&map.popups[0].destroy();
}, {
imageSrc: baseUrl 'Scripts/libs/rrpopup/img/nest-popup.png'
});
map.popups.length > 0 && map.popups[0].destroy();
map.addPopup(feature.popup);
},
关于这个OpenLayers.Control.SelectFeature工具,还有其他很多的属性,大家可以参考类OpenLayers.Control.SelectFeature进行学习。
OpenLayers元素选择工具的更多相关文章
- 『与善仁』Appium基础 — 17、元素定位工具(一)
目录 1.uiautomatorviewer介绍 2.uiautomatorviewer工具打开方式 3.uiautomatorviewer布局介绍 4.uiautomatorviewer工具的使用 ...
- 『与善仁』Appium基础 — 18、元素定位工具(二)
目录 1.Appium Inspector介绍 2.Appium Inspector打开方式 3.Appium Inspector布局介绍 4.Appium Inspector工具的配置 5.Appi ...
- 『与善仁』Appium基础 — 19、元素定位工具(三)
目录 1.Chrome Inspect介绍 2.Chrome Inspect打开方式 3.Chrome Inspect工具的使用 (1)Chrome Inspect工作前提 (2)Chrome Ins ...
- android EditText长按屏蔽ActionMode context菜单但保留选择工具功能
最近项目要求屏蔽EditText 长按出来的ActionMode菜单,但是要保留选择文本功能.这个屏蔽百度会出现各种方法,这里说一下我的思路: 1.屏蔽百度可知setCustomSelectionAc ...
- IT忍者神龟之Photoshop解析新手抠图的5个高速选择工具
一:魔棒工具 这是建立选区最简单的方法.但仅仅有在背景色为纯色时才会比較有效. 因此,当要选择的对象的背景为空白背景时.可使用魔棒工具,比如一张产品拍摄图. 在建立选区时,首先,要确保图片在一个图层中 ...
- Dotfuscator自定义规则中的元素选择
Dotfuscator是专业的.NET程序代码保护软件.是支持规则自定义的,你可以对重命名.程序控制流.字符串加密等等功能自定义规则.在进行规则自定义过程中,可以通过元素的不同选择,满足自己的程序需要 ...
- ps入门教程:选择工具、移动工具、索套工具的使用
本节课程主要内容:1.学习矩形选择工具.椭圆选择工具.移动工具.多边形套索工具.套索工具.磁性套索工具和魔术 棒选择工具.2.用套索和磁性套索,实现对人物照片的抠图.----------------- ...
- PS中如何提高修改psd图片的效率(自动选择工具)
在photoshop中制作图片的时候,一般要养成保留psd格式的习惯,纵然普通时候jpg,png格式常用,考虑到以后可能需要修改,也应该备份一下.如果考虑到以后需要修改,可每次成品保存成两个,一个ps ...
- appium 元素定位工具
两种元素定位工具: 1.uiautomatorviewer是android-sdk自带的一个元素定位工具,目录D:\androidsdk\androidsdk\tools\bin . 双击启动uiau ...
随机推荐
- DNS 中的协议字段详细定义
DNS中的协议字段定义 Table of Contents 1 概述 2 DNS Classes 3 DNS OpCodes 4 DNS RCODEs 5 DNS Label Types 6 DNS资 ...
- 安装hadoop集群服务器(hadoop1.2.1)
摘要:hadoop,一个分布式系统基础架构,可以充分利用集群的威力进行高速运算和存储.本文主要介绍hadoop的安装与集群服务器的配置. 准备文件: ▪ VMware11.0.0 ▪ Cen ...
- iPad Pro分辨率
iPad Pro分辨率 为 2732 x 2048
- jquery 选择器(name,属性,元素)大全
jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...
- Android 自定义view (一)——attr 理解
前言: 自定义view是android自定义控件的核心之一,那么在学习自定义view之前,我们先来了解下自定义view的自定义属性的attr的用法吧 Android attr 是什么 (1)attr ...
- 论AVL树与红黑树
首先讲解一下AVL树: 例如,我们要输入这样一串数字,10,9,8,7,15,20这样一串数字来建立AVL树 1,首先输入10,得到一个根结点10 2,然后输入9, 得到10这个根结点一个左孩子结点9 ...
- Linux操作系统备份之三:通过二进制拷贝(dd)方式实现Linux操作系统数据的备份
前面有两篇文章,<Linux操作系统备份之一:使用LVM快照实现Linux操作系统数据的在线备份>和<Linux操作系统备份之二:通过tar拷贝分区实现Linux操作数据的在线备份& ...
- HTML5--页面自动居中
注意: margin:0 auto;/**0:上下 auto:左右**/ <html lang="en"> <head> <meta chars ...
- 关于mybatis的理解
http://blog.csdn.net/jiuqiyuliang/article/details/45132493 写的不错很好!
- dataset转list实体
private static object GetDefaultValue(object obj, Type type) { if (obj == DBNull.Value) { return def ...