Как передать массив координат в слой карты-реагирования-карты-gl? - PullRequest
Новая
       34

Как передать массив координат в слой карты-реагирования-карты-gl?

0 голосов
/ 04 июля 2019

возникли проблемы при согласовании документов с моим вариантом использования. Я немного застрял, пытаясь заставить openstreet карты реагировать с использованием d3, и я играл с Reaction-map-gl ... отличной библиотекой, которая довольно набрана! Эта библиотека построена поверх d3 и openstreetmaps и использует много плагинов d3 ... вот пример, который я пытаюсь воспроизвести:

https://github.com/uber/react-map-gl/blob/5.0-release/examples/heatmap/src/app.js

В этом примере данные, в которых находятся координаты, находятся в файле geoJson, и доступ к ним осуществляется с помощью метода, который выглядит следующим образом (Скопировано и вставлено по ссылке выше ... в этом коде они используют d3- запросить плагин для извлечения и анализа файла geoJson, который содержит другие данные о землетрясениях и т. д.): 

  _handleMapLoaded = event => {
    const map = this._getMap();

    requestJson(
      'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson',
      (error, response) => {
        if (!error) {
          // Note: In a real application you would do a validation of JSON data before doing anything with it,
          // but for demonstration purposes we ingore this part here and just trying to select needed data...
          const features = response.features;
          const endTime = features[0].properties.time;
          const startTime = features[features.length - 1].properties.time;

          this.setState({
            earthquakes: response,
            endTime,
            startTime,
            selectedTime: endTime
          });
          map.addSource(HEATMAP_SOURCE_ID, {type: 'geojson', data: response});
          map.addLayer(this._mkHeatmapLayer('heatmap-layer', HEATMAP_SOURCE_ID));
        }
      }
    );
  };

Это замечательно, если вы используете GeoJson, и я сделал это совсем немного, чтобы указать d3 на объект для штатов, округов или почтовых индексов США ... Однако то, что я пытаюсь сделать, гораздо проще! У меня есть массив данных, которые я извлекаю и передаю в качестве реквизита для этого компонента тепловой карты, и он выглядит примерно так: 

[
{name: locationOne, latitude: 1.12345, longitude: -3.4567},
{name: locationTwo, latitude: 1.2345, longitude: -5.678},
...etc

]

Таким образом, вопрос в том, если я не использую geoJson, как мне сообщить карте тепла, какие координаты использовать? Любая помощь приветствуется !!!

1 Ответ

0 голосов
/ 04 июля 2019

Даже если данные в вашем массиве не geoJson, мы можем манипулировать ими в geoJSON.Мы можем сделать это, создав фабричную функцию, которая возвращает действительный geoJSON с использованием данных массива.

Как только данные преобразованы в geoJSON, их можно использовать, как показано в примере, который вы нашли.

const rawData = [
  {name: 'Feature 1', value: 2, latitude: 1.12345, longitude: -3.4567},
  {name: 'Feature 2', value: 5, latitude: 1.2345, longitude: -5.678},
];

const makeGeoJSON = (data) => {
  return {
    type: 'FeatureCollection',
    features: data.map(feature => {
      return {
        "type": "Feature",
        "properties": {
          "id": feature.name,
          "value": feature.value
        },
        "geometry": {
          "type": "Point",
          "coordinates": [ feature.latitude, feature.longitude]
        }
      }
    })
  }
};

const myGeoJSONData = makeGeoJSON(rawData);

console.log(myGeoJSONData);
...