Geojson 数据未显示在 Mapbox GL JS 中

Question

我在 React 引用挂钩中导入的 geojson 数据未显示。我的项目文件夹中有 .geojson 文件。我希望看到代表 geojson 数据坐标的红色圆圈。我尝试将其包装在 map.on 中，并替换为 'load' 和 '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

我解决了这个问题，方法是用 url 替换本地数据的路径到相同的数据，但在我的 GitHub 上。 ‍♂️

Geojson 数据未显示在 Mapbox GL JS 中

Geojson Data Not Displaying in Mapbox GL JS

reactjs

mapbox-gl-js

react-hooks