layer添加元素 openlayer_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 = '

'

'

' returnData.name '123

'

'

'

'

'

'

'

厚度：'

'

123m'

'

'

'

'

'

岩性描述：'

'

mayday'

'

'

'

'

'

'

'

';

//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进行学习。