OpenLayers Select API介绍及使用

一、Select类

• Select是交互事件中的一种，用于选择矢量图层上的几何图形，添加选择交互事件后，点击地图上的几何图形或者将鼠标移动到几何图形上时，将获取到几何图形的相关信息，我们可以将选择的几何图形进行高亮显示。使用起来很简单，首先创建一个Select对象，然后再使用Map的addInteraction方法添加该对象。选择的事件包括Single-click, Click, Hover ，Alt+Click等。可以使用condition属性来指定事件类型。

  var select = new ol.interaction.Select();
  map.addInteraction(select)
  

  属性

  • addCondition：指定一个函数，用于处理每一次事件。
  • condition：用于设置事件函数，返回false时不处理事件。
  • layers：用于过滤选择的图层，可以用数组指定图层，如果是函数，当返回false`时不处理事件。
  • style：设置选择时高亮显示的样式。
  • removeCondition：删除条件选择的函数。返回一个布尔值是否触发事件。
  • **toggleCondition：切换条件选择的函数。返回一个布尔值是否触发事件。
  • multi：是否需要选择叠加的要素。默认为false。
  • features：设置要素选择的范围，如果设置了，只在该要素集下生效。
  • filter：选择过滤器。当返回false`时不处理事件。
  • hitTolerance：鼠标与几何图形之间的距离，距离越大越容易选中。

  方法

  • getFeatures：获取选中的要素集。
  • getHitTolerance：获取鼠标与几何图形之间的距离。
  • getLayer：获取选中的图层。
  • setHitTolerance：设置鼠标与几何图形之间的距离。

  事件

  • select：选中事件，当选中的时候触该事件，如select.on('select',function()})。

  
  
  作者：写前端的大叔
  链接：https://www.jianshu.com/p/4dc04c6b5165
  来源：简书
  著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

 上述内容未涵盖所有属性和方法

OpenLayer 5 文档

OpenLayers v5.3.0 API - Class: Selecthttps://openlayers.org/en/v5.3.0/apidoc/module-ol_interaction_Select-Select.htmlOpenLayer 6 文档

OpenLayers v6.7.0 API - Class: Selecthttps://openlayers.org/en/latest/apidoc/module-ol_interaction_Select-Select.html

 二、常用相关类（ol/Collection）

 由于时常使用要素集，结合下文可以对要素集进行操作，以解决更多问题。

select.getFeatures() 是一个 ol/Collection

拥有会触发事件绑定的以下方法:

1: "clear"

2: "extend"

3: "forEach"

4: "getArray"

5: "item"

6: "getLength"

7: "insertAt"

8: "pop"

9: "push"

10: "remove"

11: "removeAt"

12: "setAt"

13: "updateLength_"

14: "assertUnique_"

OpenLayers实现手动添加选择的要素:

var select = new Select({layers: [layer]});
select.getFeatures().clear(); //因为我的需求是单选,所以先清除所有选择
select.getFeatures().push(fea);//将要选择的要素push进去
 
select.dispatchEvent({type: "select",selected: [fea]})

//以上并不会触发'select'事件,所以需要手动触发一下
————————————————
版权声明：本文为CSDN博主「CHENJIAMIAN PRO」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/a571574085/article/details/107597219

以上内容仍然不全面，具体文档在上述链接的搜索框中输入 ol/Collection。

 三、Demo

/*overlay*/
    // Popup showing the position the user clicked
    var popup = new ol.Overlay({
        element: document.getElementById('popup'),
        autoPan:true,
        autoPanMargin:100,
        positioning:'center-right'
    });
    map.addOverlay(popup);
 
    /*select*/
    var selectSingleClick = new ol.interaction.Select();
    map.addInteraction(selectSingleClick);
    /*前端第一种*/
    selectSingleClick.on('select', function(e) {
        var features=e.target.getFeatures().getArray();
        var element = popup.getElement();
        if (features.length>0)
        {
            var feature=features[0];
            var type=feature.getGeometry().getType();
            var property=feature.getProperties();
            var coordinate = ol.extent.getCenter(feature.getGeometry().getExtent());
            var hdms="点名："+property["Text"];
            hdms=hdms+"<br/>";
            hdms = hdms+"图层名：:"+property["Layer"];
            hdms=hdms+"<br/>";
            hdms = hdms+"位置:"+coordinate[0]+"-"+coordinate[1];
 
            $(element).popover('destroy');
            popup.setPosition(coordinate);
            // the keys are quoted to prevent renaming in ADVANCED mode.
            $(element).popover({
                'placement': 'top',
                'animation': false,
                'html': true,
                'content': hdms
            });
            $(element).popover('show');
        }
        else
        {
            $(element).popover('destroy');
 
        }
 
    });
这里popup是个overlay覆盖物，用于弹出框显示得到的feature要素。
————————————————
版权声明：本文为CSDN博主「gis_morningsun」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xcymorningsun/article/details/82492384