이어서 지난번, DECK.GL 시각화 Google Map 타임라인을 사용해 보세요!제3탄 보도.
지난번 브라우저에서 기본 읽기 코드가 이동하는 것을 확인할 수 있습니다.
이번에는 사실 DECK입니다.나는 총결산에 편입하고 싶다.

카탈로그

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

React 및 DECK총 계정 환경 구축

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

DECK.GL로 간단한 데이터 보이기← 이번에는 이거.

매핑 어셈블리 보기

GoogleMap 타임라인 데이터 표시

지난번 복습

지난번는 App입니다.나는 jsx에 React의 기본 코드를 썼다.
App.jsx

import React from "react";

export default class App extends React.Component {
  render() {
    return <div>Hello, DECK.GL!!</div>;
  }
}

DECK입니다.총결산을 합시다.

계층화

DECK.총결산은 각종 유형의 레이어를 제공한다.
이것을 사용하면 각양각색의 가시화가 가능합니다!
※ 레이어에 대한 자세한 설명은 이번 베기.
사이트 제목에 상세한 기록이 있으니 관심 있는 사람은 저쪽을 보세요.

어셈블리 내보내기

이번에는 PathLayer 이 도면층으로 가시화하고 싶습니다.
우선, importApp.jsx에 필요한 구성 요소를 살펴보겠습니다.
import는 DECK.GL 및 PathLayer 구성 요소입니다.
App.jsx(부분)

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

초기 설정

다음은 화면에 표시될 때의 초기 설정을 적으십시오.viewState 처음 표시할 때 표시되는 크기를 지정합니다.data에서 DECK.총 계정을 사용하여 그릴 지리적 데이터를 지정합니다.PathLayer "위도, 경도"수조 데이터가 필요합니다.이 데이터를 경로로 연결하여 렌더링합니다.
이번에는 path 대상에 [위도, 경도]의 데이터를 대입합시다.
App.jsx(부분)

// 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]
  ]
}];

렌더링

마지막으로 화면에 렌더링 부분을 적어 주세요.viewState（描画情報） 및 layers（レイヤー情報） 을 매개변수로 지정하고 DeckGL 어셈블리를 반환합니다.viewState에서 위에서 지정한 변수를 직접 설정하면 됩니다.layers 다음 객체를 설정합니다.이번에는 사용PathLayer 시 최소한의 정의를 지정했다.
App.jsx(부분)

export default class App extends React.Component {
  render() {
    const layer = [
      new PathLayer({
        id: "path-layer",     // PathLayerを使う場合、"path-layer"を指定
        data,                 // 描画したい地理データセットを指定
        getPath: d => d.path, // データセットから地理データを取得
        getWidth: 30          // 描画する際の線の太さを指定
      })
    ];
    return <DeckGL viewState={viewState} layers={layer}></DeckGL>;
  }
}

각 층에서 지정한 내용이 다르기 때문에 층을 사용할 때 무엇을 지정해야 하는지 잘 확인하세요!
※ 레이어에 대한 자세한 설명은 이번 베기.
사이트 제목에 상세한 기록이 있으니 관심 있는 사람은 저쪽을 보세요.

브라우저에 표시

그럼 이제 브라우저로 쓴 코드를 표시해 보세요!
지난번과 마찬가지로 동작 확인은 yarn start 명령입니다.


이렇게 보일 거예요.
이번엔 DECK.총 장부의 PathLayer 를 사용하여 세 좌표를 선으로 연결하십시오.
간단하네!

다음 예고

아직 지도 정보가 없으니 잘 안 보이시죠.
다음 지도 구성 요소에 편입하여 표시하고자 합니다.
GoogleMap 타임라인이 표시될 때까지 기다려주세요~

App.jsx의 전모

App.jsx

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>;
  }
}