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);即可。

相关文章
|
8月前
|
移动开发 小程序 API
uniapp中组件库Mask 遮罩层 的使用方法
uniapp中组件库Mask 遮罩层 的使用方法
643 1
|
8月前
|
定位技术 容器
openlayers
openlayers
171 1
openlayers
|
8月前
|
前端开发
css sprite 的优缺点,使用方法和示例
css sprite 的优缺点,使用方法和示例
68 1
|
JavaScript 前端开发 定位技术
OpenLayers入门(一)
OpenLayers入门(一)
900 0
OpenLayers入门(一)
|
自然语言处理 搜索推荐 C++
样式表使用方法小结
样式表使用方法小结
|
JavaScript 前端开发
JavaScript入门第十一章(练习--动态生成柱状图)
JavaScript入门第十一章(练习--动态生成柱状图)
162 0
JavaScript入门第十一章(练习--动态生成柱状图)
|
存储 前端开发 JavaScript
前端 CSS 变量简介及基本使用方法
复杂的网站都会有大量的CSS代码,通常也会有许多重复的值。
205 0
前端 CSS 变量简介及基本使用方法
|
前端开发 定位技术 API
OpenLayers入门(二)
OpenLayers入门(二)
478 0
OpenLayers入门(二)
|
数据可视化
DoTween可视化编程用法详解
DoTween可视化编辑 本文提供全流程,中文翻译。Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例) ...
2711 0