Permalink
Browse files

Add a reusable CesiumBillboard component

  • Loading branch information...
markerikson committed Feb 25, 2017
1 parent 61e7be7 commit 6776f546e69c18acaea8b8467ff9b8c2870b47bb
Showing with 85 additions and 0 deletions.
  1. +62 −0 src/cesium/primitives/CesiumBillboard.jsx
  2. +23 −0 src/utils/utils.js
@@ -0,0 +1,62 @@
+import {Component} from "react";
+
+import Cartesian3 from "cesium/Source/Core/Cartesian3";
+import HorizontalOrigin from "cesium/Source/Scene/HorizontalOrigin";
+import VerticalOrigin from "cesium/Source/Scene/VerticalOrigin";
+
+import {shallowEqual} from "utils/utils";
+
+
+export default class CesiumBillboard extends Component {
+ componentDidMount() {
+ const {billboards} = this.props;
+
+ if(billboards) {
+ this.billboard = billboards.add({
+ eyeOffset : new Cartesian3(0.0, 0.0, 0.0),
+ horizontalOrigin : HorizontalOrigin.CENTER,
+ verticalOrigin : VerticalOrigin.CENTER,
+ });
+
+ }
+
+ this.updateIcon();
+ }
+
+ componentDidUpdate(prevProps) {
+ if(!shallowEqual(this.props, prevProps)) {
+ this.updateIcon();
+ }
+ }
+
+ updateIcon() {
+ const {image, scale = 1.0, lat, lon, alt, show = true, width} = this.props;
+
+ if(this.billboard) {
+ const newLocation = Cartesian3.fromDegrees(lon, lat, alt);
+
+ this.billboard.position = newLocation;
+ if(image) {
+ this.billboard.image = image;
+ }
+ this.billboard.show = show;
+ this.billboard.scale = scale;
+
+ if(width) {
+ this.billboard.width = width;
+ }
+ }
+ }
+
+ componentWillUnmount() {
+ const {billboards} = this.props;
+
+ if(billboards && !billboards.isDestroyed() && this.billboard) {
+ billboards.remove(this.billboard);
+ }
+ }
+
+ render() {
+ return null;
+ }
+}
View
@@ -0,0 +1,23 @@
+export function shallowEqual(objA, objB) {
+ if (objA === objB) {
+ return true;
+ }
+
+ const aKeys = Object.keys(objA);
+ const bKeys = Object.keys(objB);
+ const len = aKeys.length;
+
+ if (bKeys.length !== len) {
+ return false;
+ }
+
+ for (let i = 0; i < len; i++) {
+ const key = aKeys[i];
+
+ if (objA[key] !== objB[key]) {
+ return false;
+ }
+ }
+
+ return true;
+};

0 comments on commit 6776f54

Please sign in to comment.