SOURCE

mapboxgl.accessToken = 'pk.eyJ1IjoibW9ob25nIiwiYSI6ImNrNGFsdjY5ZzA1NW4zbG14b2JoMnA5c3IifQ.1qVWFsyHW2wKThTgQg08SA';
const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-zh-v1',
    center: [116.40355, 39.91737],
    zoom: 11
});

map.on('load', () => {
    addSource()
    addLayer()
})

function addSource () {
    map.addSource('point', {
        generateId: true, // 自动生成featureId
        type: 'geojson',
        data: {
            "type": "FeatureCollection",
            "features": [
                {
                    "type": "Feature",
                    "properties": {},
                    "geometry": {
                        "type": "Point",
                        "coordinates": [
                            116.39087677001953,
                            39.919216100221554
                        ]
                    }
                },
                {
                    "type": "Feature",
                    "properties": {},
                    "geometry": {
                        "type": "Point",
                        "coordinates": [
                            116.37439727783203,
                            39.879971466780596
                        ]
                    }
                }
            ]
        }
    })
}

function addLayer () {
    map.addLayer({
        id: 'point-layer',
        source: 'point',
        type: 'symbol',
        layout: {
            "icon-size": 2,
            "icon-image": "harbor-15"
        }
    })
}

// 鼠标移入
map.on('mouseenter', 'point-layer', (e) => {
    map.setLayoutProperty('point-layer', 'icon-image',
    [
      'match',
      ['id'], // 获取feature的id
      e.features[0].id, 'milan-metro', // 当鼠标悬浮时的图标
      'harbor-15' // 其他未悬浮的图标
    ]
  )
})

// 鼠标移出
map.on('mouseleave', 'point-layer', (e) => {
    map.setLayoutProperty('point-layer', 'icon-image', 'harbor-15')
})

// 鼠标点击
map.on('click', 'point-layer', (e) => {
    map.setLayoutProperty('point-layer', 'icon-image',
    [
      'match',
      ['id'],
      e.features[0].id, 'milan-metro',
      'harbor-15'
    ]
  )
})

<div id='map'></div>

html,body {
    padding: 0;
    margin: 0;
    height: 100%;
}
#map {
    width: 100%;
    height: 100%;
}