DeckGL react-map-gl 사용 시 mapRef flyTo 안먹는 이슈

N잡 | 국내주식 | 부동산 | 해외주식 | 투잡

개발 작업 의뢰 받음

- React, Django 웹플랫폼 개발 외주

- 각종 크롤러 및 프로그램 개발 외주

- IT 컨설팅, 개발 과외 등 (8만원/시간)

- React.js, Next.js, Open Street Map(OSM), Mapbox, Django Rest Framework, Firebase, Fast API, Expo(RN) Webview

- 현) 스타트업 풀스택 개발 및 연구원

- 서강대 경영 졸업, 크래프톤, ssg.com 출신 및 30명 규모 React SI 업체 창업 후 Pre-IPO 스타트업에 매각.

- 문의: https://open.kakao.com/me/0rich

DeckGL react-map-gl 사용 시 mapRef flyTo 안먹는 이슈

영리치 0 88 01.04 14:54

mapRef.current?.flyTo({
        center: [longitude, latitude],
        essential: true,
      });

위와 같이 mapRef flyto로 했을 때 안먹는 이슈가 있는 경우가 있음

<DeckGL initialViewState={initialViewState} controller={true}>
      <Map
        ref={mapRef}
        mapStyle="mapbox://styles/wemeetplace/clc4g2mnm003614k8q0qv1r5v"
        mapboxAccessToken={MAPBOX_ACCESS_TOKEN}
      >
        {storeList.map((store, i) => (
          <Marker
            key={i}
            latitude={store.location[0]}
            longitude={store.location[1]}
          >
            <button className="btn-marker" />
          </Marker>
        ))}
        {issData && (
          <Source type="geojson" data={issData}>
            <Layer {...issLayer} />
          </Source>
        )}
      </Map>
    </DeckGL>

DeckGL로 감싸고 그 안에 맵박스가 있는 경우,

지도의 center를 DeckGL에서 관리하기 때문에

DeckGL로 지도의 중앙점 이동시켜줘야함

이렇게 하면 됨.

const [initialViewState, setInitialViewState] = useState({
    longitude: 127.026,
    latitude: 37.5269,
    zoom: 8,
    pitch: 0,
    bearing: 0,
  });

setInitialViewState({
        longitude: longitude,
        latitude: latitude,
        zoom: 8,
        pitch: 0,
        bearing: 0,
      });

이런 식으로 위치 조정 가능함

0
0

Comments

이전 다음 목록