MESCIUS의 Wijmo FlexMap은 웹 개발자가 멋진 대화형 지도를 쉽게 만들 수 있도록 다양한 기능을 제공하는 라이브러리입니다.

이번 스터디에서는 ScatterMapLayer 컴포넌트의 기능에 초점을 맞추어, Wijmo FlexMap의 기능을 자세히 살펴봅니다.

목표는 공항 위치를 시각화하는 멋진 세계 지도를 만들어 FlexMap이 지리적 데이터를 React 애플리케이션 내에서 얼마나 강력한 비주얼로 전환하는지, 그 방법에 대해 보여 드릴 것입니다.

FlexMap을 사용하면 단순하고 유연하게 지도를 제작할 수 있어, 응용 프로그램에 지도를 원활하게 통합하려는 개발자들에게 이상적인 선택지입니다.

직관적 API 디자인

FlexMap은 지도 제작 프로세스를 간소화하는 직관적 API 디자인을 갖고 있습니다.

개발자는 쉽게 계층을 구성하고, 스타일을 사용자 정의하고, 데이터 바인딩을 처리할 수 있습니다.

지리 컨텍스트를 위한 GeoMapLayer

FlexMap의 GeoMapLayer는 지리 컨텍스트를 위한 견고한 기반을 제공합니다.

이 레이어를 통합함으로써 우리는 세계 지도를 위한 캔버스를 구축하고 국가 표현의 정확성과 정밀도를 보장합니다. 이 레이어를 추가하려면 geoJSON 데이터가 필요합니다.

데이터를 가져오는 데는 많은 방법이 있습니다.

예를 들어 Natural Earth를 확인하고 파일을 다운로드할 수 있습니다.

데이터를 가져온 다음에는 응용 프로그램에 .json 파일로 저장하세요!

geoJSON 데이터는 다음과 같이 표시됩니다.

{
  "type": "FeatureCollection",
  "name": "ne_110m_admin_0_countries",
  "crs": {
    "type": "name",
    "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" }
  },
  "features": [
    {
      "type": "Feature",
      "properties": {
        "featurecla": "Admin-0 country",
...

데이터 시각화를 위한 ScatterMapLayer 

scatterMapLayer 기능을 사용하면 데이터 요소를 동적으로 시각화하여 지도에 생명을 불어넣을 수 있습니다.

여기에서는 ScatterMapLayer를 활용하여 전 세계의 공항 위치를 표시합니다.

ScatterMapLayer로 React 세계 지도 제작

이제 FlexMap을 사용하여 React 응용 프로그램을 빌드하는 프로세스 및 scatterMapLayer 및 공항 위치 데이터를 사용하는 방법을 자세히 살펴보겠습니다.

샘플 애플리케이션 & 소스코드를 실시간으로 확인해 보세요!

프로젝트 설정

Create React App을 사용하여 새로운 React 프로젝트를 만듭니다.

npx create-react-app flexmap-demo

설정이 완료되면 Wijmo FlexMap을 설치합니다.

npm install @grapecity/wijmo.react.all

FlexMap을 생성합니다.

src 폴더에서 WorldMap.js 컴포넌트를 만듭니다.

다음 코드를 삽입합니다.

import React from "react";
import {
  FlexMap,
  GeoMapLayer,
  ScatterMapLayer,
} from "@grapecity/wijmo.react.chart.map";
​
const WorldMap = ({ data }) => {
  return (
    <FlexMap itemsSource={[]}>
    </FlexMap>
  );
};
​
export default WorldMap;

geoJSON 및 GeoMapLayer 추가합니다.

itemsSource 속성이 geoJSON 데이터를 geoMapLayer에 바인딩합니다.

*JSON 데이터를 가져오려면 샘플 애플리케이션 코드를 참고하세요! 

import earth from "./data/natural-earth-vector.json";

const WorldMap = ({ data }) => {
  return (
    <FlexMap itemsSource={[]}>
      <GeoMapLayer itemsSource={earth} />
    </FlexMap>
  );
};

scatterMapLayer를 추가합니다.

const WorldMap = ({ data }) => {
  return (
    <FlexMap itemsSource={[]}>
      <GeoMapLayer itemsSource={earth} />
      <ScatterMapLayer itemsSource={data} binding="coordinates" />
    </FlexMap>
  );
};

WorldMap 컴포넌트와 공항 데이터(JSON용 참조 코드 참고)를 src/App.js의 기본 응용 프로그램에 통합합니다

import React from "react";
import WorldMap from "./WorldMap";
import airports from "./data/airports.json";
import "@grapecity/wijmo.styles/wijmo.css";
​
function App() {
​
  return (
    <div className="App">
      <h1>FlexMap Demo</h1>
      <WorldMap data={airports} />
    </div>
  );
}
​
export default App;

React 앱을 실행합니다.

npm start

http://localhost:3000으로 이동하면 다음과 같이 생생한 공항 지도가 표시됩니다.

지도 제작 환경 개선

결론적으로 Wijmo FlexMap의 다양성과 ScatterMapLayer의 동적 기능을 통해 개발자의 지도 제작 환경이 개선되고 단순화됩니다.

공항 위치를 시각화하거나 다른 지리 데이터를 시각화하는 경우 모두, FlexMap은 응용 프로그램 내에서 매력적이고 유용한 지도를 만들기 위한 필수적인 도구인 것으로 입증되었습니다.

FlexMap의 기능을 활용하여 데이터를 강렬한 비주얼로 간편하게 전환해 보시길 바랍니다!

​

지금 바로 Wijmo를 다운로드하여 직접 테스트해 보세요!

• Wijmo 공식 홈페이지
• Wijmo 튜토리얼 및 샘플
• Wijmo Q&A
• Wijmo FAQ