Ошибка при реализации Geojson в React Native

Geojson является компонентом модуля «react-native-geojson». Итак, вам нужно импортировать этот модуль, добавить эту строку поверх вашего класса.

import Geojson from 'react-native-geojson';

Также, «если еще этого не было», запустите npm install react-native-geojson внутри папки вашего проекта.

Также, как я заметил (может быть, я ошибаюсь), Geojson не поддерживает изображения напрямую, поэтому вы можете попробовать добавить этот код вместо функции displayLightPollutionLayer:

return (
  <Geojson geojson={features}>
          <Image source="https:\/\/nightskybrightness.s3.eu-west-3.amazonaws.com\/ArtificialSkyBrightness537.JPG" style = {{flex:1}}/>
  </Geojson>
)

Вот как я решил свою проблему. На сегодняшний день в react-native-maps v0.24.2 Geojson не отображает изображения. Насколько я понимаю, компонент Geojson в react-native-maps отображает только точки, многоугольники и полилинии. Поэтому я переключился на компонент Overlay для размещения изображений в заранее определенных координатах на карте (Apple Maps для iOS). Я еще не тестировал решение для Google Maps на Android, но думаю, что оно должно работать нормально.

Я разделил код на две части: 1. Создание оверлеев. 2. Создание представления карты, включающего вышеуказанные наложения.

class PollutionOverlay extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {

    return(
      <View>

        <Overlay
        image={{ uri: 'valid URI'}}
        bounds={[[50.9375138445,-4.12507035],[42.4041839245,4.2499263]]}
        />

        <Overlay
        image={{ uri: 'valid URI`enter code here`'}}
        bounds={[[50.9375138445,4.2499263],[42.4041839245,12.62492295]]}
        />

      </View>

    )
  }
}

export default PollutionOverlay;

-------------------------------------

import PollutionOverlay from 'valid path';
class LightPollutionAtlas extends React.Component {

  constructor(props) {
    super(props);
  }

render() {


  return(
      <MapView
      style={styles.mapStyle}
      maxZoomLevel={9}
      >

      <PollutionOverlay />

      </MapView>

  )
}
}

const styles = StyleSheet.create({
  mapStyle: {
    flex: 1
  }
});

export default LightPollutionAtlas;

Обновите свою функцию displayLightPollutionLayer следующим образом, чтобы нарисовать многоугольник,

displayLightPollutionLayer(markers) {
const features = {
      "type": "FeatureCollection",
      "name": "artificialNightSkyBrightness_example",
      "crs": { "type": "name", "properties": { "name": 
      "urn:ogc:def:crs:OGC:1.3:CRS84" } },
      "features": [
        {
          "type": "Feature",
          "properties": {
            "Name": null,
            "description": null,
            "drawOrder": 15,
            "icon": "https:\/\/nightskybrightness.s3.eu-west- 3.amazonaws.com\/ArtificialSkyBrightness537.JPG"
          },
          "geometry": { 
            "type": "Polygon",
            "coordinates": [
              [
                [ 4.2499263, 50.937513844500003 ],
                [ 4.2499263, 42.404183924500003 ],
                [ -4.12507035, 42.404183924500003 ],
                [ -4.12507035, 50.937513844500003 ],
                [ 4.2499263, 50.937513844500003 ]
              ]
            ]
          } 
        }
      ]
    }
   return (<Polygon
      coordinates={this.getCoordinates(features)}
      title={marker.title}
      description={marker.description}
    />);
}

getCoordinates(features) {
     let updatedFeatures = features.features[0].geometry.coordinates.map((coordinate) => {latitude: coordinate[0], longitude: coordinate[1]});
     return updatedFeatures;
}

render() {
    return (
<MapView
  region={this.state.region}
  onRegionChange={this.onRegionChange}
>
  {this.displayLightPollutionPolygonLayer()}
</MapView>
)
}

Я обновил логику, добавьте все необходимые проверки, чтобы избежать нежелательных сбоев.