JavaScript를 사용하여 전단지 맵에 등시선 추가

등시성 또는 도달 가능성 지도는 특정 위치에서 지정된 시간 내에 이동할 수 있는 영역을 나타냅니다. 예를 들어 등시선은 집에서 30분 이내에 도달할 수 있는 것을 표시할 수 있습니다. 예를 들어 등시 지도는 집에서 30분 이내에 얻을 수 있는 것을 보여줍니다.

Isochrones는 부동산, 여행 및 관광, 도시 계획 및 기타 위치 인식 디지털 제품에서 분석 도구로 점점 더 많이 사용되고 있습니다. 다음은 등시적 구현의 몇 가지 예입니다.

택시 서비스를 이용할 수 있는 지역을 찾습니다.

네트워크 범위 확인;

장소의 연결성 및 도달 가능성을 추정합니다.

이 튜토리얼은 Leaflet map library 및 Geoapify Isolines API 을 사용하여 JavaScript 애플리케이션에 등시선을 추가하는 방법을 보여줍니다.

API로 등시성 생성

등시성을 계산하려면 어디에서 오는지, 어떻게 이동하는지, 목적지에 도착하는 데 소요되는 시간을 알아야 합니다.

귀하의 위치는 위도 및 경도 좌표로 위치하며 이동 시간은 초 단위로 측정되며 교통 수단입니다. 가장 인기 있는 교통 수단은 다음과 같습니다.


방법
설명

drive3.5톤 이하, 높이 1.6미터 이하의 자동차
light_truck3.5톤 미만의 소형 배달 트럭 또는 캠핑카
truck최대 22톤 트럭
bus여객 버스
scooter전동 스쿠터
bicycle자전거
walk걷는


Isolines에서 지원하는 더 많은 교통 수단에 대한 정보는 Isolines documentation page을 방문하십시오.

Geoapify를 사용하면 Isoline API 엔드포인트에 HTTP Get 요청을 보내야 합니다. 다음은 API URL의 예입니다.

https://api.geoapify.com/v1/isoline?lat=33.761758&lon=-84.394172&type=time&mode=drive&range=1800&apiKey=YOUR_API_KEY

다음은 JavaScriptfetch() 함수를 사용하여 API를 호출하는 방법입니다.

fetch(`https://api.geoapify.com/v1/isoline?lat=33.761758&lon=-84.394172&type=time&mode=drive&range=1800&apiKey=${myAPIKey}`)
.then(data => data.json())
.then(geoJSONFeatures => {
  // add isochrone as GeoJSON here
});

다음은 위의 URL에서 생성된 등시성 결과입니다.



API는 Leaflet 라이브러리를 포함한 대부분의 지도 라이브러리에서 상자에서 지원하는 GeoJSON object 을 반환합니다.

전단지 맵에 등시성을 추가하는 JavaScript

전단지 지도에 GeoJSON으로 등시선을 추가하려면 L.geoJSON() 메서드를 사용할 수 있습니다. 이 메서드는 시각화 및 데이터 변환을 지정하는 Isochrone 개체 및 옵션을 허용합니다.

다음은 등시 객체를 추가하고 스타일을 지정하는 방법을 보여주는 코드 샘플입니다.

L.geoJSON(geoJSONFeatures, {
  style: (feature) => {
    return {
      stroke: true,
      color: '#9933ff',
      weight: 2,
      opacity: 0.7,
      fill: true,
      fillColor: '#333399',
      fillOpacity: 0.15,
      smoothFactor: 0.5,
      interactive: false
    };
  }
}).addTo(map);

GeoJSON 레이어 시각화 옵션에 대한 자세한 내용은 Leaflet Documentation page을 참조하십시오.

JSFiddle 코드 샘플

앱이나 웹사이트에 등시성을 추가하는 데 도움이 되도록 JSFiddle에 코드 샘플을 준비했습니다.



다음은 전단지 지도를 만들고, API로 등시성을 얻고, 지도에서 시각화하는 방법을 보여주는 코드 샘플입니다.

지도 및 공간 데이터에 대해 자세히 알아보려면 Geoapify's tutorials 을 확인하십시오.