Permalink
Browse files

Add rendering of polylines

  • Loading branch information...
markerikson committed Mar 2, 2017
1 parent efa729a commit 3fbd2b5c21833bb75aab7f11dde930fa9eb14ee4
Showing with 32 additions and 8 deletions.
  1. +11 −4 src/App.js
  2. +7 −2 src/cesium/CesiumGlobe.jsx
  3. +14 −2 src/cesium/CesiumProjectContents.jsx
View
@@ -11,12 +11,18 @@ class App extends Component {
state = {
reactLogo : {lat : 37.484505, lon : -122.147877, image : reactLogo},
redsLogo : { lat : 39.097465, lon : -84.50703, image : redsLogo, scale : 0.3},
- label : {lat : 35.0, lon : -100.0, text : "Catch phrase here"}
+ label : {lat : 35.0, lon : -100.0, text : "Catch phrase here"},
+ line : [
+ {lat : 47.5, lon : -122.3, alt : 20000 },
+ {lat : 36.2, lon : -115.0, alt : 20000 },
+ {lat : 39.0, lon : -94.6, alt : 20000 },
+ {lat : 30.4, lon : -81.6, alt : 20000 },
+ ]
}
render() {
- const {reactLogo, redsLogo, label} = this.state;
+ const {reactLogo, redsLogo, label, line} = this.state;
const containerStyle = {
width: '100%',
@@ -29,11 +35,12 @@ class App extends Component {
};
const icons = [reactLogo, redsLogo];
- const labels = [label]
+ const labels = [label];
+ const polylines = [line];
return (
<div style={containerStyle}>
- <CesiumGlobe icons={icons} labels={labels} />
+ <CesiumGlobe icons={icons} labels={labels} polylines={polylines} />
<div style={{position : "fixed", top : 0}}>
<div style={{color : "white", fontSize: 40, }}>
Text Over the Globe
@@ -60,11 +60,16 @@ export default class CesiumGlobe extends Component {
if(viewerLoaded) {
const {scene} = this.viewer;
- const {icons, labels} = this.props;
+ const {icons, labels, polylines} = this.props;
contents = (
<span>
- <CesiumProjectContents scene={scene} icons={icons} labels={labels} />
+ <CesiumProjectContents
+ scene={scene}
+ icons={icons}
+ labels={labels}
+ polylines={polylines}
+ />
</span>
);
}
@@ -2,18 +2,21 @@ import React, {Component} from "react";
import BillboardCollection from "cesium/Source/Scene/BillboardCollection";
import LabelCollection from "cesium/Source/Scene/LabelCollection";
+import PolylineCollection from "cesium/Source/Scene/PolylineCollection";
import CesiumBillboard from "./primitives/CesiumBillboard";
import CesiumLabel from "./primitives/CesiumLabel";
+import CesiumPolyline from "./primitives/CesiumPolyline";
export class CesiumProjectContents extends Component {
constructor(props) {
super(props);
this.billboards = new BillboardCollection();
this.labels = new LabelCollection();
+ this.polylines = new PolylineCollection();
- this.primitiveCollections = [this.billboards, this.labels]
+ this.primitiveCollections = [this.billboards, this.labels, this.polylines];
const {scene} = props;
@@ -38,7 +41,7 @@ export class CesiumProjectContents extends Component {
}
render() {
- const {icons = [], labels = []} = this.props;
+ const {icons = [], labels = [], polylines = []} = this.props;
const renderedBillboards = icons.map( (icon, index) =>
<CesiumBillboard
@@ -56,11 +59,20 @@ export class CesiumProjectContents extends Component {
/>
);
+ const renderedPolylines = polylines.map( (polyline, index) =>
+ <CesiumPolyline
+ coords={polyline}
+ polylines={this.polylines}
+ key={index}
+ />
+ );
+
return (
<span>
{renderedBillboards}
{renderedLabels}
+ {renderedPolylines}
</span>
);
}

0 comments on commit 3fbd2b5

Please sign in to comment.