mapbox-gl实战教程：图标选中状态实现

在地图开发中，定位到一个图标，或者是鼠标点击图标，让图标变换成选中状态，从而达到突出显示的状态。

mapbox-gl在地图上加载少量图标时，可以使用创建marker，或者是symbol图层方式，在图标较多的情况，一般都使用symbol图层，否则会出现卡顿的现象。

以marker方式实现的图标，在选中时，只需要修改html的样式即可。

本文详细讲一下，如何在symbol图层中，实现图标的选中状态。 1、使用图层（filter）过滤的方式：

在创建symbol图层的时候，同时创建一个图标选中状态的图层，默认不显示高亮图层的数据；

map.addLayer(
{
'id': 'symbol1',
'type': 'symbol',
'source': 'source1', 
'layout': {
'icon-image': 'icon1', 
... //其他属性
}
});
 
map.addLayer(
{
'id': 'symbol1-highlight',
'type': 'symbol',
'source': 'source1', 
'layout': {
'icon-image': 'icon1-highlight', 
... //其他属性
},
'filter': ['in', 'filterprop', '']
}
);

在定位或者鼠标点击到图标时，将过滤属性的唯一标识，写到filter中，让基本图层中的图标不显示，高亮图层里图标进行显示； map.setFilter('symbol1-highlight', ['in', 'filterprop', '选中属性值']); map.setFilter('symbol1', ['!',['in', 'filterprop', '选中属性值']]); 2、设置图层的属性，更换图标值： 通过控制图标的属性值，让选中的图标显示为高亮的图标，其他图标显示跟原来一样，这里使用到setLayoutProperty方法；

 map.setLayoutProperty('symbol1', 'icon-image', [
              'case',
              [
                'match',
                ['get', 'id'],
                '选中对象的id',
                true,
                false
              ],
              'icon1-highlight'',
              'icon1'
            ])