mapbox图标渲染的bug

遇到一个bug，地图图标的问题，mapbox在渲染图标的时候默认会把这个经纬度设置在图标的几何中心位置，这个会造成下面的bug：

真实位置被图标遮盖，这并不是我们想要的效果，我们想要的效果是真实位置在图标的尖角上。

所以要给图层添加一个offse，offset等于图标高度一半。做完这个之后又发现，如果同一个图层又不同的图标那么它们的偏移量是不一样的，所以要用表达式['get','offset']，这是一个思路，当我们面对复杂的表达式的时候可以将值放在property中，通过表达式获取，代码如下：

const feature = {
    type: 'Feature',
    properties: {
        icon: 'wholeSearch_icon_' + i,
        'icon-translate-anchor': 'viewport',
        name: item.name,
        telephone: item.telephone,
        address: item.address,
        coordinates: [item.lng, item.lat],
        info: item,
    },
    geometry: {
        type: 'Point',
        coordinates: [item.lng, item.lat],
    },
}
if (index >= pageStart && index <= pageEnd) {
    i++ // 1
    feature.properties.icon = 'wholeSearch_icon_' + i
    feature.properties.offset = [0, -16.5]
} else {
    feature.properties.icon = 'wholeSearch_icon_red'
    feature.properties.offset = [0, 0]
}
map.addLayer({
'id': '11',
'type': 'symbol',
'source': '11', // reference the data source
'filter': ['has', 'icon'],
'layout': {
    'icon-image': ['get', 'icon'], // reference the image
    'icon-offset': ['get', 'offset'],
}
})