openlayers.js加载geojson时绑定单击事件，点击空白处选中最接近的要素（比如一个线性图形下面有个多边形，在线性图形空白处点击时会选中多边形，而你想要选中线性图形）

第一步：问题分析

当你在使用openlayers加载geojson时，使用ol.interaction.Select给map添加单击事件选中要素时，比如一个线性图形下面有个多边形，在线性图形空白处点击时会选中多边形，而不会选中线性图形，这应该怎么解决呢？

代码：

 var selectSingleClick = new ol.interaction.Select();
 map.addInteraction(selectSingleClick);
 selectSingleClick.on('select', function(e) {
   
    var p = e.mapBrowserEvent.coordinate
    console.log('p',p)

    var features=e.target.getFeatures().getArray();
    if (features.length>0)
    {
   
        console.log('length',features.length)
        var feature=features[0];
    }
    console.log('feature',feature)
})

效果：

第二步：解决方案

分析：
我发现还有一种方法给map添加单击事件，并且不会默认选中一个要素，因此我就可以根据点击所在位置的坐标，去遍历所有的feature，然后找到符合条件的feature(首先找到符合该坐标在feature边界【即minX,minY,maxX,maxY】内的所有feature，然后再根据该坐标到边界四个顶点的距离之和进行比较，找到距离最近的那个，ok，开始整活)

代码：

    map.on('singleclick',mapClick);

    function mapClick(e)