custom layers course

qiaoxin136 · Oct 2, 2017 · 98627e9 · 98627e9
1 parent 99eeb28
commit 98627e9
Show file tree

Hide file tree

Showing 72 changed files with 35,570 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "lint": "ocular lint"
   },
   "dependencies": {
+    "@turf/turf": "^4.7.3",
     "autobind-decorator": "^2.1.0",
     "d3-force": "^1.0.6",
     "deck.gl": "^4.1.1",

diff --git a/src/demos/custom-layers/1-combination-layer/README.md b/src/demos/custom-layers/1-combination-layer/README.md
@@ -0,0 +1,13 @@
+This is a minimal standalone version of the ArcLayer example
+on [deck.gl](http://deck.gl) website.
+
+### Usage
+Copy the content of this folder to your project. Run
+```
+npm install
+npm start
+```
+
+### Data format
+Sample data is stored in the `data` folder. To use your own data, checkout
+the [documentation of ArcLayer](../../docs/layers/arc-layer.md).
diff --git a/src/demos/custom-layers/1-combination-layer/index.html b/src/demos/custom-layers/1-combination-layer/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset='UTF-8' />
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/style.css">
+    <title>Visualization Tutorial - Starting Code</title>
+    <style>
+      body {
+        font-family: ff-clan-web-pro, "Helvetica Neue", Helvetica, sans-serif;
+        font-size: 12px;
+        line-height: 1.833;
+        margin: 0;
+        overflow: hidden;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id='root' />
+    <script type="text/javascript" src="bundle.js"></script>
+  </body>
+</html>
diff --git a/src/demos/custom-layers/1-combination-layer/package.json b/src/demos/custom-layers/1-combination-layer/package.json
@@ -0,0 +1,19 @@
+{
+  "scripts": {
+    "start-local": "webpack-dev-server --env.local --progress --hot --port 3030 --open",
+    "start": "webpack-dev-server --progress --hot --port 3030 --open",
+    "build": "NODE_ENV=production webpack --env.prod=true"
+  },
+  "dependencies": {
+    "deck.gl": "^4.1.0",
+    "luma.gl": "^4.0.1",
+    "react": "^15.4.1",
+    "react-dom": "^15.4.1",
+    "react-map-gl": "^3.0.4"
+  },
+  "devDependencies": {
+    "buble-loader": "^0.4.0",
+    "webpack": "^2.2.0",
+    "webpack-dev-server": "^2.2.0"
+  }
+}
diff --git a/src/demos/custom-layers/1-combination-layer/root.js b/src/demos/custom-layers/1-combination-layer/root.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import {render} from 'react-dom';
+
+import App from './src/app';
+
+const element = document.getElementById('root');
+
+render(<App />, element);
+
+if (module.hot) {
+  module.hot.accept('./src/app', () => {
+    const Next = require('./src/app').default;
+    render(<Next />, element);
+  });
+}
diff --git a/src/demos/custom-layers/1-combination-layer/src/app.js b/src/demos/custom-layers/1-combination-layer/src/app.js
@@ -0,0 +1,78 @@
+/* global window */
+import React, {Component} from 'react';
+import MapGL from 'react-map-gl';
+import DeckGLOverlay from './deckgl-overlay';
+
+import taxiData from '../../data/taxi';
+
+const MAPBOX_STYLE = 'mapbox://styles/mapbox/dark-v9';
+// Set your mapbox token here
+const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
+
+export default class App extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      viewport: {
+        width: window.innerWidth,
+        height: window.innerHeight,
+        longitude: -74,
+        latitude: 40.7,
+        zoom: 11,
+        pitch: 30,
+        maxZoom: 16
+      },
+      currentTime: 0
+    };
+    this._resize = this._resize.bind(this);
+    this._animate = this._animate.bind(this);
+    this._onViewportChange = this._onViewportChange.bind(this);
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this._resize);
+    this._resize();
+    this._animate();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this._resize);
+    window.cancelAnimationFrame(this._animation);
+  }
+
+  _onViewportChange(viewport) {
+    this.setState({
+      viewport: {...this.state.viewport, ...viewport}
+    });
+  }
+
+  _resize() {
+    this._onViewportChange({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+  }
+
+  _animate() {
+    this.setState({currentTime: Date.now()});
+    this._animation = window.requestAnimationFrame(this._animate);
+  }
+
+  render() {
+    const {viewport, currentTime} = this.state;
+
+    return (
+      <div>
+        <MapGL {...viewport}
+          mapStyle={MAPBOX_STYLE}
+          onViewportChange={this._onViewportChange}
+          mapboxApiAccessToken={MAPBOX_TOKEN}>
+
+          <DeckGLOverlay viewport={viewport} data={taxiData} currentTime={currentTime} />
+
+        </MapGL>
+      </div>
+    );
+  }
+}
diff --git a/src/demos/custom-layers/1-combination-layer/src/deckgl-overlay.js b/src/demos/custom-layers/1-combination-layer/src/deckgl-overlay.js
@@ -0,0 +1,31 @@
+import React, {Component} from 'react';
+import DeckGL from 'deck.gl';
+import TaxiLayer from './taxi-layer';
+
+const PICKUP_COLOR = [0, 128, 255];
+const DROPOFF_COLOR = [255, 0, 128];
+
+export default class DeckGLOverlay extends Component {
+
+  render() {
+    if (!this.props.data) {
+      return null;
+    }
+
+    const layers = [
+      new TaxiLayer({
+        id: 'taxi-trips',
+        data: this.props.data,
+        pickupColor: PICKUP_COLOR,
+        dropoffColor: DROPOFF_COLOR,
+        radiusScale: 40,
+        getPickupLocation: d => [d.pickup_longitude, d.pickup_latitude],
+        getDropoffLocation: d => [d.dropoff_longitude, d.dropoff_latitude]
+      })
+    ];
+
+    return (
+      <DeckGL {...this.props.viewport} layers={layers} />
+    );
+  }
+}
diff --git a/src/demos/custom-layers/1-combination-layer/src/taxi-layer.js b/src/demos/custom-layers/1-combination-layer/src/taxi-layer.js
@@ -0,0 +1,47 @@
+import DeckGL, {CompositeLayer, ScatterplotLayer, ArcLayer} from 'deck.gl';
+
+const defaultProps = {
+  radiusScale: 40,
+  pickupColor: [255, 0, 0],
+  dropoffColor: [0, 0, 255],
+  getPickupLocation: d => d.pickup,
+  getDropoffLocation: d => d.dropoff
+};
+
+export default class TaxiLayer extends CompositeLayer {
+
+  renderLayers() {
+    const {id, data, pickupColor, dropoffColor, radiusScale, getPickupLocation, getDropoffLocation} = this.props;
+
+    return [
+      new ScatterplotLayer({
+        id: `${id}-pickup`,
+        data,
+        getPosition: getPickupLocation,
+        getColor: d => pickupColor,
+        radiusScale
+      }),
+      new ScatterplotLayer({
+        id: `${id}-dropoff`,
+        data,
+        getPosition: getDropoffLocation,
+        getColor: d => dropoffColor,
+        radiusScale
+      }),
+      new ArcLayer({
+        id: `${id}-arc`,
+        data,
+        opacity: 0.3,
+        getSourcePosition: getPickupLocation,
+        getTargetPosition: getDropoffLocation,
+        getSourceColor: d => pickupColor,
+        getTargetColor: d => dropoffColor,
+        strokeWidth: 2
+      })
+    ];
+  }
+
+}
+
+TaxiLayer.layerName = 'TaxiLayer';
+TaxiLayer.defaultProps = defaultProps;
diff --git a/src/demos/custom-layers/1-combination-layer/webpack.config.js b/src/demos/custom-layers/1-combination-layer/webpack.config.js
@@ -0,0 +1,40 @@
+const resolve = require('path').resolve;
+const webpack = require('webpack');
+
+module.exports = {
+  entry: resolve('./root.js'),
+
+  devtool: 'source-map',
+
+  module: {
+    rules: [{
+      // Compile ES2015 using buble
+      test: /\.js$/,
+      loader: 'buble-loader',
+      include: [resolve('.')],
+      exclude: [/node_modules/],
+      options: {
+        objectAssign: 'Object.assign'
+      }
+    }]
+  },
+
+  resolve: {
+    alias: {
+      'mapbox-gl$': resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')
+    }
+  },
+
+  plugins: [
+
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
+        MapboxAccessToken: JSON.stringify(
+          process.env.MapboxAccessToken || process.env.MAPBOX_TOKEN
+        ),
+      },
+    }),
+
+  ],
+};