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

相关文章
|
4月前
|
定位技术 容器
openlayers
openlayers
54 1
openlayers
|
8月前
|
JavaScript 机器人 vr&ar
19 个最佳Three.JS 示例
分享threejs.org 的 19个最佳三个 JS 示例
247 0
19 个最佳Three.JS 示例
|
9月前
|
存储 JSON 数据可视化
Echarts实战案例代码(12):Highcharts与Echarts地图geoJSON的比较及使用方法
Echarts实战案例代码(12):Highcharts与Echarts地图geoJSON的比较及使用方法
102 0
|
JavaScript 前端开发 定位技术
OpenLayers入门(一)
OpenLayers入门(一)
570 0
OpenLayers入门(一)
|
前端开发 定位技术 API
OpenLayers入门(二)
OpenLayers入门(二)
387 0
OpenLayers入门(二)
|
数据可视化 算法 计算机视觉
qml开发笔记(六):可视化元素Text、Window
qml开发笔记(六):可视化元素Text、Window
qml开发笔记(六):可视化元素Text、Window
|
测试技术
DoTween用法教程
DoTween用法攻略 本文提供全流程,中文翻译。 Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例) Chinar —— 心分享、...
3164 0
|
测试技术
DoTween的基本用法
DoTween的基本用法 本文提供全流程,中文翻译。Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例) ...
1978 0
|
Web App开发 JavaScript 前端开发

热门文章

最新文章