Я пытаюсь использовать пример геолокацииact-map-gl, но данные .geojson не хотят загружать - PullRequest
Новая
       23

Я пытаюсь использовать пример геолокацииact-map-gl, но данные .geojson не хотят загружать

0 голосов
/ 28 марта 2019

Я пытаюсь использовать пример геолокацииact-map-gl на https://github.com/uber/react-map-gl/tree/4.1-release/examples/geojson, но «data / us -come.geojson» отказывается загружать (404) в «app.js».

import {json as requestJson} from 'd3-request';  

componentDidMount() {
    requestJson('data/us-income.geojson', (error, response) => {
      if (!error) {
    this._loadData(response);
  }
});
}

Кажется, что модуль 'd3-request' устарел, но я не могу заставить его работать с 'd3-fetch', как предложено.Как загрузить данные .geojson в response-map-gl?

1 Ответ

0 голосов
/ 03 апреля 2019

Для загрузки файла GeoJSON через библиотеку d3-fetch:

1) функция импорта json: import { json } from 'd3-fetch'

2) теперь содержимое файла можно загружать так: 

json("data/us-income.geojson")
.then((data) => {
    //...
});

Вот официальный пример , адаптированный для react-map-gl библиотека : 

const MAPBOX_TOKEN =
  "--YOUR_KEY-GOES-HERE--"; // 
const SOURCE_ID = "national-park";

class Map extends Component {
  constructor(props) {
    super(props);

    this.state = {
      viewport: {
        latitude: 40.492392,
        longitude: -121.403732,
        zoom: 11
      }
    };

    this.mapRef = React.createRef();
    this.handleMapLoaded = this.handleMapLoaded.bind(this);
    this.handleViewportChange = this.handleViewportChange.bind(this);
  }

  handleViewportChange(viewport) {
    this.setState({ viewport });
  }


  handleMapLoaded() {
    const map = this.mapRef.current.getMap();

    json("data/national-park.json")
    .then((data) => {
      this.initMapData(map, data);
    });

  }

  render() {
    const { viewport } = this.state;

    return (
      <div style={{ height: "100%" }}>
        <MapGL
          ref={this.mapRef}
          onLoad={this.handleMapLoaded}
          mapStyle="mapbox://styles/mapbox/outdoors-v11"
          width="100%"
          height="480px"
          {...viewport}
          onViewportChange={this.handleViewportChange}
          mapboxApiAccessToken={MAPBOX_TOKEN}
        />
      </div>
    );
  }

  initMapData(map, data) {
    map.addSource(SOURCE_ID, data);
    map.addLayer({
      id: "park-boundary",
      type: "fill",
      source: "national-park",
      paint: {
        "fill-color": "#888888",
        "fill-opacity": 0.4
      },
      filter: ["==", "$type", "Polygon"]
    });

    map.addLayer({
      id: "park-volcanoes",
      type: "circle",
      source: "national-park",
      paint: {
        "circle-radius": 6,
        "circle-color": "#B42222"
      },
      filter: ["==", "$type", "Point"]
    });
  }
}
...