Блог

Я использую библиотеку react-native-mapbox-gl / maps в своем приложении react-native, и я пытаюсь показать <MapboxGL.ShapeSource , что загружает источник GeoJSON, вот так.

У меня есть этот код, который работает, однако, поскольку для завершения загрузки данных GeoJSON требуется некоторое время, я не смог найти способ показать пользователю, загружаются ли данные или они готовы, например, с помощью счетчика.

Мой вопрос: есть ли способ определить, когда MapboxGL.ShapeSource завершается загрузка его данных или когда MapboxGL.FillLayer они видны на карте?

 import React from 'react';
import MapboxGL from '@react-native-mapbox-gl/maps';

const DemographicsMapLayer = () => {  

  const dataSourceUri = 'https://gist.githubusercontent.com/victor0402/dc3b40195a55ed998a45189b7fb4939b/raw/d7021c29637621e07a82e771d89ea278de48fb99/demographics.json'

  return (
    <MapboxGL.ShapeSource id={'demographicSourceID'} url={dataSourceUri}>}
         <MapboxGL.FillLayer
            id={'Millenials'}
            key={'Millenials'}
            sourceID={'demographicSourceID'}
            filter={['==', '$type', 'Polygon']}
            style={{ fillOpacity: 0.4 }}
            onLayout={e => console.log('[FillLayer] onLayout', e)}
          />
    </MapboxGL.ShapeSource>

 

Версия библиотеки в моем package.json файле:

   "@react-native-mapbox-gl/maps": "^8.1.0-rc.9",
 

Я пытался использовать onLayout событие как в FillLayer, так и в ShapeSource, но не смог получить полезную информацию, возможно, я что-то не то ищу.