🙆🏻‍♀️ 객체 GeoJSON 형태 저장 + 표출 🙆🏻‍♀️

그려진 객체 저장

🙆🏻‍♀️ 맵에 객체 그리기 + 수정 🙆🏻‍♀️

지난 시간에는 맵을 표출하고 객체를 그리는 작업을 했다.
이번에는 그려진 객체를 저장하고 또, 저장된 객체를 지도에 뿌리는 작업을 해보자.

저장된 객체를 다시 뿌려주기 위해 geoJSON 형태로 저장해야 한다. 먼저 관련 모듈을 import 한다.

import GeoJSON from "ol/format/GeoJSON";

그 후 API POST 할 때, 바디에 그려진 객체들을 geoJSON로 변환 뒤 담으면 된다.

new GeoJSON().writeFeatures(featuresLayer.getSource().getFeatures());

저장된 객체 표출

이제 API GET요청 등을 하면 geoJSON 데이터를 얻을 것이다.
이제 그 데이터를 그릴 수 있게 객체를 가져오고 기존 레이어에 추가하면 끄-읏!

useEffect(() => {
  if (Object.keys(gisMap).length > 0) {
    // 같은 레이어에 불러오기
    const getFeatureInfo = new GeoJSON().readFeatures('GET으로 받아온 데이터');
    featuresLayer.getSource().addFeatures(getFeatureInfo);
  }

    return () => {};
  }, [gisMap, featuresLayer]);

어디 보자...🤔

현재 GIS프로젝트를 타입스크립트 + 리액트로 하고 있는데, 타입스크립트 공부가 절실하다는 것을 느낀다.
ol 기능들을 클래스화 하면 엄청 유용할 거 같은데 자, 하면 됩니다 해보자 하며 글 마무리...

Openlayers 공식 사이트