React Native에서 Mapbox GL을 사용하여 경계 상자 찾기

최근 직장에서 Maps SDK for React Native을 사용하여 앱의 지도 기능을 구현했습니다.
뷰포트 외부에서도 모든 핀을 로드하면 성능 문제가 발생할 수 있으므로 내 작업은 주로 경계 상자를 가져와 화면에 표시할 핀을 결정하는 것이었습니다. 나는 며칠 동안 이 작업에 대해 고민하고 머리를 감았으며 다른 사람들이 약속 문제로 인해 경계 상자가 전혀 렌더링되지 않는 이 문제를 알아내는 데 더 좋은 시간을 갖기를 바랍니다. 이것은 또한 Relevant Issue입니다.

Maps SDK for React Native은 Mapbox GL JS을 기반으로 합니다. 다음은 Mapbox 지도를 iOS 및 Android 앱에 통합하기 위해 재사용 가능한 JS 구성 요소를 제공하는 커뮤니티 유지 React Native 라이브러리인 documentation for Mapbox Maps SDK for React Native입니다. 자원 봉사자들에 의해 유지되고 지속적으로 업데이트되고 있기 때문에 기존 구성 요소의 기능이나 소품의 일부 예가 명확하지 않았습니다.

제가 사용하려고 했던 함수는 MapView 컴포넌트의 getVisibleBounds() 였습니다. getVisibleBounds()는 사용자의 뷰포트에 표시되는 좌표 범위(ne, sw)를 반환합니다.
다음은 설명서의 사용 예입니다.const visibleBounds = await this._map.getVisibleBounds();내 MapPage를 기능 구성 요소로 렌더링했는데 this._map 를 사용할 수 없었습니다.

내 초기 시도는 경계 상자를 다음과 같이 반환하는 비동기 함수를 만드는 것이었습니다.

   const renderBox = async () => {
      try {
        const visibleBounds = await MapboxGl.MapView.getVisibleBounds();
      } catch(e) {
        return e
      }
        return visibleBounds
    }

그러나 이 함수는 다음과 같은 오류 메시지를 표시했습니다. Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}) . 이것은 약속 문제로 판명되었으며 다음은 이를 해결하는 방법입니다.

먼저 const [region, setRegion] = useState(location) 와 같은 위치의 초기 상태가 있는 지역 상태를 만들었습니다. location는 [longitude, latitude]와 같이 좌표를 나타내는 배열입니다.

useEffect 후크를 사용하여 사용자의 뷰포트에 있는 region의 모든 속성을 그대로 기록했습니다.useEffect(() => console.log(region), [region])다음은 로그였습니다.

[Sat Jul 16 2022 15:40:42.298]  LOG      {"geometry": {"coordinates": [-87.58876641738603, 42.53691705896288], "type": "Point"}, "properties": {"animated": false, "heading": -0, "isUserInteraction": true, "pitch": 0, "visibleBounds": [[Array], [Array]], "zoomLevel": 4}, "type": "feature" }

그래서 이 객체의 properties 속성을 로깅region.properties으로 검사하여 다음과 같은 로그를 얻었습니다.

[Sat Jul 16 2022 15:40:58.570]  LOG      {"animated": false, "heading": -0, "isUserInteraction": true, "pitch": 0, "visibleBounds": [[-78.56114431259272, 51.56343338258], [-96.64150070383894, 32.005443763933826]], "zoomLevel": 4}

따라서 region.properties.visibleBounds 를 얻음으로써 모든 지역 변경에서 사용자 뷰포트[[ne],[sw]]의 두 좌표를 얻을 수 있었습니다.

이 기사가 비슷한 문제를 겪고 있는 다른 사용자에게 도움이 되기를 바랍니다. getVisibleBounds() 함수를 직접 사용하여 더 나은 수정 사항이 있으면 대단히 감사하겠습니다!