openlayers2中selectcontrol用法

简介:

在做电子地图项目中,一个基本的功能就是要能对地图上面的资源点进行选中,进而进行进一步的操作。那如何对地图的资源点进行选择呢?如果你的资源点图层是vector图层,那么你就可以用OpenLayers.Control.SelectFeature控件来进行操作。

OpenLayers.Control.SelectFeature控件可以对资源点进行悬浮选择,框选等操作。下面代码段是对parkingLayer图层上面的资源点进行选择。box属性为true表示可以进行框选。

parkingSelectControl = new OpenLayers.Control.SelectFeature(
					parkingLayer, {
						clickout: false, 
			            toggle: true,
			            multiple: false, 
			            hover : false,
						//autoActivate : true,
						toggleKey: "ctrlKey", // ctrl key removes from selection
		                multipleKey: "shiftKey", // shift key adds to selection
		                box: true
					});

那么, OpenLayers.Control.SelectFeature可以对多个图层进行选择吗?当然可以!

featureSelectControl = new OpenLayers.Control.SelectFeature(
					[inducedScreenLayer,queryMachineLayer,blueToothLayer,QRCodeLayer], {
						clickout: true, 
			            toggle: false,
			            multiple: false, 
			            hover : false,
						autoActivate : true,
						//toggleKey: "ctrlKey", // ctrl key removes from selection
		                multipleKey: "shiftKey", // shift key adds to selection
		                box: false
					});

上面代码端是对inducedScreenLayer,queryMachineLayer,blueToothLayer,QRCodeLayer等4个图层中的资源进行选择。

这个时候有一个需求是资源点不是同时显示的。地图上面有开关每次只显示一类的资源点,然后可以对该类别的资源点进行选择操作。这个时候用上面的代码段只能对第一次加载出来的图层进行选择操作,对于后面打开的图层没有操作。怎么办呢?不要着急。我们有大杀器!setLayer。在每次切换地图显示的时候用setLayer属性指定selectfeature关联的图层就可以了。当打开inducedScreenLayer图层时,执行featureSelectControl.setLayer(inducedScreenLayer);即可。

相关文章
|
6月前
|
前端开发 JavaScript
vue实战范例——箭头步骤条/导航(含css 斜切skew的妙用)
vue实战范例——箭头步骤条/导航(含css 斜切skew的妙用)
348 0
|
8月前
|
移动开发 小程序 API
uniapp中组件库Mask 遮罩层 的使用方法
uniapp中组件库Mask 遮罩层 的使用方法
660 1
|
8月前
|
定位技术 容器
openlayers
openlayers
176 1
openlayers
|
8月前
|
前端开发
css sprite 的优缺点,使用方法和示例
css sprite 的优缺点,使用方法和示例
80 1
|
JavaScript 前端开发 定位技术
OpenLayers入门(一)
OpenLayers入门(一)
910 0
OpenLayers入门(一)
|
存储 前端开发 JavaScript
前端 CSS 变量简介及基本使用方法
复杂的网站都会有大量的CSS代码,通常也会有许多重复的值。
206 0
前端 CSS 变量简介及基本使用方法
|
前端开发 定位技术 API
OpenLayers入门(二)
OpenLayers入门(二)
488 0
OpenLayers入门(二)
|
JavaScript 前端开发
#yyds干货盘点# 【js学习笔记四十七】实现两栏布局的第三种方式
#yyds干货盘点# 【js学习笔记四十七】实现两栏布局的第三种方式
103 0
#yyds干货盘点# 【js学习笔记四十七】实现两栏布局的第三种方式
关于Markdown编辑器的一些简单使用语法
关于Markdown编辑器的一些简单使用语法 Markdown编辑器的日常使用其实还是比较方便的,语法也不会过于复杂。在Markdown编辑器中,常用的标记符号不超过10个,只需要少量的时间就可以轻松掌握。 创建标题 标题是文章中最常用的格式之一,在Markdown编辑器中,如果我们想创建一个标题,只需要输入符号#,在符号#之后空一格然后输入标题名称。Markdown编辑器最多支撑到6级标题,符号#的数量就是对应标题的等级。
108 0
|
测试技术
DoTween用法教程
DoTween用法攻略 本文提供全流程,中文翻译。 Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例) Chinar —— 心分享、...
3251 0