端端舝

坏圻妞妣均妓均妥妒圾妖局圻妞均妓妥局
妊 REACT 妒 MAPBOX GL JS
妊妥圻妤均妖妞孝妝屁妙妒妖
URBICA

4
VECTOR TILES?
∣?
STYLE?
∣?
WEBGL

6
STYLE
SOURCES
VECTOR
GEOJSON
RASTER
RASTERDEM
VIDEO
IMAGE
LAYERS
FILL
LINE
SYMBOL
CIRCLE
RASTER
FILLEXTRUSION

7
import mapboxgl from 'mapbox-gl';import mapboxgl from 'mapbox-gl';
mapboxgl.accessToken = 'pk ...';
import mapboxgl from 'mapbox-gl';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox: //styles/mapbox/streets-v11',
center: [-74.50, 40],
zoom: 9
});
container: 'map',
center: [-74.50, 40],
zoom: 9
});
map.on('load', () => {
});
container: 'map',
center: [-74.50, 40],
zoom: 9
});
map.addSource('sourceId', { type: 'vector', url: 'mapbox: // ...' });
});
container: 'map',
center: [-74.50, 40],
zoom: 9
});
map.addLayer({ id: 'layerId', type: 'line', source: 'sourceId' });
});
container: 'map',
center: [-74.50, 40],
zoom: 9
});
map.addLayer({ id: 'layerId', type: 'line', source: 'sourceId' });
map.addControl(new mapboxgl.NavigationControl());
});

9
new mapboxgl.Map({ container: 'map' });new mapboxgl.Map({ container: 'map' });
map.on('load', () => {});
new mapboxgl.Map({ container: 'map' });
map.on('load', () => {});
map.addSource('my-source', { type: 'geojson' });
map.on('load', () => {});
map.getSource('my-source').setData({});
map.on('load', () => {});
map.addLayer({ id: 'my-layer', type: 'line' });
map.on('load', () => {});
map.setLayoutProperty('my-layer', 'visibility', 'none');
map.on('load', () => {});
map.setPaintProperty('my-layer', 'fill-color', '#faafee');
map.on('load', () => {});
map.setPaintProperty('my-layer', 'fill-color', '#faafee');
map.addControl(new mapboxgl.NavigationControl());

10
坐妍妥妍圾局圻妓圻宋圻妖妒岐
GITHUB.COM/UBER/REACT-MAP-GL
GITHUB.COM/ALEX3165/REACT-MAPBOX-GL

11
? 坎妍妣屁宋妍妨妒妊妣妍夾妖局妨妤妓妍圻妞妥
? 妖圻妥妤妍坏坏圻妓夾妞妒 CRA (2016)
? 妖圻妥妤妍坏坏圻妓夾妞妒 SSR (2016)
? 妥岐夾圻妣妍圾均妥妍 (MINZIP 200/50KB)
UBER REACT-MAP-GL

12
ALEX3165 REACT-MAPBOX-GL
? 妊妣均坎均岐妥妒妤妒妝均孛妒岐
? 妙均妣妍妞妍妙妤妍妖圻妖妥妍圾妒妝
妊妥均妖坏均妓妥妖妍妨坎妒坎妣妒妍妥圻妞妒
? 妣圻完坐圻 (MINZIP 15KB)

13
? 妙均妞妊妒妙均妣屁妖妍妤妍孚妍夾妒妨 API
? 圾妊圻妞妍妙妤妍妖圻妖妥局妒妝
妊妥均妖坏均妓妥妖妍妨坎妒坎妣妒妍妥圻妞妒
? 妣圻坐妞妍妓均妊宋妒妓岐妥屁
? 圾妊圻坐妍 6KB MINZIP
@URBICA/REACT-MAP-GL

14
import MapGL, { Source, Layer, NavigationControl }
from '@urbica/react-map-gl';
<MapGL
mapStyle='mapbox: //styles/mapbox/streets-v11'
latitude={40}
longitude={-74.50}
zoom={9}
>
</MapGL>
<MapGL
latitude={40}
longitude={-74.50}
zoom={9}
>
<Source id='sourceId' type='vector' url='mapbox: // ...' />
</MapGL>
<MapGL
latitude={40}
longitude={-74.50}
zoom={9}
>
<Layer id='layerId' type='line' source='sourceId' paint={ ...} />
</MapGL>
<MapGL
latitude={40}
longitude={-74.50}
zoom={9}
>
<Layer id='layerId' type='line' source='sourceId' paint={ ...} />
<NavigationControl />
</MapGL>

17
妖圻妊妞妍妣屁妞妍?
?妒妊妥妍完妖妒妞妍圾妤妓均圾坏局?

18
map.on('moveend', (event) => {
if (event.originalEvent) {
// A human moved the map
}
});

19
Map State?
∣?
User?
∣?
Event Handler?
∣?
onViewportChange?
∣?
Map State

20
App State?
∣?
componentDidUpdate?
∣?
Map State

21
state = {
viewport: {
latitude: 37.78,
longitude: -122.41,
zoom: 11
}
};
<MapGL
mapStyle='mapbox: //styles/mapbox/dark-v9'
onViewportChange={viewport => setState({ viewport })}
viewportChangeMethod={'jumpTo' | 'easeTo' | 'flyTo'}
{ ...state.viewport}
/>

22
坏妍完圻妓妖妒圻
妞妍妙妤妍妖圻妖妥局

23
const mapStyle = Immutable.fromJS({
...baseStyle,
});
<MapGL
mapStyle={mapStyle}
accessToken='pk ...'
/>
...baseStyle,
sources: {
...baseStyle.sources,
sourceId1: { type: 'vector', url: 'mapbox: // ...' },
sourceId2: { type: 'geojson', data: {} },
},
});
<MapGL
mapStyle={mapStyle}
/>
...baseStyle,
sources: {
...baseStyle.sources,
sourceId1: { type: 'vector', url: 'mapbox: // ...' },
sourceId2: { type: 'geojson', data: {} },
},
layers: [
...baseStyle.layers,
{ id: 'layerId1', source: 'sourceId1', type: 'line', paint: {} },
{ id: 'layerId2', source: 'sourceId2', type: 'circle', paint: {} }
]
});
<MapGL
mapStyle={mapStyle}
/>

24
<MapGL mapStyle='mapbox: //styles/mapbox/streets-v11'>
</MapGL>
<Source id='sourceId1' type='vector' url='mapbox: // ...' />
<Layer id='layerId1' type='line' source='sourceId1' paint={ ...} />
</MapGL>
<Layer id='layerId2' type='circle' source='sourceId2' paint={ ...} />
</MapGL>
<Layer id='layerId2' type='circle' source='sourceId2' paint={ ...} />
<FullscreenControl />
<NavigationControl />
</MapGL>

25
const MapContext = React.createContext(null);const MapContext = React.createContext(null);
<MapContext.Provider value={this._map}>
</MapContext.Provider>
const MapContext = React.createContext(null);
<MapContext.Consumer>
</MapContext.Consumer>
const MapContext = React.createContext(null);
<MapContext.Consumer>
{(map) => this._map = map}
</MapContext.Consumer>

26
妤妍妓岐坏妍妞
妍妥妓妒妊妍圾妞妒
妊妣妍壯圾

27
// normalizeChildren
const layerWithBefore = cloneElement(layer, {
before: layer.props.before || nextLayerId;
});
const children = this.props.children
? normalizeChildren(this.props.children)
: null;

28
孝坏均妣圻妖妒圻
妒妊妥妍完妖妒妞妍圾坏均妖妖局孚

29
_removeSource = () => {
const sourceId = this.props.id;
const { layers } = this._map.getStyle();
layers.forEach((layer) => {
if (layer.source === sourceId) {
this._map.removeLayer(layer.id);
}
});
this._map.removeSource(sourceId);
};

30
妞妍妙妤妍妖圻妖妥局

31
<Source
id='sourceId'
type='vector'
url='mapbox: //mapbox-terrain-v2'
attribution='? Urbica'
/>
<Source
id='sourceId'
type='geojson'
data='https: // ...'
attribution='? Urbica'
/>
<Source
id='sourceId'
type='raster'
tileSize={256}
tiles={['https: // ...']}
/>
<Source
id='sourceId'
type='video'
urls={['https: // ...']}
coordinates={[]}
/>
<Source
id='sourceId'
type='image'
url='https: // ...'
coordinates={[]}
/>

32
<Layer
id='layerId'
type='line'
source='sourceId'
paint={{
'line-color': '#877b59',
'line-width': 1
}}
/>
<Layer
id='layerId'
type='circle'
source='sourceId'
paint={{
'circle-color': '#877b59',
'circle-width': 1
}}
/>
<Layer
id='layerId'
type='fill'
source='sourceId'
paint={{
'fill-color': '#877b59',
'fill-opacity': 0.8
}}
/>
<Layer
id='layerId'
type='symbol'
source='sourceId'
paint={{
'text-color': '#877b59',
'text-field': 'name:ru'
}}
/>

33
import { MapboxLayer } from '@deck.gl/mapbox';
import { ScatterplotLayer } from '@deck.gl/layers';
import MapGL, { CustomLayer } from '@urbica/react-map-gl';
const myDeckLayer = new MapboxLayer({
id: 'my-scatterplot',
type: ScatterplotLayer,
data: [{ position: [-74.5, 40], size: 1000 }],
getPosition: d => d.position,
getRadius: d => d.size,
getColor: [255, 0, 0]
});
<MapGL mapStyle='mapbox: // ...'>
<CustomLayer layer={myDeckLayer} />
</MapGL>

34
<AttributionControl />
<FullscreenControl />
<GeolocateControl />
<NavigationControl />?
<LanguageControl />
</MapGL>

35
<Source id='sourceId' />
<Layer id='layerId' />
<FeatureState
id={state.featureId}
source='sourceId'
state={{ hover: true }}
/>
</MapGL>

36
<Popup longitude={0} latitude={0}>
Hi there! ?
</Popup>
</MapGL>

37
<Marker longitude={0} latitude={0}>
<svg><circle fill='red' r='60' /> </svg>
</Marker>
</MapGL>

38
<MapGL mapStyle='mapbox: //styles/mapbox/light-v9'>
<Cluster radius={40} extent={512} nodeSize={64}>
{points.map(point => (
<Marker
key={point.id}
longitude={point.geometry.coordinates[0]}
latitude={point.geometry.coordinates[1]}
/>
))}
</Cluster>
</MapGL>

39
state = {
data: {
type: 'FeatureCollection',
features: []
}
}
<Draw
data={state.data}
mode='simple_select'
onChange={(data) => setState({ data })}
/>

40
妊妤均妊妒坎妍
stepan@urbica.co
github.com/stepankuzmin
github.com/urbica/react-map-gl?
github.com/urbica/react-map-gl-draw?
github.com/urbica/react-map-gl-cluster?
?
github.com/mapbox/mapbox-gl?
github.com/mapbox/vector-tile-spec?
github.com/mapbox/mapbox-gl-style-spec

端端舝

Declarative maps with React and Mapbox GL JS

More Related Content

Declarative maps with React and Mapbox GL JS