Skip to content

Commit

Permalink
Layer browser perf and bug fixes (#3220)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Pessimistress
Pessimistress committed Jun 11, 2019
1 parent d28edff commit a4d1634
Show file tree
Hide file tree
Showing 2 changed files with 199 additions and 160 deletions.
192 changes: 32 additions & 160 deletions examples/layer-browser/src/app.js
View file
Expand Up @@ -3,53 +3,24 @@
// deck.gl ES6 components
import {
COORDINATE_SYSTEM,
View,
MapView,
FirstPersonView,
OrbitView,
MapController,
AmbientLight,
DirectionalLight,
LightingEffect
} from '@deck.gl/core';
import {_OrbitController as OrbitController} from '@deck.gl/core';

// deck.gl react components
import DeckGL from '@deck.gl/react';

import React, {PureComponent} from 'react';
import autobind from 'react-autobind';

import {StaticMap, _MapContext as MapContext, NavigationControl} from 'react-map-gl';

import {Matrix4} from 'math.gl';

import LayerInfo from './components/layer-info';
import LayerSelector from './components/layer-selector';
import LayerControls from './components/layer-controls';

import LAYER_CATEGORIES from './examples';

/* eslint-disable no-process-env */
const MapboxAccessToken =
process.env.MapboxAccessToken || // eslint-disable-line
'Set MapboxAccessToken environment variable or put your token here.';

const VIEW_LABEL_STYLES = {
zIndex: 10,
// position: 'relative',
padding: 5,
margin: 20,
fontSize: 12,
backgroundColor: '#282727',
color: '#FFFFFF'
};

const NAVIGATION_CONTROL_STYLES = {
margin: 10,
position: 'absolute',
zIndex: 1
};
import Map from './map';

const AMBIENT_LIGHT = new AmbientLight({
color: [255, 255, 255],
Expand All @@ -67,36 +38,13 @@ const GLOBAL_LIGHTING = new LightingEffect({
DIRECTIONAL_LIGHT
});

const ViewportLabel = props => (
<div style={{position: 'absolute'}}>
<div style={{...VIEW_LABEL_STYLES, display: ''}}>{props.children}</div>
</div>
);

// ---- View ---- //
export default class App extends PureComponent {
constructor(props) {
super(props);
autobind(this);

this.state = props.state || {
mapViewState: {
latitude: 37.751537058389985,
longitude: -122.42694203247012,
zoom: 11.5,
pitch: 0,
bearing: 0
},
orbitViewState: {
lookAt: [0, 0, 0],
distance: 3,
rotationX: -30,
rotationOrbit: 30,
orbitAxis: 'Y',
fov: 50,
minDistance: 1,
maxDistance: 20
},
activeExamples: {
ScatterplotLayer: true
},
Expand All @@ -117,12 +65,11 @@ export default class App extends PureComponent {
// Effects are experimental for now. Will be enabled in the future
// effects: false,
},
hoveredItem: null,
clickedItem: null,
queriedItems: null,

enableDepthPickOnClick: false
};

this.mapRef = React.createRef();
}

componentDidUpdate(prevProps, prevState) {
Expand All @@ -131,21 +78,10 @@ export default class App extends PureComponent {
}
}

componentWillUnmount() {
window.removeEventListener('resize', this._onResize);
}

_getSize() {
return {width: window.innerWidth, height: window.innerHeight};
}

_onViewStateChange({viewState}) {
if (viewState.pitch > 60) {
viewState.pitch = 60;
}
this.setState({mapViewState: viewState});
}

_onToggleLayer(exampleName, example) {
const activeExamples = {...this.state.activeExamples};
activeExamples[exampleName] = !activeExamples[exampleName];
Expand All @@ -165,30 +101,13 @@ export default class App extends PureComponent {
this.setState({settings});
}

_onHover(info) {
this.setState({hoveredItem: info});
}

_onClick(info) {
if (this.state.enableDepthPickOnClick && info) {
this._multiDepthPick(info.x, info.y);
} else {
console.log('onClick', info); // eslint-disable-line
this.setState({clickedItem: info});
}
}

_onPickObjects() {
const {width, height} = this._getSize();
const infos = this.refs.deckgl.pickObjects({x: 0, y: 0, width, height});
console.log(infos); // eslint-disable-line
this.setState({queriedItems: infos});
this.mapRef.current.pickObjects({x: 0, y: 0, width, height});
}

_multiDepthPick(x, y) {
const infos = this.refs.deckgl.pickMultipleObjects({x, y});
console.log(infos); // eslint-disable-line
this.setState({queriedItems: infos});
this.mapRef.current.pickMultipleObjects({x, y});
}

_renderExampleLayer(example, settings, index) {
Expand Down Expand Up @@ -262,95 +181,54 @@ export default class App extends PureComponent {
}

_getViews() {
const {
settings: {infovis, multiview, orthographic}
} = this.state;
const {infovis, multiview, orthographic} = this.state.settings;
let views;

if (infovis) {
return new OrbitView({
views = new OrbitView({
id: 'infovis',
controller: OrbitController
controller: true,
fov: 50,
minZoom: 0,
maxZoom: 20
});
}

if (multiview) {
return [
new FirstPersonView({id: 'first-person', height: '50%'}),
} else if (multiview) {
views = [
new FirstPersonView({id: 'first-person', height: '50%', position: [0, 0, 50]}),
new MapView({
id: 'basemap',
controller: MapController,
controller: true,
y: '50%',
height: '50%',
position: [0, 0, 0],
orthographic
})
];
} else {
views = new MapView({id: 'basemap', controller: true, position: [0, 0, 0], orthographic});
}
return new MapView({id: 'basemap', controller: MapController, orthographic});
}

// Only show infovis layers in infovis mode and vice versa
_layerFilter({layer}) {
const {settings} = this.state;
const isIdentity = layer.props.coordinateSystem === COORDINATE_SYSTEM.IDENTITY;
return settings.infovis ? isIdentity : !isIdentity;
return views;
}

_renderMap() {
const {orbitViewState, mapViewState, settings} = this.state;
const {infovis, effects, pickingRadius, drawPickingColors, useDevicePixels} = settings;
_getEffects() {
// TODO
// const {effects} = this.state.settings;

const views = this._getViews();

return (
<div style={{backgroundColor: '#eeeeee'}}>
<DeckGL
ref="deckgl"
id="default-deckgl-overlay"
layers={this._renderExamples()}
layerFilter={this._layerFilter}
views={views}
viewState={infovis ? orbitViewState : {...mapViewState, position: [0, 0, 50]}}
onViewStateChange={this._onViewStateChange}
effects={effects ? [...this._effects, GLOBAL_LIGHTING] : [GLOBAL_LIGHTING]}
pickingRadius={pickingRadius}
onHover={this._onHover}
onClick={this._onClick}
useDevicePixels={useDevicePixels}
debug={true}
drawPickingColors={drawPickingColors}
ContextProvider={MapContext.Provider}
>
<View id="basemap">
<StaticMap
key="map"
mapStyle="mapbox://styles/mapbox/light-v9"
mapboxApiAccessToken={MapboxAccessToken || 'no_token'}
/>
<ViewportLabel key="label">Map View</ViewportLabel>
</View>

<View id="first-person">
<ViewportLabel>First Person View</ViewportLabel>
</View>

<View id="infovis">
<ViewportLabel>Orbit View (PlotLayer only, No Navigation)</ViewportLabel>
</View>

<div style={NAVIGATION_CONTROL_STYLES}>
<NavigationControl />
</div>
</DeckGL>
</div>
);
return [GLOBAL_LIGHTING];
}

render() {
const {settings, activeExamples, hoveredItem, clickedItem, queriedItems} = this.state;
const {settings, activeExamples} = this.state;

return (
<div>
{this._renderMap()}
<Map
ref={this.mapRef}
layers={this._renderExamples()}
views={this._getViews()}
effects={this._getEffects()}
settings={settings}
/>
<div id="control-panel">
<div style={{textAlign: 'center', padding: '5px 0 5px'}}>
<button onClick={this._onPickObjects}>
Expand All @@ -376,12 +254,6 @@ export default class App extends PureComponent {
onUpdateLayer={this._onUpdateLayerSettings}
/>
</div>
<LayerInfo
ref="infoPanel"
hovered={hoveredItem}
clicked={clickedItem}
queried={queriedItems}
/>
</div>
);
}
Expand Down

0 comments on commit a4d1634

Please sign in to comment.