Отображение набора данных для получения значений для использования в другой карте в React - PullRequest
0 голосов
/ 11 ноября 2019

Я работаю над приложением React, которое отображает фермерские рынки в Филадельфии в качестве маркеров на карте Google с помощью библиотекиact-google-maps.

После создания карты Google я получаю доступ к рыночным данным фермера. через ArcGIS API и циклически перебирая массив данных, чтобы получить маркер для каждого фермерского рынка.

Я столкнулся с проблемой, потому что данные, которые у меня есть для местоположений в ArcGIS, возвращают информацию в виде координат xyкогда мне нужно, чтобы они были в широте и долготе, чтобы Карты Google могли их отображать. К счастью, в ArcGIS есть модуль для этого преобразования и способ использовать эти модули в React .

Я застрял в том, как успешно визуализировать маркер, что означает отображение набора данных, чтобы сначала преобразовать координаты, а затем использовать преобразованные координаты в каждом экземпляре маркера. С помощью приведенного ниже кода я получаю «Ошибка: объекты недопустимы как дочерние элементы React (найдено: [обещание объекта]). Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив». Я немного растерялся, любая помощь будет высоко ценится!

const Map = () => {
  const [markets, setMarkets] = useState([])

  useEffect(() => {
    axios.get(apiUrl)
      .then(res => {
        setMarkets(res.data.features)
      })
      .catch(err => console.log(err))
  },[])

  return (
    <GoogleMap 
      defaultZoom={12}
      defaultCenter={{ lat: 39.952583, lng: -75.165222 }}
    >
      {loadModules(['esri/geometry/support/webMercatorUtils'])
        .then(([webMercatorUtils]) => {
          markets.map(market => {
          let latLong = webMercatorUtils.xyToLngLat(market.geometry.x, market.geometry.y)
          return <Marker 
            key={market.attributes.OBJECTID} 
            position={{
              lat: latLong[1],
              lng: latLong[0]
            }}/>  
          })
        })}
    </GoogleMap>
  )}

const WrappedMap = withScriptjs(withGoogleMap(Map))
export default WrappedMap

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