turf

* 영어표기가 디폴트, 이하 한글표기

* TypeScript 기준

---

 

0. turf 가 뭔가요

    - https://turfjs.org/

    - GeoJson 라이브러리, 공간정보 관련

---

 

1. 어떻게 쓰나요

   1). 설치 (버전 참고:https://www.npmjs.com/package/@turf/turf/v/6.5.0)

npm i @turf/turf

 

 

   1-1). 혹은 html 의 script 태그 사용

           ts일 경우 라이브러리를 추가로 설치해야 하므로 npm 설치 권장

           (https://stackoverflow.com/questions/56106649/can-i-write-typescript-with-in-script-tag)

<script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>

 

 

   2). 사용하려는 컴포넌트.ts 에 import

import * as turf from '@turf/turf';

 

   3). turfjs.org/docs 를 참고하여 원하는 기능 활용

           나는 두개의 영역에 대한 교집합을 구하는 기능을 구현하기 위해 해당 라이브러리를 활용했다.

/** 교집합  영역 계산 */   private getIntersectArea(_param1: _customInterface, _param2: _customInterface ): 반환값 {     //비교 객체 생성     const point_Comp: turf.helpers.Position[] = [];     _param1.forEach((value: customInterface) => { point_Comp.push([ Longitude, Latitude ]); })     const point_Bbox: turf.helpers.Position[] = [];     _param2 .forEach ((value: customInterface) => { point_Comp.push([ Longitude, Latitude ]); })     //교집합 영역 체크     const intersection = turf.intersect(turf.polygon([point_Comp]), turf.polygon([point_Bbox]));     return intersection;   }

 

 

   3-1). 지도는 어떻게 띄우면 됩니까?

            자신이 시용하려는 맵과 연동하여 활용

            만약 google map 을 사용하려는 경우

            3-1-1). 설치

npm i @angular/google-maps npm i @types/google.maps

 

            3-1-2). index.html

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

 

            3-1-3). app.module.ts

@NgModule({                 declarations: [                   사용하려는 컴포넌트                 ],                 imports: [                   GoogleMapsModule                 ],                 ...               })

 

!! 해결 못한 문제 >>

 standalone: true 가 적용된 컴포넌트 자체에 import 하여 사용할 경우

html 에 <google-map></google-map> 가 정상적으로 작동하여 map 화면이 출력되지만

standalone: false 일 경우 제대로 import 되지 않은건지 화면이 안뜬다.

찾아보니  schemas: [ CUSTOM_ELEMENTS_SCHEMA  ]

를 사용해서 해결하라는데

저는 구글맵을 안쓸것 같아서 여기까지 진행하였습니다.