DECK.GL 시각화 Google Map 타임라인을 사용해 보세요!의 4탄 보도.
지난번는 DECK입니다.총 계정의 PathLayer를 사용하여 데이터를 그립니다.
이번에 나는 여기에 지도 구성 요소를 넣어서 표시하고 싶다.

카탈로그

본 보도는 5차례에 걸쳐 설명될 것이다.

React 및 DECK총 계정 환경 구축

브라우저에서 기본 읽기 코드 보기

DECK.총계정을 사용하여 단순 데이터 보기

맵 구성 요소의 표시← 이번에는 이거입니다.

GoogleMap 타임라인 데이터 표시

지난번 복습

지난번는 App입니다.나는 jsx에 아래의 코드를 썼다.
App.js

import React from "react";
import DeckGL from "@deck.gl/react";
import { PathLayer } from "@deck.gl/layers";

// Viewport 初期設定
const viewState = {
  longitude: -122.5,
  latitude: 37.75,
  zoom: 11
};

// 描画する地理データ
const data = [
  {
    path: [
      [-122.45, 37.7],
      [-122.5, 37.8],
      [-122.6, 37.7]
    ]
  }
];

export default class App extends React.Component {
  render() {
    const layer = [
      new PathLayer({
        id: "path-layer",
        data,
        getPath: d => d.path,
        getWidth: 30
      })
    ];
    return <DeckGL viewState={viewState} layers={layer}></DeckGL>;
  }
}

어셈블리 매핑

DECK.총결산은 지도 구성 요소가 없는 상황에서도 독립적으로 운행할 수 있지만 시각화된 지리 데이터를 볼 때 지도 정보를 표시하지 않는 것은 흥미롭지 않다.
DECK.GoogleMap 및 Mapbox
이번에는 맵박스로 그려보고 싶어요.
※ 지도 구성 요소의 협업에 대한 자세한 내용은 여기 참조하십시오.

맵박스란 무엇입니까?

맵박스는 미국 캘리포니아주 샌프란시스코에 위치한 위치 데이터 플랫폼이다.어쨌든 구글 지도 같은 지도 서비스.
최근 삼림과 합작해 소프트뱅크 시각기금의 출자를 받아 일본에서의 사업도 강화하고 있다.

참조: Mapbox.jp, 일본에서 사업 시작

참조: 숲에서 데이터를 제공하는 맵박스를 사용해 봤어요.

맵박스에서도 GoogleMap은 개발자에게 편리한 인터페이스를 많이 제공합니다.
예를 들어, Mapbox GL JS JavaScript 라이브러리
mapbox-gl의 이름도 노드 패키지를 공개했다.
이번에는 React 구성 요소로 사용할 수 있는 react-map-gl 을 사용해서 맵박스를 연합하세요.
※ 맵박스의 설명서여기
- box GL JS 매핑Github
-react-map-gl의 Github

Mapbox와 협업

react-map-gl 라이브러리 설치

먼저 react-map-gl 라이브러리를 설치합니다.

$ yarn add react-map-gl
yarn add v1.17.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=5".
warning "react-scripts > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.

... （長いので省略）

├─ [email protected]
├─ [email protected]
└─ [email protected]
✨  Done in 24.60s.
$ 

맵 총 계정 구성 요소 가져오기

설치가 완료되면 맵GL 구성 요소를 import로 가져옵니다.
또한 맵박스 GLJS의 css는 import를 하지 않으면 warning도 나오기 때문에 저희도 import를 합니다.
App.js(일부)

import React from "react";
import DeckGL from "@deck.gl/react";
import { PathLayer } from "@deck.gl/layers";
import MapGL from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";

매핑box 액세스 태그

맵박스를 사용할 때는 맵박스에 대한 액세스 토큰이 포함되어야 합니다.
액세스 영패는 맵박스에 로그인하고 tokens에 접근하는 + Create a token 단추를 통해 만들 수 있습니다.

여기서 로그인 https://account.mapbox.com/
※ 계정이 없는 사람은 계정을 만들어야 합니다
방문 영패를 받은 후 아래와 같다App.jsx.
원래 방문 영패처럼 외부로 유출될 수 없는 정보는 .env 파일 등 환경 변수로 관리하는 것이 가장 좋다
맵박스는 지정한 URL에서 보내는 요청에만 작용하는'제한된 영패'를 만들 수 있기 때문에 파일을 끼워넣는 데도 문제가 없습니다.
App.js(일부)

// mapbox access token
const MAPBOX_ACCESS_TOKEN = "pk.eyJ1IjoiZ......."

매핑 총 계정 구성 요소 추가

마지막으로 DeckGL에 매핑 구성 요소를 포함합니다.
상기 정의된 방문 영패는 mapboxApiAccessToken에 전달됩니다.
App.js(일부)

    return (
      <DeckGL viewState={viewState} layers={layer}>
        <MapGL mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
      </DeckGL>
    );

브라우저에 표시

그러면 여기에 쓰인 코드를 브라우저로 보여주세요!yarn start 명령으로 시작하면


지도에 경로가 떴어요!!

다음 예고

다음 드디어 Google Map 타임라인이 공개됩니다!

App.jsx의 전모

App.js

import React from "react";
import DeckGL from "@deck.gl/react";
import { PathLayer } from "@deck.gl/layers";
import MapGL from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";

// mapbox access token
const MAPBOX_ACCESS_TOKEN = "pk.eyJ1IjoiZ.......";

// Viewport 初期設定
const viewState = {
  longitude: -122.5,
  latitude: 37.75,
  zoom: 11
};

// 描画する地理データ
const data = [
  {
    path: [
      [-122.45, 37.7],
      [-122.5, 37.8],
      [-122.6, 37.7]
    ]
  }
];

export default class App extends React.Component {
  render() {
    const layer = [
      new PathLayer({
        id: "path-layer",
        data,
        getPath: d => d.path,
        getWidth: 30
      })
    ];
    return (
      <DeckGL viewState={viewState} layers={layer}>
        <MapGL mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
      </DeckGL>
    );
  }
}