想要更新 React-Leaflet-js 的 MapContainer 的中心

Question

我最近开始使用 React。 但是当我开始 React-Leaflet Map 时，我遇到了问题。 我有一个所有国家的 Json 文件，我只想放大我选择的那个国家。 但我不知道我该怎么做？

function Map({ center, zoom }) {
    return (
        <div className="map">
            <MapContainer center={center} zoom={zoom} scrollWheelZoom={true}>
                <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>
            </MapContainer>
        </div>
    )
}

这是我的 Map.js 文件，我已将其导入我的 App.js 文件并使用 useState 方法为其提供数据。

Answer 1

所以 leaflet 定位（像大多数 web 映射库一样）适用于纬度和经度。 您在评论中引用的 API 接受国家名称作为参数，并返回一些 COVID 数据。 为了让您的 map 做出适当响应，您需要对国家/地区名称进行地理编码。 快速搜索找到了这个包含县名和国家中心纬度的仓库： latlng ://github.com/eesur/country-codes-lat-long 。

此处引用的 json 文件具有以下格式的数据：

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

为简单起见，假设我们下载该文件，将其重命名为 a.js，然后导入内容。 现在您拥有所有可用的数据。

您的代码未显示您在哪里进行 API 调用以获取您的 COVID 数据。 但是假设有一个 function 你称之为 state 变量selectedCountry 。 你可以有一个useEffect来响应 state 变量：

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

function App() {

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

  // Call this effect whenever selected changes
  // (assuming the value of selected is an alpha3 3 character country code)
  useEffect(() => {
    if (selected){
      fetch(`/v3/covid-19/countries/${selected}`)
        .then(res => {
          // do something with your response data
          // set the map center to the lat lng defined by the reference json
          const countryData = countrycodes.ref_country_codes.filter(country => 
            country.alpha3 === selected
          )[0]
          const countryLatLng = {
            lat: countryData.latitude,
            lng: countryData.longitude,
          }
          setCenter(countryLatLng)
        })
    }
  }, [selected])
  

  return (
    <div>
      <Map center={center} />
      <select onChange={() => setSelected(e.target.value}>
        {a_bunch_of_country_options}
      </select>
    <div>
  )
}

总而言之，您的<select>元素将设置selected的 state 变量。 When selected changes, it triggers the useEffect , which calls your api and does whatever you want with the data. 当数据返回时，效果会检查参考数据以获取所选国家/地区的latlng。 setCenter然后将 state 变量center设置为该纬度，该纬度将传递给 map。 map 应通过调整其中心来响应。

这只是您将如何实现目标的基本概述。 我所写的主要问题是它只设置了 map 的中心。 可能您正在寻找的效果是设置 map 视图以显示国家/地区。 为此，您不仅需要该国家/地区的中心latlng ，还需要所选国家/地区的整个LatLngBounds 。 获取这种数据并不是那么简单。 查看 GIS stack exchange 中有关获取该数据的线程。

假设您能够获得一个数据源，该数据源可以根据国家名称或 2/3 字母代码为您提供国家范围。 例如：

[
  {
    "country" : "Albania",
    "alpha2" : "AL",
    "alpha3" : "ALB",
    bounds: [ // made up
      {
        lat: 40.712, 
        lng: -74.227
      },
      {
        lat: 42.712, 
        lng: -72.227
      },  
  }
  ... // all the other countries
]

You can use the same method I described above, but instead of doing 

```javascript
const [center, setCenter] = useState(initialCenter)

你会做的

const [bounds, setBounds] = useState()

然后你可以在你的MapContainer中设置 MapContainer 的bounds属性：

  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 (
    <div>
      <Map center={someInitialCenter} bounds={bounds} />
      ...
    <div>
  )

这将产生这样的效果：一旦用户选择下拉列表，map 就符合国家的边界，并且国家在框架中。 当然，您需要正确的数据源，并且发现这本身就是一项超出您问题的 scope 的任务。

总之，leaflet 或 react-leaflet 中没有任何内容可以仅根据国家名称在 map 上找到正确的坐标。 您需要一种基于名称对国家坐标进行地理编码的方法，然后在您的 map 中使用它。 希望这能让你开始。