Permalink
Browse files

Add rendering of labels

  • Loading branch information...
markerikson committed Mar 2, 2017
1 parent e264e9f commit 74f81c3869e332854c58f73fa35dc9ea55b30b19
Showing with 29 additions and 12 deletions.
  1. +5 −3 src/App.js
  2. +2 −2 src/cesium/CesiumGlobe.jsx
  3. +22 −7 src/cesium/CesiumProjectContents.jsx
View
@@ -10,12 +10,13 @@ import redsLogo from "./redsLogo.png";
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}
+ redsLogo : { lat : 39.097465, lon : -84.50703, image : redsLogo, scale : 0.3},
+ label : {lat : 35.0, lon : -100.0, text : "Catch phrase here"}
}
render() {
- const {reactLogo, redsLogo} = this.state;
+ const {reactLogo, redsLogo, label} = this.state;
const containerStyle = {
width: '100%',
@@ -28,10 +29,11 @@ class App extends Component {
};
const icons = [reactLogo, redsLogo];
+ const labels = [label]
return (
<div style={containerStyle}>
- <CesiumGlobe icons={icons} />
+ <CesiumGlobe icons={icons} labels={labels} />
<div style={{position : "fixed", top : 0}}>
<div style={{color : "white", fontSize: 40, }}>
Text Over the Globe
@@ -60,11 +60,11 @@ export default class CesiumGlobe extends Component {
if(viewerLoaded) {
const {scene} = this.viewer;
- const {icons} = this.props;
+ const {icons, labels} = this.props;
contents = (
<span>
- <CesiumProjectContents scene={scene} icons={icons} />
+ <CesiumProjectContents scene={scene} icons={icons} labels={labels} />
</span>
);
}
@@ -1,38 +1,44 @@
import React, {Component} from "react";
import BillboardCollection from "cesium/Source/Scene/BillboardCollection";
+import LabelCollection from "cesium/Source/Scene/LabelCollection";
import CesiumBillboard from "./primitives/CesiumBillboard";
+import CesiumLabel from "./primitives/CesiumLabel";
export class CesiumProjectContents extends Component {
constructor(props) {
super(props);
this.billboards = new BillboardCollection();
+ this.labels = new LabelCollection();
+
+ this.primitiveCollections = [this.billboards, this.labels]
const {scene} = props;
if(scene) {
- scene.primitives.add(this.billboards);
+ this.primitiveCollections.forEach(primitiveCollection => scene.primitives.add(primitiveCollection));
}
}
componentWillUnmount() {
- const {billboards} = this;
- if(!billboards.isDestroyed()) {
- billboards.destroy();
- }
+ this.primitiveCollections.forEach(primitiveCollection => {
+ if(!primitiveCollection.isDestroyed()) {
+ primitiveCollection.destroy();
+ }
+ });
const {scene} = this.props;
if(scene && !scene.isDestroyed() && scene.primitives) {
- scene.primitives.remove(billboards);
+ this.primitiveCollections.forEach(primitiveCollection => scene.primitives.remove(primitiveCollection));
}
}
render() {
- const {icons = []} = this.props;
+ const {icons = [], labels = []} = this.props;
const renderedBillboards = icons.map( (icon, index) =>
<CesiumBillboard
@@ -42,10 +48,19 @@ export class CesiumProjectContents extends Component {
/>
);
+ const renderedLabels = labels.map( (label, index) =>
+ <CesiumLabel
+ {...label}
+ labels={this.labels}
+ key={index}
+ />
+ );
+
return (
<span>
{renderedBillboards}
+ {renderedLabels}
</span>
);
}

0 comments on commit 74f81c3

Please sign in to comment.