Entity

[sumakokima2]

実は前回のViewerですでにEntityを立ててしまっていますが、今回改めてEntityについて進めます。

基本コード

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

const App = () => <Viewer full />;

export default hot(App);

Entityを追加してみる

Entityを立てる場合、緯度経度高度の座標系が必要になります。 Cesiumの緯度経度高度の座標を利用するためにimport { Cartesian3 } from 'cesium';を追記します

import React from 'react';
import { hot } from "react-hot-loader/root";
import { Viewer, Entity } from 'resium';
import { Cartesian3 } from 'cesium';    // ①追加！！

const App = () => <Viewer full>
<Entity position={Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100)}/> //②お好きは緯度経度を。
</Viewer>;

export default hot(App);

const で値をいろいろ渡してみる

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

const position = Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100);
const pointGraphics = { pixelSize: 10 };
const name="Tokyo";
const description="<h1>Hello, world.</h1><p>thanks</p>";
const label = {text:"label", scale: 3, fillColor: Color.PINK};

const App = () => <Viewer full>
<Entity position={position} point={pointGraphics} name={name} description={description} label={label}/>
</Viewer>;

export default hot(App);

Entityを違うjsにしてみる

App.js

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

const App = () => <Viewer full>
    <Entity1 />
    </Viewer>;

export default hot(App);

Entity.js

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

const position = Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100);
const pointGraphics = { pixelSize: 10 };
const name="Tokyo";
const description="<h1>Hello, world.</h1><p>thanks</p>";
const label = {text:"label", scale: 3, fillColor: Color.PINK};

const Entity1 = () =>
<Entity position={position} point={pointGraphics} name={name} description={description} label={label}/>;

export default hot(Entity1);

調べること：ここはhotloaderにしたままでいいのかな？