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

나의 재물운? 연애운은?

AI가 봐주는 내 사주팔자 - 운세박사

https://aifortunedoctor.com/

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

영리치 0 812 2023.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,
});


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


Comments

나의 재물운? 연애운은?

AI가 봐주는 내 사주팔자 - 운세박사

https://aifortunedoctor.com/

Category
Magazine
훈남/훈녀
 
 
 
상점
Facebook Twitter GooglePlus KakaoStory NaverBand