OpenLayers元素选择工具

时间:2022-03-05 08:45:06

OpenLayers的selector工具相信挺多人都没有用过,其实这个工具用处还是不少的。比如完成元素查询时,需要实现图属性联动,使用这个工具很方便。最近做项目时也使用到这个工具,使用起来确实挺方便的。效果如图:

 OpenLayers元素选择工具

 红色部分为使用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进行学习。