ピンの更新と削除

[sumakokima2]

ここではピンの「更新と削除」が可能なReactの記述をします。 その辺りを今回まとめてみます。

App.js

import React from 'react';
import { hot } from "react-hot-loader/root";
import { Viewer } from 'resium';
import Entity1 from './Entity';

class App extends React.Component {

    constructor(props) {
      super(props);
      this.state = {isToggleOn: true};

      this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
      this.setState(state => ({
        isToggleOn: !state.isToggleOn
      }));
        console.log(this.state.isToggleOn);
    }

  render() {
    return (
     <Viewer style={{
       position: "absolute",
       top: 0,
       left: 0,
       right: 0,
       bottom: 30,
     }}>
      <button onClick={this.handleClick}>
         {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
            <Entity1 show={this.state.isToggleOn}/>
      </Viewer>
    );
  }
}

export default hot(App);

Entity1.js

import React from 'react';
import { hot } from "react-hot-loader/root";
import { Entity } from 'resium';
import { Cartesian3, Color } from 'cesium';

class Entity1 extends React.Component {

    constructor(props) {
      super(props);
      this.state = {name: "Tokyo1",
                    position:Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100),
                    pointGraphics : { pixelSize: 10 },
                    description:"<h1>Hello, world.</h1><p>I tried STATE</p>",
                    label : {text:"aaa", scale: 3, fillColor: Color.PINK}

      };
    }

  render() {
      console.log(this.props);
    return (
            <Entity position={this.state.position} point={this.state.pointGraphics} name={this.state.name} description={this.state.description} label={this.state.label} show={this.props.show}/>
    );
  }
}

export default hot(Entity1);

最低限はここまで。これから更新と削除部分を攻めます