kepler.gl
v3.0.0
Kepler.gl es una aplicación basada en la web de alto rendimiento y de alto rendimiento de datos para la exploración visual de conjuntos de datos de geolocalización a gran escala. Construido sobre Maplibre GL y Deck.gl, Kepler.gl puede representar millones de puntos que representan miles de viajes y realizar agregaciones espaciales sobre la marcha.
Kepler.gl también es un componente React que utiliza Redux para administrar su estado y flujo de datos. Se puede integrar en otras aplicaciones React-Redux y es altamente personalizable. Para obtener información sobre cómo incrustar kepler.gl en su aplicación, eche un vistazo a este tutorial paso a paso en Vis.academy.
Use el nodo 18.18.2 o superior, las versiones de nodo más antiguas no han sido compatibles/ probadas. Para obtener los mejores resultados, use nvm install NVM.
Instalar nodo ( > 18.18.2 ), hilo y dependencias de proyectos
npm install --save kepler.gl
// or
yarn add kepler.glKepler.gl se basa en Mapbox. Necesitará un token de acceso MAPBOX para usarlo.
Si no usa un Bundler de módulo, también está bien. El paquete Kepler.GL NPM incluye compilaciones de producción precompiladas en la carpeta UMD. Puede agregar la etiqueta de script a su archivo HTML como sigue:
< script src =" https://unpkg.com/kepler.gl/umd/keplergl.min.js " />O si lo desea, puede cargar una versión específica
< script src =" https://unpkg.com/[email protected]/umd/keplergl.min.js " />Eche un vistazo a la guía de desarrollo para desarrollar kepler.gl localmente.
Estos son los pasos básicos para importar kepler.gl en su aplicación. También echas un vistazo a la carpeta de ejemplos. Cada ejemplo en la carpeta se puede instalar y ejecutar localmente.
Kepler.gl usa Redux para administrar su estado interno, junto con el middleware React-Palm para manejar los efectos secundarios.
También debe agregar taskMiddleware de react-palm a su tienda. Estamos trabajando activamente en una solución en la que no se requerirá react-palm , sin embargo, sigue siendo una herramienta de gestión de efectos secundarios muy livianos que es más fácil de probar que React-Thunk.
import { createStore , combineReducers , applyMiddleware , compose } from 'redux' ;
import keplerGlReducer from '@kepler.gl/reducers' ;
import { enhanceReduxMiddleware } from '@kepler.gl/middleware' ;
const initialState = { } ;
const reducers = combineReducers ( {
// <-- mount kepler.gl reducer in your app
keplerGl : keplerGlReducer ,
// Your other reducers here
app : appReducer
} ) ;
// using createStore
export default createStore (
reducer ,
initialState ,
applyMiddleware (
enhanceReduxMiddleware ( [
/* Add other middlewares here */
] )
)
) ;O si usa potenciador:
// using enhancers
const initialState = { } ;
const middlewares = enhanceReduxMiddleware ( [
// Add other middlewares here
] ) ;
const enhancers = [ applyMiddleware ( ... middlewares ) ] ;
export default createStore ( reducer , initialState , compose ( ... enhancers ) ) ; Si monta Kepler.gl Reducer en otra dirección en lugar de keplerGl , o el reductor de kepler.gl no está montado en la raíz de su estado, deberá especificar la ruta cuando monta el componente con el accesorio getState .
Lea más sobre reductores.
import KeplerGl from '@kepler.gl/components' ;
const Map = props => (
< KeplerGl id = "foo" width = { width } mapboxApiAccessToken = { token } height = { height } / >
) ; id (cadena, requerido)map La ID de esta instancia de Keplergl. Se requiere id si tiene múltiples instancias de Keplergl en su aplicación. Define el nombre de apoyo del estado Keplergl que se almacena en el reductor Keplergl. Por ejemplo, el estado del componente Keplergl con ID foo se almacena en state.keplerGl.foo .
En caso de que cree múltiples instancias Kepler.gl utilizando la misma ID, el estado Kepler.GL definido por la entrada será anulado por la última instancia y restablecer a un estado en blanco.
mapboxApiAccessToken (cadena, requerido*)undefinedPor defecto, kepler.gl usa mapbox-gl.js para representar sus mapas base. Puede crear una cuenta gratuita en Mapbox y crear un token en www.mapbox.com/account/access-tokens.
Si reemplazó los estilos de mapa predeterminados Kepler.gl con los suyos, y no son estilos de mapbox. No se requerirá mapboxApiAccessToken .
Lea más sobre los estilos de mapa personalizados.
getState (función, opcional)state => state.keplerGlEl camino hacia el estado de la raíz Keplergl en su reductor.
width (número, opcional)800Ancho de la ui keplergl.
height (número, opcional)800 appName (cadena, opcional)Kepler.GlNombre de la aplicación que se muestra en el encabezado del panel lateral
version (cadena, opcional)v1.0Versión que se muestra en el encabezado del panel lateral
onSaveMap (función, opcional)undefinedAcción llamada cuando haga clic en Guardar URL de mapa en el encabezado del panel lateral.
onViewStateChange (función, opcional)undefinedviewState : un objeto de estado de vista actualizado que contiene parámetros como longitud, latitud, zoom, etc.Acción activada cuando se actualiza la vista de mapas.
getMapboxRef(mapbox, index) (función, opcional)undefined Función llamada cuando KeplerGL agrega o elimina un componente MapContainer que tiene un mapa de mapa de mapbox interno.
El argumento mapbox es un MapRef cuando se agrega o null cuando se elimina.
El argumento index es 0 para un solo mapa o 1 para un mapa adicional (ya que KeplerGL admite una vista de mapa dividida opcional).
actions (objeto, opcional){}Acción de creadores para reemplazar el creador de acción Kepler.gl predeterminado. Solo use Acción personalizada cuando desee modificar la carga útil de Action.
mint (booleano, opcional)true Si cargar un estado vacío fresco cuando se monta el componente. Cuando se parse mint: true kepler.gl siempre cargará un estado nuevo cuando vuelva a montar el mismo componente, el estado dentro de este componente se destruirá una vez que se desmonte. Al analizar mint: false Kepler.gl mantendrá el estado del componente en la tienda incluso cuando no se monta, y lo usará como estado inicial cuando se vuelva a montar nuevamente. Esto es útil al montar kepler.gl en un modal y mantener el mismo mapa cuando se vuelve a abrir.
Lea más sobre componentes.
theme (objeto | cadena, opcional)null Uno de "dark" , "light" o "base" puede pasar el nombre del tema u objeto utilizado para personalizar el estilo Kepler.gl. Kepler.gl proporciona un tema 'light' además del tema 'oscuro' predeterminado. Cuando pase en un objeto de tema, Kepler.gl usará el valor aprobado como entrada para anular los valores del tema.
Lea más sobre el tema personalizado
mapboxApiUrl (cadena, opcional)https://api.mapbox.comSi está utilizando su propio servidor MapBox Tile, puede pasar su propia URL de la API del servidor de mosaico.
mapStylesReplaceDefault (booleano, opcional)false Kepler.gl proporciona 4 estilos de mapa para elegir. Pase true si desea suministrar sus propios mapStyles . Vea abajo.
mapStyles (matriz, opcional)[] Puede suministrar estilos de mapa adicionales para mostrar en el panel de selección de estilo de mapa. Por defecto, se agregarán estilos de mapa adicionales a los estilos de mapa predeterminados. Si pase mapStylesReplaceDefault: true , reemplazarán los predeterminados. Kepler.gl intentará agrupar capas de su estilo en función de su convención de nombres id y usarla para permitir la visibilidad de alternar de las capas del mapa base. Suministre sus propios layerGroups para anular el valor predeterminado para una agrupación de capa más precisa.
Cada mapStyles debe tener las siguientes propiedades:
id (Cadena, requerida) Cadena única que no debería ser una de estas light dark reservada muted . muted_nightlabel (cadena, requerido) Nombre para mostrar en el panel de selección de estilo de mapaurl (cadena, requerida) URL de estilo MAPBOX o una URL que apunta al objeto JSON de estilo MAP escrito en la especificación de estilo MAPBOX GL.icon (cadena, opcional) icono de imagen del estilo, puede ser una URL o una URL de datos de imagenlayerGroups (matriz, opcional) const mapStyles = [
{
id : 'my_dark_map' ,
label : 'Dark Streets 9' ,
url : 'mapbox://styles/mapbox/dark-v9' ,
icon : ` ${ apiHost } /styles/v1/mapbox/dark-v9/static/-122.3391,37.7922,9.19,0,0/400x300?access_token= ${ accessToken } &logo=false&attribution=false` ,
layerGroups : [
{
slug : 'label' ,
filter : ( { id } ) => id . match ( / (?=(label|place-|poi-)) / ) ,
defaultVisibility : true
} ,
{
// adding this will keep the 3d building option
slug : '3d building' ,
filter : ( ) => false ,
defaultVisibility : false
}
]
}
] ;Lea más sobre los estilos de mapa personalizados.
initialUiState (objeto, opcional)undefined Estado de interfaz de usuario intial aplicado al reductor de uistate, el valor se fusionará a poco con el valor predeterminado INITIAL_UI_STATE
localeMessages (objeto, opcional)undefined modificar la traducción predeterminada o agregar una nueva traducciónLea más sobre la localización.
keplerGl . Una ventaja de usar el estado de componente reductor sobre react para manejar el estado Keplergl es la flexibilidad para personalizar su comportamiento. Si solo tiene una instancia KeplerGl en su aplicación o nunca tiene la intención de enviar acciones a Keplergl desde fuera del componente en sí, no debe preocuparse por reenviar el envío y puede pasar a la siguiente sección. Pero la vida está llena de personalizaciones, y queremos hacer que la suya sea lo más agradable posible.
Hay múltiples formas de enviar acciones a una instancia KeplerGl específica.
Cada acción se asigna a un actualizador reductor en kepler.gl. Puede importar el actualizador de reductores correspondiente a una acción específica y llamarlo con el estado anterior y la carga útil de acción para obtener el estado actualizado. por ejemplo, updateVisDataUpdater es el actualizador de ActionTypes.UPDATE_VIS_DATA (eche un vistazo a cada reducers/vis-state.js para acción a la asignación de actualizadores). Aquí hay un ejemplo de cómo puede escuchar una aplicación Action QUERY_SUCCESS y llamar updateVisDataUpdater para cargar datos en kepler.gl.
import { keplerGlReducer , visStateUpdaters } from '@kepler.gl/reducers' ;
// Root Reducer
const reducers = combineReducers ( {
keplerGl : keplerGlReducer ,
app : appReducer
} ) ;
const composedReducer = ( state , action ) => {
switch ( action . type ) {
case 'QUERY_SUCCESS' :
return {
... state ,
keplerGl : {
... state . keplerGl ,
// 'map' is the id of the keplerGl instance
map : {
... state . keplerGl . map ,
visState : visStateUpdaters . updateVisDataUpdater ( state . keplerGl . map . visState , {
datasets : action . payload
} )
}
}
} ;
}
return reducers ( state , action ) ;
} ;
export default composedReducer ;Lea más sobre el uso de actualizadores para modificar kepler.gl state
connect Puede agregar una función de despacho a su componente que envía acciones a un componente específico keplerGl , usando Connect.
// component
import KeplerGl from '@kepler.gl/components' ;
// action and forward dispatcher
import { toggleFullScreen , forwardTo } from '@kepler.gl/actions' ;
import { connect } from 'react-redux' ;
const MapContainer = props => (
< div >
< button onClick = { ( ) => props . keplerGlDispatch ( toggleFullScreen ( ) ) } / >
< KeplerGl
id = "foo"
/ >
< / div >
)
const mapStateToProps = state => state
const mapDispatchToProps = ( dispatch , props ) => ( {
dispatch ,
keplerGlDispatch : forwardTo ( ‘foo’ , dispatch )
} ) ;
export default connect (
mapStateToProps ,
mapDispatchToProps
) ( MapContainer ) ; También puede simplemente envolver una acción en una acción hacia adelante con el wrapTo Helper
// component
import KeplerGl from '@kepler.gl/components' ;
// action and forward dispatcher
import { toggleFullScreen , wrapTo } from '@kepler.gl/actions' ;
// create a function to wrapper action payload to 'foo'
const wrapToMap = wrapTo ( 'foo' ) ;
const MapContainer = ( { dispatch } ) => (
< div >
< button onClick = { ( ) => dispatch ( wrapToMap ( toggleFullScreen ( ) ) } / >
< KeplerGl
id = "foo"
/ >
< / div >
) ;Lea más sobre las acciones de envío hacia adelante
Kepler.gl implementa el estilo CSS usando componentes de estilo. Mediante el uso de dicho marco kepler.gl ofrece la capacidad de personalizar su estilo/tema utilizando los siguientes enfoques:
Las propiedades disponibles para personalizar se enumeran aquí.
Ejemplo de tema personalizado.
Puede personalizar el tema Kepler.gl pasando un tema de temas a Kepler.gl React Component como sigue:
const white = '#ffffff' ;
const customTheme = {
sidePanelBg : white ,
titleTextColor : '#000000' ,
sidePanelHeaderBg : '#f7f7F7' ,
subtextColorActive : '#2473bd'
} ;
return (
< KeplerGl
mapboxApiAccessToken = { MAPBOX_TOKEN }
id = "map"
width = { 800 }
height = { 800 }
theme = { customTheme }
/ >
) ;Como puede ver, el objeto CustomTheme define ciertas propiedades que anularán las reglas de estilo predeterminadas Kepler.gl.
Para personalizar el tema Kepler.gl usando TheSeproVider, simplemente puede envolver kepler.gl usando theprovider como sigue:
import { ThemeProvider } from 'styled-components' ;
const white = '#ffffff' ;
const customTheme = {
sidePanelBg : white ,
titleTextColor : '#000000' ,
sidePanelHeaderBg : '#f7f7F7' ,
subtextColorActive : '#2473bd'
} ;
return (
< ThemeProvider theme = { customTheme } >
< KeplerGl mapboxApiAccessToken = { MAPBOX_TOKEN } id = "map" width = { 800 } height = { 800 } / >
< / ThemeProvider >
) ; Todos quieren la flexibilidad para representar componentes personalizados Kepler.gl. Kepler.gl tiene un sistema de inyección de dependencia que le permite inyectar componentes a Keplergl reemplazando los existentes. Todo lo que necesita hacer es crear una fábrica de componentes para la que desea reemplazar, importar la fábrica de componentes original y llamar a injectComponents en el componente raíz de su aplicación donde se monta KeplerGl . Eche un vistazo a examples/demo-app/src/app.js y vea cómo hace que un encabezado de panel lateral personalizado en kepler.gl
import { injectComponents , PanelHeaderFactory } from '@kepler.gl/components' ;
// define custom header
const CustomHeader = ( ) => < div > My kepler.gl app < / div > ;
const myCustomHeaderFactory = ( ) => CustomHeader ;
// Inject custom header into Kepler.gl, replacing default
const KeplerGl = injectComponents ( [ [ PanelHeaderFactory , myCustomHeaderFactory ] ] ) ;
// render KeplerGl, it will render your custom header instead of the default
const MapContainer = ( ) => (
< div >
< KeplerGl id = "foo" / >
< / div >
) ; Uso de withState Helper para agregar estado de reductor y acciones al componente personalizado como accesorios adicionales.
import { withState , injectComponents , PanelHeaderFactory } from '@kepler.gl/components' ;
import { visStateLens } from '@kepler.gl/reducers' ;
// custom action wrap to mounted instance
const addTodo = text =>
wrapTo ( 'map' , {
type : 'ADD_TODO' ,
text
} ) ;
// define custom header
const CustomHeader = ( { visState , addTodo } ) => (
< div onClick = { ( ) => addTodo ( 'hello' ) } > { ` ${
Object . keys ( visState . datasets ) . length
} dataset loaded` } < / div >
) ;
// now CustomHeader will receive `visState` and `addTodo` as additional props.
const myCustomHeaderFactory = ( ) =>
withState (
// keplerGl state lenses
[ visStateLens ] ,
// customMapStateToProps
headerStateToProps ,
// actions
{ addTodo }
) ( CustomHeader ) ;Lea más sobre la reemplazo de componente de interfaz de usuario
Para interactuar con una instancia Kepler.gl y agregarle nuevos datos, puede enviar la acción addDataToMap desde cualquier lugar dentro de su aplicación. Agrega un conjunto de datos o múltiples conjuntos de datos a una instancia kepler.gl y actualiza la configuración completa (MapState, MapStyle, Visstate).
Objeto data *Requerido
datasets (Array <ject> | Object) *Los conjuntos de datos requeridos pueden ser un conjunto de datos o una variedad de conjuntos de datos que cada objeto de conjunto de datos debe tener info y propiedad data .
datasets.info Object -info de un conjunto de datosdatasets.info.id ID de cadena de este conjunto de datos. Si se define la configuración, id debería coincidir con dataId en config.datasets.info.label Strad Un nombre de visualización de este conjunto de datosdatasets.data Object *requirió el objeto de datos, en un formato tabular con 2 fields y rows de propiedades de propiedadesdatasets.data.fields Array <S Object> *Matriz de campos requerido ,datasets.data.fields.name String *Nombre requerido del campo,datasets.data.rows Array <Array> *Matriz requerida de filas, en un formato tabular con fields y rows Objeto options
options.centerMap boolean default: true si se establece centerMap en true kepler.gl colocará la vista de mapa dentro de los límites de puntos de datosoptions.readOnly Boolean default: false Si readOnly se establece en true el panel de configuración de la izquierda se ocultaráoptions.keepExistingConfig boolean default: false si sigue saliendo de la configuración del mapa, incluidas capas, filtros y mapas divididos. Objeto config Este objeto contendrá la configuración de instancia Kepler.gl completa {MapState, MapStyle, Visstate}
Kepler.gl proporciona una API fácil KeplerGlSchema.getConfigToSave para generar una blob JSON de la configuración de instancia de Kepler actual.
// app.js
import { addDataToMap } from '@kepler.gl/actions' ;
const sampleTripData = {
fields : [
{ name : 'tpep_pickup_datetime' , format : 'YYYY-M-D H:m:s' , type : 'timestamp' } ,
{ name : 'pickup_longitude' , format : '' , type : 'real' } ,
{ name : 'pickup_latitude' , format : '' , type : 'real' }
] ,
rows : [
[ '2015-01-15 19:05:39 +00:00' , - 73.99389648 , 40.75011063 ] ,
[ '2015-01-15 19:05:39 +00:00' , - 73.97642517 , 40.73981094 ] ,
[ '2015-01-15 19:05:40 +00:00' , - 73.96870422 , 40.75424576 ]
]
} ;
const sampleConfig = {
visState : {
filters : [
{
id : 'me' ,
dataId : 'test_trip_data' ,
name : 'tpep_pickup_datetime' ,
type : 'timeRange' ,
view : 'enlarged'
}
]
}
} ;
this . props . dispatch (
addDataToMap ( {
datasets : {
info : {
label : 'Sample Taxi Trips in New York City' ,
id : 'test_trip_data'
} ,
data : sampleTripData
} ,
option : {
centerMap : true ,
readOnly : false
} ,
config : sampleConfig
} )
) ;Lea más sobre AddDatatomap y guardando y carga mapas con Schema Manager.
