Geojson数据未在Mapbox GL JS中显示

Question

我在React ref钩子中导入的geojson数据没有显示。我的项目文件夹中有.geojson文件。我希望看到代表geojson数据坐标的红色圆圈。我尝试将它包装在map.on中，并替换了不同类型的事件，如"load"one_answers"style.load"，但仍然没有显示。然而，当我上传到MapboxStudio时，数据确实会显示出来，所以我认为这是我的代码出了问题，而不是geoJSON数据。

export default function App() {
const mapContainer = React.useRef<any>(null);
// const map = React.useRef<mapboxgl.Map | null>(null);
const [lng, setLng] = React.useState<number>(-74.0632);
const [lat, setLat] = React.useState<number>(40.7346);
const [zoom, setZoom] = React.useState<number>(12);

React.useEffect(() => {
// if (map) return;
const map = new mapboxgl.Map({
container: mapContainer.current,
style: 'mapbox://styles/mapbox/streets-v11',
center: [lng, lat],
zoom: zoom
});
map.on('style.load', function () {
// if (!map) return;
map.addSource('propertyData', {
type: 'geojson',
data: './jersey_city_HA.geojson'
});
map.addLayer({
id: 'property-layer',
source: 'propertyData',
type: 'circle',
paint: {
'circle-radius': 8,
'circle-color': 'red'
}
});
});
});

Answer 1

我通过将本地数据的路径替换为GitHub上相同数据的url来解决这个问题。‍♂️