4-4. ピンを表示, 4-5. ピンの作成（stateで管理）

Wikiの項目

4-4. ピンを表示 4-5. ピンの作成（stateで管理）

目標と手法

本項目の目標は、resium内におけるピンを作成し、表示させることです。なお、今回は、csvからデータを読み込みます。

そのために、app.tsxでcsvデータを読み込み、earth.tsxに渡します。earth.tsxから、その子コンポーネントであるpin.tsxにpropsでピンデータ(name, lon, latなど)を渡します。pin.tsxで <Entity />をreturnします。

構成

src
- app.tsx
- data_app.csv
- data_app.ts
- earth.tsx
- pin.tsx
- tyoes.d.ts
webpack.config.js
index.html

手順

まずapp.tsx内で、data_app.tsにアクセスし、data_app.csvからデータを読み込みます。このときcomponentDidMount()からdata_app.tsに書かれたfunctionであるloadData()を実行します。実行結果(setState())として、Stateにdata[]がセットされます。

class App extends React.PureComponent<{}, State> {
  state = {
    data: [],
  };
  componentDidMount() {
    this.loadData();  
  }

  async loadData() {
    const result = await loadData();
    this.setState({ 
      data: result.data,
    });
  }

次に、app.tsxが、その子コンポーネントであるearth.tsxに、return内で<Earth pins={this.state.data} />;と書くことによって、これらのデータをPropsとして渡します。

earth.tsxでは、その子コンポーネントであるpin.tsxに、以下のように渡します。

 {this.props.pins.map((d, i) => {
                 return (
                    <Pin name={d.name} id={d.id} lon={d.lon} lat={d.lat} show={this.state.pinsshow[i]} />
                 );
                })}

（show={this.state.pinsshow[i]} については、別issueに詳細を記載しています。）

表示/非表示切り替えによるリロードの回数を減らすために、pinコンポーネントを、各データごとに作成するようにします。show={}で、dataの配列をまとめて渡した場合、一つのピンのboolianが変化する度に、全てのピンが再描写されなくてはいけません。（？）ピンの表示・非表示のboolian設定をしない場合は、一括でも問題ないと思われます。

pin.tsxでは、cesiumに実際に描写するEntityをreturnします。 Entityに入力されるデータは、Earth.tsxからPropsを用いて与えられています。なので、内では、{ this.props.name }のように、propsからの値を記入します。

name= { this.props.name }
            position={Cartesian3.fromDegrees(this.props.lon, this.props.lat, 100)}
            point={{ pixelSize: 10 }}
            description="hoge"
            show={this.props.show}

用語確認

componentDidMount() Component が Mount された後に実行されるメソッド。用途の例は以下。

・Ajax を使ったデータフェッチを行う（初回）・DOM に対する処理を行う（初回）・タイマーをセットする・イベントリスナのセット

sumakokima2 / resium-sample2