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": {
                        "icon": "harbor-15"
                    },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [
                            116.39087677001953,
                            39.919216100221554
                        ]
                    }
                },
                {
                    "type": "Feature",
                    "properties": {
                        "icon": "harbor-15"
                    },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [
                            116.37439727783203,
                            39.879971466780596
                        ]
                    }
                },
                {
                    "type": "Feature",
                    "properties": {
                        "icon": "aquarium-15"
                    },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [
                            116.42741093154768,
                            39.897269600256266
                        ]
                    }
                },
                {
                    "type": "Feature",
                    "properties": {
                        "icon": "aquarium-15"
                    },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [
                            116.34810337525329,
                            39.9218462677957
                        ]
                    }
                }
            ]
        }
    })
}

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

// 鼠标移入
map.on('mouseenter', 'point-layer', (e) => {
    map.setLayoutProperty('point-layer', 'icon-image',
    [
      'match',
      ['id'], // 获取feature的id
      e.features[0].id, 
      'milan-metro', // 当鼠标悬浮时的图标
      ["get", "icon"] // 其他未悬浮的图标，依然采用属性中配置的图标
    ]
  )
})

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


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

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

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