javascript - 在 Mapbox 上未触发 mouseenter/mouseleave/click

Question

我的 HTML 上有以下 javascript 来使用 Mapbox 渲染地图

mapboxgl.accessToken = "<token>";
var map = new mapboxgl.Map({
    "container": "mapFront",
    "style": "mapbox://styles/mapbox/satellite-streets-v11",
    "center": [-47.909, -22.087],
    "zoom": 7
});
map.addControl(new mapboxgl.ScaleControl({position: "bottom-right"}));
map.addControl(new mapboxgl.NavigationControl());
map.on("load", function() {
    map.addSource("focos", {
        type: "geojson",
        data: "https://localhost:5001/Home/Focos48H"
    });
    map.addLayer({
        "id": "focos",
        "type": "circle",
        "source": "focos",
        "paint": {
            "circle-radius": 8,
            "circle-stroke-width": 2,
            "circle-color": "red",
            "circle-stroke-color": "white"
        }
    });
    map.on('click', 'focos', function(e) {
        var c = e.features[0].geometry.coordinates.slice();
        var desc = e.features[0].properties.resumo;
        while (Math.abs(e.lngLat.lng - c[0]) > 180) {
            c[0] += e.lngLat.lng > c[0] ? 360 : -360;
        }
        new mapboxgl.Popup().setLngLat(c).setHTML(desc).addTo(map);
    });
    map.on('mouseenter', 'focos', function() { map.getCanvas().style.cursor = 'pointer'; });
    map.on('mouseleave', 'focos', function() { map.getCanvas().style.cursor = ''; });
});

GeoJSON 源码是这样的

{
   "type":"FeatureCollection",
   "features":[
      {
         "type":"Feature",
         "id":"15150",
         "geometry":{
            "type":"Point",
            "coordinates":[-51.99000000, -21.57000000 ]
         },
         "properties":{
            "resumo":"Foco detectado em 2021-05-26T14:53:11"
         }
      },
      {
         "type":"Feature",
         "id":"15151",
         "geometry":{
            "type":"Point",
            "coordinates":[ -52.01000000, -21.57000000 ]
         },
         "properties":{
            "resumo":"Foco detectado em 2021-05-26T14:53:11"
         }
      }
   ]
}

地图加载正常。GeoJSON 源加载正常。图层显示正确，但我有两个问题：

1. 鼠标在进入/离开特征时不会改变形状，并且；
2. 单击功能不会显示弹出窗口。

我在这里想念什么？

谢谢

标签： javascriptmapbox