Feature选取之取消选中

取消选中有两种方式， 一种是在界面上以交互的方式取消选中，一种是用代码的方式取消选中，下面就分别介绍一下

交互方式取消选中

如果是采用的默认的方式选取feature，即使用鼠标左键单击feature就可选取。那么这种交互方式下，要取消选中，则只需要同样使用鼠标左键，在地图其他地方单击一下，就可取消选中。 可跳到要素选取之选中样式，在第一个地图上试试。

如果采用的是自定义的方式选取feature，那么要取消选中，交互方式还是一样的，只要目标不再是已选中的feature就行，就能取消选中。 比如要素选取之条件过滤中，采用了自定义的鼠标移入feature就可选中，要取消选中，只需要把鼠标移出feature即可。

代码方式取消选中

点击地图下方的“取消选中”按钮，就可触发代码，取消circle的选中状态：

前面的代码都一样，关键在最后：

<div id="map" style="width: 100%"></div>
<input type="button" value="取消选中" onclick="unselectFeature();"></input>
<script type="text/javascript">
    var layer = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: new ol.style.Style({
            image: new ol.style.Circle({
                radius: 10,
                fill: new ol.style.Fill({
                    color: 'red'
                })
            })
        })
    });
    var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }), 
          layer
        ],
        target: 'map',
        view: new ol.View({
          center: ol.proj.transform(
              [104, 30], 'EPSG:4326', 'EPSG:3857'),
          zoom: 10
        })
    });

    // 在地图上添加一个圆
    var circle = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform(
              [104, 30], 'EPSG:4326', 'EPSG:3857'))
    })
    layer.getSource().addFeature(circle);

    // 添加一个用于选择Feature的交互方式
    var clickSelect = new ol.interaction.Select({
        style: new ol.style.Style({
            image: new ol.style.Circle({
                radius: 10,
                fill: new ol.style.Fill({
                    color: 'blue'
                })
            })
        })
    });
    map.addInteraction(clickSelect);

    // 取消选中
    function unselectFeature() {
        clickSelect.getFeatures().clear();
        // 下面这样也是可以取消选中的，根据情况选择
        // map.removeInteraction(clickSelect);
    }
</script>

至此，地图上元素的选取相关的知识点都介绍完毕，希望能逐个掌握并融会贯通于实际应用中。