Voulez-vous mettre à jour le centre de MapContainer de React-Leaflet-js ?

Question

J'ai récemment commencé à utiliser React. Mais lorsque j'ai commencé à utiliser React-Leaflet Map, j'ai rencontré des problèmes. J'ai un fichier Json de tous les pays et je veux zoomer uniquement sur le pays que j'ai sélectionné. Mais je ne sais pas comment faire ?

function Map({ center, zoom }) {
    return (

    )
}

Voici mon fichier Map.js, que j'ai importé dans mon fichier App.js et auquel j'ai fourni les données en utilisant la méthode useState.

Answer 1

Donc, le positionnement des feuilles (comme la plupart des bibliothèques de cartographie web) fonctionne sur la latitude et la longitude. L'API que vous avez mentionnée dans votre commentaire prend un nom de pays en paramètre et renvoie quelques données COVID. Pour que votre carte réagisse de manière appropriée, vous devez géocoder les noms de pays. Une recherche rapide m'a amené à ce dépôt qui contient le nom du pays et les latlng du centre du pays : https://github.com/eesur/country-codes-lat-long.

Le fichier json référencé là-bas contient des données au format :

{
  "country" : "Albanie",
  "alpha2" : "AL",
  "alpha3" : "ALB",
  "numeric" : 8,
  "latitude" : 41,
  "longitude" : 20
}

Pour simplifier, disons que nous téléchargeons ce fichier, le renommons en .js et importons le contenu. Maintenant, vous avez toutes ces données à votre disposition.

Votre code ne montre pas où vous effectuez l'appel API pour obtenir vos données COVID. Mais disons qu'il y a une fonction que vous appelez qui définit la variable d'état selectedCountry. Vous pouvez avoir un useEffect qui répond à cette variable d'état :

import countrycodes from './country-codes-lat-long-alpha3.js'

function App() {

  const [selected, setSelected] = useState("")
  const [center, setCenter] = useState([55, 122]) // some initial state

  // Appelez cet effet chaque fois que selected change
  // (en supposant que la valeur de selected est un code de pays alpha3 à 3 caractères)
  useEffect(() => {
    if (selected){
      fetch(`/v3/covid-19/countries/${selected}`)
        .then(res => {
          // faites quelque chose avec vos données de réponse
          // définissez le centre de la carte sur le lat lng défini par le json de référence
          const countryData = countrycodes.ref_country_codes.filter(country => 
            country.alpha3 === selected
          )[0]
          const countryLatLng = {
            lat: countryData.latitude,
            lng: countryData.longitude,
          }
          setCenter(countryLatLng)
        })
    }
  }, [selected])

  return (

       setSelected(e.target.value}>
        {une_série_d'options_de_pays}

  )
}

En résumé, votre élément définit la variable d'état selected. Lorsque selected change, il déclenche le useEffect, qui appelle votre API et fait ce que vous voulez avec les données. Lorsque les données reviennent, l'effet vérifie les données de référence pour obtenir le latlng du pays sélectionné. setCenter définit ensuite la variable d'état center sur ce latlng, qui est transmis à la carte. La carte devrait répondre en ajustant son centre. C'est juste un plan de base de la manière dont vous accompliriez votre objectif. Le principal problème avec ce que j'ai écrit est qu'il ne définit que le centre de la carte. Probablement, l'effet que vous recherchez est de définir la vue de la carte pour montrer le pays. Pour ce faire, vous avez besoin non seulement du centre latlng du pays, mais de l'ensemble des LatLngBounds du pays sélectionné. Obtenir ce type de données n'est pas aussi simple. Consultez ce fil sur l'échange GIS pour obtenir ces données. Disons que vous parvenez à obtenir une source de données qui peut vous donner les limites d'un pays en fonction du nom du pays ou du code à 2/3 lettres. Par exemple : [ { "country" : "Albanie", "alpha2" : "AL", "alpha3" : "ALB", bounds: [ // inventé { lat: 40.712, lng: -74.227 }, { lat: 42.712, lng: -72.227 }, } ... // tous les autres pays ] Vous pouvez utiliser la même méthode que j'ai décrite ci-dessus, mais au lieu de faire ```javascript const [center, setCenter] = useState(initialCenter) vous feriez const [bounds, setBounds] = useState() Ensuite, vous pouvez définir la propriété bounds du MapContainer dans votre useEffect : const [bounds, setBounds] = useState() useEffect(() => { if (selected){ fetch(`/v3/covid-19/countries/${selected}`) .then(res => { const countryData = countrycodes.ref_country_codes.filter(country => country.alpha3 === selected )[0] setBounds(country.bounds) }) } }, [selected]) return ( ... ) Cela créerait l'effet que une fois que l'utilisateur sélectionne l'option, la carte s'adapte aux limites du pays et le pays est à l'écran. Bien sûr, vous avez besoin de la bonne source de données, et la trouver est une tâche en soi, hors du champ de votre question. En conclusion, il n'y a rien de préconstruit dans leaflet ou react-leaflet qui trouvera les bonnes coordonnées sur la carte uniquement en fonction du nom du pays. Vous avez besoin d'une manière de géocoder les coordonnées du pays en fonction de son nom, puis utilisez cela dans votre carte. J'espère que cela vous aidera à démarrer.