Permalink
Browse files

Add a CesiumPolyline component

  • Loading branch information...
markerikson committed Mar 2, 2017
1 parent 74f81c3 commit efa729a86a55153758ee3cc2d347f063f59925df
Showing with 63 additions and 0 deletions.
  1. +63 −0 src/cesium/primitives/CesiumPolyline.jsx
@@ -0,0 +1,63 @@
+import React, {Component} from "react";
+
+import Cartographic from "cesium/Source/Core/Cartographic";
+import Color from "cesium/Source/Core/Color";
+import Ellipsoid from "cesium/Source/Core/Ellipsoid";
+import Material from "cesium/Source/Scene/Material";
+
+import {shallowEqual} from "utils/utils";
+
+export default class CesiumPolyline extends Component {
+ componentDidMount() {
+ const {polylines, coords} = this.props;
+
+ if(polylines) {
+ this.polyline = polylines.add({
+ positions : [],
+ width : 2,
+ material : Material.fromType('Color', {
+ color: Color.BLUE
+ }),
+ });
+
+
+ this.updatePolyline();
+ }
+ }
+
+ componentWillUnmount() {
+ const {polylines} = this.props;
+
+ if(polylines && !polylines.isDestroyed() && this.polyline) {
+ polylines.remove(this.polyline);
+ }
+ }
+
+ componentDidUpdate(prevProps) {
+ if(!shallowEqual(prevProps, this.props)) {
+ this.updatePolyline();
+ }
+ }
+
+ updatePolyline() {
+ const {coords, loop, color = "blue" } = this.props;
+
+ if(this.polyline) {
+ const cartographics = coords.map(coord =>
+ Cartographic.fromDegrees(coord.lon, coord.lat, coord.alt)
+ );
+
+ const cartesians = Ellipsoid.WGS84.cartographicArrayToCartesianArray(cartographics);
+
+ const colorValue = Color.fromCssColorString(color);
+
+ this.polyline.positions = cartesians;
+ this.polyline.loop = !!loop;
+ this.polyline.material.uniforms.color = colorValue;
+ }
+ }
+
+ render() {
+ return null;
+ }
+}

0 comments on commit efa729a

Please sign in to comment.