Map React Wijmo 버블 맵으로 JSON 데이터 집합 매핑
페이지 정보
작성자 GrapeCity
작성일 2021-08-18 16:10 조회 1,161회
댓글 0건
본문
관련링크
인간은 수 세기 동안 최고의 관광 명소부터 도시의 최고의 술집에 이르기까지 지도에 정보를 축적하여왔습니다.
오늘날의 지도들은 보통 디지털과 웹을 기반으로 하며, 날씨 정보에서부터 바이러스 핫스팟, 그리고 도시의 최고 술집에 이르기까지 모든 것을 표시합니다. 오늘은 Wijmo 버블 맵을 사용하여 유용한 오버레이 데이터로 지도를 쉽게 빌드하는 방법을 살펴보겠습니다.
튜토리얼에서는 Wijmo React 라이브러리를 사용하지만 Vue, Angular와 일반 JavaScript(JS) 라이브러리도 사용할 수 있습니다. 먼저 React 스타터 응용 프로그램을 설정한 다음 API에서 정적 GeoJSON을 사용하여 Wijmo 맵을 만듭니다.
마지막으로 라이브 API 데이터를 사용하여 도구 설명을 추가하는 방법을 살펴보겠습니다.
GrapeCity의 응용 프로그램은 캐나다 전역의 곡식 창고의 고정된 위치를 지도화할 것이고 라이브 COVID-19 정보를 지도화할 것입니다. 그보다 가능성이 무궁무진하다는 것을 깨닫는 것이 중요합니다.
본 자습서에서는 버전을 사용합니다. 이러한 라이브러리를 프로덕션에서 사용하려면 하여 설치 시 사용해야 합니다.
이 튜토리얼을 따르려면 npm과 React에 익숙해야 하지만 간단한 응용 프로그램을 빌드하는 모든 단계를 보여드리겠습니다.
React 페이지 설정
먼저를 사용하여 스켈레톤 React 응용 프로그램을 설정합니다.
npx create-react-app wijmo-geomaps
다음으로 React 응용 프로그램 만들기 설정 디렉터리로 변경합니다.
cd wijmo-geomaps
여기에서 Wijmo와 개발 서버 역할을 하는 서브 패키지를 설치합니다.
npm install @grapecity/wijmo.react.all # Installs all wijmo packages npm install serve # Simple dev server npm install bootstrap react-bootstrap # Bootstrap
이렇게 하면 npm에서 Wijmo를 설치할 수 있지만, 을 다운로드하고 npm ln을 사용하여 다운로드 폴더를 node_modules 폴더에 연결했습니다.
그런 다음 그곳에서 파일을 가져올 수 있습니다.
이제 스켈레톤 응용 프로그램을 빌드해 보겠습니다.
npm run build
마지막으로 브라우저에서 스타터 React 응용 프로그램을 확인할 수 있습니다.
serve -s build
위의 명령은 로컬 컴퓨터의 사용 가능한 포트에서 응용 프로그램을 제공합니다.
응용 프로그램의 React 로고를 보려면 브라우저에서 을 확인하세요.
이제 스타터 응용 프로그램을 만들고 Wijmo를 설치했으므로 Wijmo Geomaps를 사용하여 지도를 빌드할 수 있습니다.
정적 GeoJSON을 사용하여 Wijmo 맵 만들기
응용 프로그램에 내용을 추가해 보겠습니다. 먼저 디렉터리를 React 응용 프로그램의 소스 디렉터리로 변경합니다.
cd src
이제 주로 사용하는 텍스트 편집기에서 App.js 파일을 엽니다. 마지막 줄을 제외한 모든 줄을 제거합니다.
export default App;
Wijmo Geomaps를 사용하도록 응용 프로그램 클래스를 다시 작성할 것이므로 다음과 같이 App.js 파일을 설정하십시오.
import 'bootstrap/dist/css/bootstrap.min.css';
import * as React from ‘react’;
class App extends React.Component
{
constructor(props)
{
super(props);
}
render()
{
return (
<div>Hello, world!</div>
);
}
}
export default App;페이지를 다시 로드하면 "Hello, World" 텍스트가 표시됩니다.
이제 기본 정적 맵 작업을 시작하겠습니다. Wijmo 라이브러리를 사용할 수 있도록 다음 JS와 CSS 가져오기를 추가하십시오.
/* Wijmo */
import { FlexMap, GeoMapLayer, ScatterMapLayer } from '@grapecity/wijmo.react.chart.map';
import { Rect } from "@grapecity/wijmo";
import '@grapecity/wijmo.styles/wijmo.css';이제 자리 표시자를 Wijmo 지도를 담을 컨테이너로 바꿉니다. 맵이 보기 좋도록 React Bootstrap의 container-fluid 클래스를 사용합니다. 다음 JavaScript XML(JSX)을 반환합니다.
<div className=”container-fluid”> </div>
이제 Wijmo 맵 컴포넌트를 추가할 수 있습니다. Wijmo 맵은 일련의 레이어를 사용하며, JSX에서 나중에 선언된 레이어가 이전 레이어를 오버레이하여 원하는 만큼 레이어를 추가할 수 있습니다.
방금 만든 내부에 맵을 선언해 보겠습니다.
<FlexMap> </FlexMap>
지도 제목을 설정하는 데 헤더를 포함하여 FlexMap에 많은 속성을 추가할 수 있으며, tooltipContent는 지도 지점의 도구 설명에 표시할 문자열을 반환하는 함수를 전달할 수 있습니다. 지금은 헤더 속성을 사용하고 나중에 tooltipContent 속성을 설정합니다.
맵의 제목은 나중에 추가할 곡물 창고 데이터 소스를 가리킵니다.
<FlexMap header=”Grain Elevators in Canada”> </FlexMap>
이 데이터 집합은 Wijmo 맵에서 사용하는 형식인 GeoJSON을 반환하는 공개 REST API를 통해 사용할 수 있습니다.
이제 응용 프로그램에 캐나다 지도를 추가해 보겠습니다. 이 아웃라인을 FlexMap 내부에 GeoMapLayer로 추가할 수 있습니다.
<FlexMap header=”Grain Elevators in Canada”>
<GeoMapLayer
url="[https://raw.githubusercontent.com/johan/world.geo.json/master/countries/CAN.geo.json](https://raw.githubusercontent.com/johan/world.geo.json/master/countries/CAN.geo.json)"
style={{ fill: "transparent", stroke: "black" }}
/>
</FlexMap>GeoJSON 데이터를 GeoMapLayer에 URI로 제공하고 최소한의 CSS 스타일을 추가합니다. 응용 프로그램을 다시 빌드하고 다시 로드하면 지도에 캐나다의 아웃라인이 표시됩니다.
아웃라인은 있지만 지도가 충분히 확대되지 않아 작게 보입니다.
이를 콜백으로 해결하겠습니다.
Wijmo Geomaps는 지도의 GeoJSON 소스가 변경될 때마다 트리거되는 itemsSourceChanged 이벤트를 지원합니다.
이 경우 지도가 로드될 때 한 번만 발생하므로 이벤트를 처리하면서 확대하도록 하겠습니다. 이를 위해 생성자에 다음 줄을 추가하십시오.
this.canadaBB = new Rect(-80, 30, 80, 80);
앞에서 가져온 Rect 클래스를 사용하여 캐나다의 아웃라인에 초점을 맞춘 경계 사각형을 정의합니다. 사각형의 왼쪽 위 모서리는 (-80, 30)에 있고 양쪽 변의 길이를 80단위로 설정합니다.
다음으로 itemsSourceChanged 이벤트에 대한 처리기 메서드를 추가합니다.
itemsSourceChanged(layer)
{
layer.map.zoomTo(this.canadaBB);
}이 처리기는 리스너와 함께 레이어에 전달되고 GeoJSON 데이터가 로드될 때 호출됩니다. 레이어를 사용하여 맵을 가져온 다음 앞에서 정의한 경계 상자를 사용하여 캐나다의 아웃라인을 확대합니다. GeoMapLayer에 전달될 때 제대로 작동하도록 생성자에서 이 처리기를 바인딩하는 것을 잊지 마십시오.
this.itemsSourceChanged = this.itemsSourceChanged.bind(this);
마지막으로 GeoMapLayer에 속성을 추가하여 레이어 처리기를 설정합니다.
itemsSourceChanged={this.itemsSourceChanged}응용 프로그램을 빌드하고 다시 로드합니다. GeoJSON 데이터가 로드될 때 처리기가 확대되었으므로 캐나다는 이제 더 커 보입니다.
이제 캐나다의 아웃라인이 있으므로 캐나다 정부의 GeoJSON 데이터 집합을 두 번째 GeoMapLayer로 추가하여 캐나다의 곡물 창고 위치를 표시할 수 있습니다.
로 이동하여 'GeoJSON' 버튼을 클릭하고 해당 페이지의 URL을 복사합니다. 해당 URL을 GeoMapLayer에 전달해야 합니다.
또한 위치를 주황색으로 지정하여 눈에 띄게 만들 것입니다.
전체 Flexmap은 다음과 같습니다.
<FlexMap header=”Grain Elevators in Canada”>
<GeoMapLayer
url="[https://raw.githubusercontent.com/johan/world.geo.json/master/countries/CAN.geo.json](https://raw.githubusercontent.com/johan/world.geo.json/master/countries/CAN.geo.json)"
style={{ fill: "transparent", stroke: "black" }}
/>
<GeoMapLayer
url="[https://www.agr.gc.ca/atlas/data_donnees/agr/cgcElevators/geoJSON/cgcElevators2018.geojson](https://www.agr.gc.ca/atlas/data_donnees/agr/cgcElevators/geoJSON/cgcElevators2018.geojson)"
style={{ fill: "transparent", stroke: "orange" }}
/>
</FlexMap>다시 빌드하고 다시 로드합니다. 이제 2018년 캐나다 곡식 창고의 위치 주변에 주황색 아웃라인이 보일 것입니다.
마찬가지로 API에서 인식할 수 있는 배경과 데이터를 표시하는 지도를 만들었습니다. 확대하면 캐나다의 곡물 창고 대부분이 초원 지대에 위치해 있는 것도 볼 수 있습니다.
또한, 더 많은 레이어와 데이터를 추가하여 더욱 복잡한 디자인을 쉽게 만들 수 있습니다.
로컬 파일이나 API와 같은 GeoJSON 리소스를 가리키는 URL만 제공하면 되며 해당 정보는 지도에 표시됩니다.
라이브 데이터 추가
몇 가지 컴포넌트와 메서드를 추가함으로써 라이브 API의 데이터를 쉽게 포함할 수 있습니다. 캐나다의 COVID-19 상황 데이터를 제공하는 를 사용합니다.
이 실시간 데이터를 전날 각 지방에서 보고된 환자 수를 보여주는 열 지도 시각화로 변환할 것입니다. 다음 URI에서 데이터를 가져옵니다: https://api.opencovid.ca/timeseries?stat=cases&loc=prov&after={prev-DD-MM-YYYY}&before={cur-DD-MM-YYYY}
우리는 주당 총 사례의 수를 가져오기로 선택했습니다.
자리 표시자는 이후 매개변수에는 전날 날짜를 전달하고 이전 매개 변수에는 현재 날짜를 전달하여 전날 데이터를 가져옴을 나타냅니다.
먼저 생성자에 날짜 포맷터 개체를 추가하겠습니다.
this.dtFormatter = new Intl.DateTimeFormat("en-CA",
{
year: "numeric",
month: "2-digit",
day: "2-digit"
}
);이렇게 하면 날짜의 일부를 가져올 개체가 생성됩니다.
매개 변수를 통해 API에 전달할 날짜를 생성하는 데 필요한 4자리 연도와 2자리 월, 일 값을 얻을 수 있습니다.
어제와 오늘의 날짜를 올바른 형식의 문자열로 변환하는 메서드를 클래스에 추가하겠습니다.
getDates()
{
return {
"today": this.dtFormatter.formatToParts(new Date()).reverse().map(part => part.value).join(""),
"yesterday": this.dtFormatter.formatToParts((new Date()).setDate((new Date()).getDate() - 1)).reverse().map(part => part.value).join("")
};
}이 메서드는 오늘과 어제에 대한 두 키를 포함하는 개체를 반환합니다.
코드는 다음을 수행합니다. 어제 또는 오늘 날짜를 가져오고, 이를 포맷터에 전달하여 년, 월, 일을 정수로 반환하고 목록을 DD-MM-YYYY 순서로 되돌리고 목록의 각 날짜-시간 개체에서 번호를 추출한 후 함께 결합합니다.
다행히 날짜 포맷터는 OpenCOVID API가 기대하는 파선을 삽입합니다. getDates의 출력을 콘솔에 기록하면 다음과 같은 문자열이 표시되어야 합니다.
이제 날짜가 정해졌으므로 OpenCOVID API에 요청을 보내고 맵에서 사용할 수 있는 데이터에 응답을 구문 분석하는 다른 메서드를 추가할 수 있습니다.
async getData(dates)
{
const url = "https://api.opencovid.ca/timeseries?stat=cases&loc=prov&after=" + dates.yesterday + "&before=" + dates.today;
const resp = await fetch(url);
if (!resp.ok)
{
throw new Error(resp.statusText);
}
const json = await resp.json();
return json;
}getData는 getDates가 반환한 날짜 개체를 가져와 URL을 생성하는 데 사용합니다.
그런 다음 서버로부터 응답을 기다리고, 응답을 받는 즉시 JSON으로 변환한 후 변환된 응답을 반환합니다. 응답이 유효하지 않은 경우에도 오류가 발생합니다.
데이터를 가져오는 마지막 단계는 componentDidMount 수명 주기 메서드에서 getData를 호출하는 것입니다.
async componentDidMount()
{
const dates = this.getDates();
try
{
let apiDat = await this.getData(dates);
this.setState({
covidData: apiDat
});
}
catch (e)
{
console.log("componentDidMount: error occurred\nError: %o", e);
}
}GrapeCity 응용 프로그램은 전날의 COVID 데이터를 가져오는 중이라 처음 컴포넌트가 로드될 때만 이 메서드를 호출합니다.
데이터를 기록하면 다음과 같은 구조가 나타납니다.
간단히 만들기 위해 누적된 사례 수만 표시합니다.
데이터를 표시하려면 먼저 사례의 수를 지역에 매핑하는 보이지 않는 "데이터 맵"을 생성자에 만듭니다.
this.state = {
dataMap: new Map(),
loadedData: false
};열 지도가 데이터 로드 후에만 렌더링되도록 부울 변수를 추가합니다.
다음으로 componentDidMount로 돌아가서 각 지역의 누적 사례 수를 해당 지역과 연결하는 몇 가지 코드를 추가해 보겠습니다.
apiDat.cases.forEach(report => {
this.dataMap.set(report.province, report.cumulative_cases);
});
this.setState({
covidData: apiDat,
loadedData: true
});데이터를 지역에 매핑하면 React에 새로운 COVID 데이터와 열 지도 계층을 표시할 수 있는 부울로 페이지를 다시 렌더링하도록 지시합니다. 다음으로 열 지도 계층에서 요청할 때 숨겨진 지도에서 데이터를 가져오는 방법을 추가합니다.
필요한 경우 이 방법은 숨겨진 데이터 맵에 사용된 더 긴 이름의 지방 이름을 COVID-19 데이터 집합에 사용된 약어로 변환합니다. 또한 사례의 비율을 반전시키는 방법을 추가하므로 사례 수가 많은 지방은 더 어둡게 채색됩니다.
binding(o)
{
let nameConv = {
// Format: GeoJSON name : COVID data name
"Newfoundland and Labrador": "NL",
"British Columbia": "BC",
"Northwest Territories": "NWT",
"Prince Edward Island": "PEI",
"Yukon Territory": "Yukon"
};
var dataMapName = o.properties.name;
if (o.properties.name in nameConv)
{
dataMapName = nameConv[o.properties.name];
}
return this.state.dataMap.get(dataMapName);
}
scale(v)
{
return 1 - v;
}또한 이러한 새로운 메서드가 콜백으로 제대로 작동하는지 확인하기 위해 생성자에 바인딩해 보겠습니다.
this.binding = this.binding.bind(this); this.scale = this.scale.bind(this);
이제 바인딩 메서드를 사용하여 ColorScale 요소를 추가합니다.
먼저 다른 Wijmo React 차트 요소와 함께 가져오겠습니다.
또한 열 지도를 보여주기 위해 색상 팔레트를 가져오고 각 색상이 무엇을 나타내는지 사용자에게 알려주는 색상 스케일을 가져올 것입니다.
import { FlexMap, GeoMapLayer, <u>ColorScale</u> } from '@grapecity/wijmo.react.chart.map';
import { Palettes } from "@grapecity/wijmo.chart";
import { FlexChartLegend } from "@grapecity/wijmo.react.chart";또한 GeoMapLayer를 단일 요소에서 열림 및 닫힘 태그가 있는 요소로 변경하여 ColorScale을 포함하며, 계층 뒤에 FlexChartLegend를 추가하여 지도 왼쪽에 축척을 표시합니다.
<GeoMapLayer
url="https://raw.githubusercontent.com/codeforamerica/click_that_hood/master/public/data/canada.geojson"
style={{ fill: "transparent", stroke: "black" }}
itemsSourceChanged={this.itemsSourceChanged}
>
{this.state.loadedData &&
<ColorScale
colors={Palettes.Diverging.RdYlBu}
binding={this.binding}
scale={this.scale}
/>
}
</GeoMapLayer>
<FlexChartLegend position="left"></FlexChartLegend>부울을 사용하여 COVID 데이터를 로드한 후에만 색상 스케일이 표시되도록 합니다. 지도는 더 많은 영향을 받는 지역에서 더욱 붉은 색을 표시합니다.
이제 API의 라이브 데이터를 표시하는 지도가 있습니다.
다음 단계
Wijmo Geomaps와 표준 GeoJSON 형식을 사용하면 지도를 쉽게 만들 수 있습니다. 정적 JSON 파일을 빠르게 포함하거나 URL을 지도에 지정할 수 있습니다.
정적 기본 맵이 준비되면 Wijmo의 컴포넌트와 JavaScript 후크를 사용하여 데이터를 사용자 정의 형식으로 표시하거나 라이브 데이터를 표시할 수 있습니다. React, Vue, Angular 또는 일반 JavaScript와 함께 작동하며 npm에서 패키지를 설치하거나 전체 개발자 패키지, 소스 TypeScript를 다운로드하고 샘플을 사용하는 등의 작업을 수행할 수 있습니다.
다음 맵을 만들거나 수백 개의 사용자 인터페이스 컴포넌트 중 하나를 응용 프로그램에 추가하려면 확인해보세요.
지금 바로 Wijmo를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
