kepler.gl
v3.0.0
Kepler.gl은 대규모 지리적 위치 데이터 세트를 시각적으로 탐색하기위한 데이터 공유의 고성능 웹 기반 애플리케이션입니다. Maplibre Gl 및 Deck.gl 위에 내장 된 Kepler.gl은 수천 개의 트립을 나타내는 수백만 개의 점수를 렌더링하고 즉시 공간 집계를 수행 할 수 있습니다.
Kepler.gl은 또한 Redux를 사용하여 상태 및 데이터 흐름을 관리하는 React 구성 요소입니다. 다른 React-Redux 응용 프로그램에 포함시킬 수 있으며 사용자 정의가 가능합니다. 앱에 Kepler.gl을 포함시키는 방법에 대한 자세한 내용은 Vis.Academy에 대한이 단계별 자습서를 살펴보십시오.
노드 18.18.2 이상을 사용하여 이전 노드 버전은 지원/ 테스트되지 않았습니다. 최상의 결과를 얻으려면 NVM nvm install 사용하십시오.
노드 설치 ( > 18.18.2 ), 원사 및 프로젝트 종속성
npm install --save kepler.gl
// or
yarn add kepler.glKepler.gl은 Mapbox에 제작되었습니다. 사용하려면 맵 박스 액세스 토큰이 필요합니다.
Bundler 모듈을 사용하지 않으면 괜찮습니다. Kepler.gl NPM 패키지에는 UMD 폴더의 사전 컴파일 된 프로덕션 UMD 빌드가 포함되어 있습니다. 다음과 같이 스크립트 태그를 HTML 파일에 추가 할 수 있습니다.
< script src =" https://unpkg.com/kepler.gl/umd/keplergl.min.js " />또는 원하는 경우 특정 버전을로드 할 수 있습니다.
< script src =" https://unpkg.com/[email protected]/umd/keplergl.min.js " />개발 가이드를 살펴 보려면 Kepler.gl을 현지에서 개발하십시오.
Kepler.gl을 앱으로 가져 오는 기본 단계는 다음과 같습니다. 또한 예제 폴더를 살펴 봅니다. 폴더의 각 예제는 로컬로 설치하고 실행할 수 있습니다.
Kepler.gl은 Redux를 사용하여 반응 PALM 미들웨어와 함께 내부 상태를 관리하여 부작용을 처리합니다.
react-palm 의 taskMiddleware 상점에 추가해야합니다. 우리는 react-palm 필요하지 않은 솔루션을 적극적으로 연구하고 있지만 여전히 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 */
] )
)
) ;또는 Enhancer를 사용하는 경우 :
// using enhancers
const initialState = { } ;
const middlewares = enhanceReduxMiddleware ( [
// Add other middlewares here
] ) ;
const enhancers = [ applyMiddleware ( ... middlewares ) ] ;
export default createStore ( reducer , initialState , compose ( ... enhancers ) ) ; Kepler.gl Reducer를 keplerGl 대신 다른 주소로 마운트하거나 Kepler.gl Reducer가 상태의 루트에 장착되지 않은 경우 getState 소품으로 구성 요소를 장착 할 때 경로를 지정해야합니다.
감속기에 대해 자세히 알아보십시오.
import KeplerGl from '@kepler.gl/components' ;
const Map = props => (
< KeplerGl id = "foo" width = { width } mapboxApiAccessToken = { token } height = { height } / >
) ; id (문자열, 필수)map 이 keplergl 인스턴스의 ID. 앱에 여러 keplergl 인스턴스가 있으면 id 필요합니다. Keplergl Reducer에 저장된 Keplergl 상태의 소품 이름을 정의합니다. 예를 들어, id foo 있는 Keplergl 구성 요소의 상태는 state.keplerGl.foo 에 저장됩니다.
동일한 ID를 사용하여 여러 kepler.gl 인스턴스를 생성하는 경우 항목으로 정의 된 kepler.gl 상태는 최신 인스턴스로 재정의되어 빈 상태로 재설정됩니다.
mapboxApiAccessToken (String, 필수*)undefined기본적으로 Kepler.gl은 Mapbox-Gl.js를 사용하여 기본 맵을 렌더링합니다. Mapbox에서 무료 계정을 만들고 www.mapbox.com/account/access-tokens에서 토큰을 만들 수 있습니다.
Kepler.gl 기본 맵 스타일을 자신의 것으로 바꾸면 Mapbox 스타일이 아닙니다. mapboxApiAccessToken 필요하지 않습니다.
사용자 정의 맵 스타일에 대해 자세히 알아보십시오.
getState (함수, 선택 사항)state => state.keplerGl감속기의 루트 keplergl 상태로가는 경로.
width (숫자, 선택 사항)800Keplergl ui의 너비.
height (숫자, 선택 사항)800 appName (String, 선택 사항)Kepler.Gl측면 패널 헤더에 앱 이름이 표시됩니다
version (문자열, 선택 사항)v1.0측면 패널 헤더에 표시된 버전
onSaveMap (함수, 선택 사항)undefined측면 패널 헤더에서 맵 URL 저장을 클릭하면 조치가 호출됩니다.
onViewStateChange (함수, 선택 사항)undefinedviewState 경도, 위도, 줌 등과 같은 매개 변수를 포함하는 업데이트 된 상태 객체MAP ViewPort가 업데이트 될 때 작업이 트리거됩니다.
getMapboxRef(mapbox, index) (함수, 선택 사항)undefined KeplerGL 내부 맵 박스 맵이있는 MapContainer 구성 요소를 추가하거나 제거 할 때 호출됩니다.
mapbox 인수는 제거 될 때 추가되거나 null 잡힌 경우 MapRef 입니다.
index 인수는 단일 맵의 경우 0 또는 추가 맵의 경우 1입니다 ( KeplerGL 선택적 분할 맵보기를 지원하기 때문에).
actions (객체, 선택 사항){}기본 kepler.gl 액션 제작자를 대체하는 액션 제작자. 액션 페이로드를 수정할 때만 사용자 정의 작업 만 사용하십시오.
mint (부울, 선택 사항)true 구성 요소가 장착 될 때 신선한 빈 상태를로드할지 여부. Parse mint: true Kepler.gl 구성 요소는 동일한 구성 요소를 다시 마운트 할 때 항상 새로운 상태를로드하면이 구성 요소 내부의 상태가 해제되지 않으면 파괴됩니다. mint: false Kepler.gl은 구성 요소 상태를 노운 상태로 유지하고 다시 장착 할 때 초기 상태로 사용합니다. 이것은 모달에 kepler.gl을 장착 할 때 유용하며 다시 열 때 동일한 맵을 유지하십시오.
구성 요소에 대해 자세히 알아보십시오.
theme (객체 | 문자열, 선택 사항)null "dark" , "light" 또는 "base" 중 하나는 Kepler.gl 스타일을 사용자 정의하는 데 사용되는 테마 이름 또는 객체를 전달할 수 있습니다. kepler.gl 기본 '다크'테마 외에 'light' 테마를 제공합니다. 테마 객체에서 전달되면 kepler.gl은 전달 된 값을 입력으로 사용하여 테마에서 값을 무시합니다.
사용자 정의 테마에 대해 자세히 알아보십시오
mapboxApiUrl (문자열, 선택 사항)https://api.mapbox.com자신의 MapBox 타일 서버를 사용하는 경우 자신의 타일 서버 API URL을 전달할 수 있습니다.
mapStylesReplaceDefault (부울, 선택 사항)false Kepler.gl 선택할 수있는 4 개의 맵 스타일을 제공합니다. 자신의 mapStyles 공급하려면 true 통과하십시오. 아래를 참조하십시오.
mapStyles (배열, 선택 사항)[] 맵 스타일 선택 패널에 표시 할 추가 맵 스타일을 제공 할 수 있습니다. 기본적으로 추가 맵 스타일이 기본 맵 스타일에 추가됩니다. mapStylesReplaceDefault: true 기본값을 대체합니다. Kepler.gl은 id 명명 컨벤션을 기반으로 스타일의 레이어를 그룹화하려고 시도하여이를 사용하여 기본 맵 계층의 가시성을 조정할 수 있습니다. 보다 정확한 레이어 그룹화를 위해 기본값을 무시하기 위해 자신의 layerGroups 제공하십시오.
각 mapStyles 다음과 같은 속성이 있어야합니다.
id (문자열, 필수)이 예약 된 dark light 중 하나 muted 되어서는 안되는 고유 한 문자열. muted_nightlabel (문자열, 필수) 맵 스타일 선택 패널에 표시 할 이름url (문자열, 필수) 맵 박스 스타일 URL 또는 맵 박스 GL 스타일 사양으로 작성된 맵 스타일 JSON 객체를 가리키는 URL.icon (문자열, 선택 사항) 스타일의 이미지 아이콘, URL 또는 이미지 데이터 URL 일 수 있습니다.layerGroups (배열, 선택 사항) 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
}
]
}
] ;사용자 정의 맵 스타일에 대해 자세히 알아보십시오.
initialUiState (객체, 선택 사항)undefined Uistate Reducer에 적용되는 Intial UI 상태, 값은 Default INITIAL_UI_STATE 와 얕게 병합됩니다.
localeMessages (객체, 선택 사항)undefined 기본 변환을 수정하거나 새 번역을 추가합니다현지화에 대해 자세히 알아보십시오.
keplerGl READER에 사용자 정의 동작을 발송합니다. Keplergl 상태를 처리하기 위해 READER OVER REACT 구성 요소 상태를 사용하는 한 가지 장점은 동작을 사용자 정의하는 유연성입니다. 앱에 KeplerGl 인스턴스가 하나만 있거나 구성 요소 외부에서 Keplergl에 동작을 발송하지 않으려는 경우 디스패치 전달에 대해 걱정할 필요가 없으며 다음 섹션으로 넘어갈 수 있습니다. 그러나 인생은 커스터마이징으로 가득 차 있으며, 우리는 당신을 가능한 한 즐겁게 만들고 싶습니다.
특정 KeplerGl 인스턴스에 작업을 파견하는 방법에는 여러 가지가 있습니다.
각 동작은 Kepler.gl의 감속기 업데이트에 매핑됩니다. 특정 동작에 해당하는 READER 업데이트를 가져 와서 이전 상태 및 작업 페이로드와 호출하여 업데이트 된 상태를 얻을 수 있습니다. 예를 들어 updateVisDataUpdater 는 ActionTypes.UPDATE_VIS_DATA 의 업데이터입니다 (업데이트 매핑에 대한 조치를 위해 각 감속기 reducers/vis-state.js 를 살펴보십시오). 다음은 앱 액션 QUERY_SUCCESS 듣고 updateVisDataUpdater 호출하여 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 ;kepler.gl 상태를 수정하기 위해 업데이트를 사용하는 것에 대한 자세한 내용을 읽으십시오
connect 사용 Connect를 사용하여 작업을 특정 keplerGl 구성 요소에 디스패치하는 구성 요소에 디스패치 기능을 추가 할 수 있습니다.
// 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 ) ; wrapTo 도우미와 함께 행동을 전진적인 행동으로 마무리 할 수도 있습니다.
// 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 >
) ;앞으로 파견 된 행동에 대해 자세히 알아보십시오
Kepler.gl은 스타일의 경쟁자를 사용하여 CSS 스타일을 구현합니다. 상기 프레임 워크를 사용함으로써 Kepler.gl은 다음 접근 방식을 사용하여 스타일/테마를 사용자 정의 할 수있는 기능을 제공합니다.
사용자 정의 할 수있는 사용 가능한 속성은 여기에 나열되어 있습니다.
사용자 정의 테마 예제.
테마 소품을 Kepler.gl React 구성 요소에 전달하여 Kepler.gl 테마를 사용자 정의 할 수 있습니다.
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 }
/ >
) ;보시다시피 CustomTheme 객체는 Kepler.gl 기본 스타일 규칙을 무시하는 특정 속성을 정의합니다.
ThemeProvider를 사용하여 kepler.gl 테마를 사용자 정의하려면 ThemeProvider를 사용하여 kepler.gl을 마무리 할 수 있습니다.
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 >
) ; 누구나 사용자 정의 kepler.gl 구성 요소를 렌더링 할 수있는 유연성을 원합니다. Kepler.gl에는 기존 구성 요소를 대체하는 구성 요소에 부품을 주입 할 수있는 종속성 주입 시스템이 있습니다. 교체하려는 구성 요소 공장을 만들고, 원래 구성 요소 공장을 가져오고, KeplerGl 장착 된 앱의 루트 구성 요소에서 injectComponents 호출하는 것입니다. examples/demo-app/src/app.js 를 살펴보고 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 >
) ; withState 도우미를 사용하여 추가 소품으로 사용자 정의 된 구성 요소에 Reture State 및 작업을 추가합니다.
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 ) ;UI 구성 요소 교체에 대한 자세한 내용은 자세히 알아보십시오
Kepler.gl 인스턴스와 상호 작용하고 새로운 데이터를 추가하려면 앱 내부의 어느 곳에서나 addDataToMap 작업을 발송할 수 있습니다. Kepler.gl 인스턴스에 데이터 세트 또는 여러 데이터 세트를 추가하고 전체 구성 (MapState, MapStyle, Visstate)을 업데이트합니다.
data 객체 *필수
datasets (Array <bood> | Object) *필수 데이터 세트는 데이터 세트이거나 다양한 데이터 세트가 될 수 있습니다. 각 데이터 세트 객체에는 info 및 data 속성이 필요합니다.
datasets.info 객체 -info의 데이터 세트datasets.info.id 문자열 ID. 구성이 정의되면 id 구성의 dataId 와 일치해야합니다.datasets.info.label 문자열 이 데이터 세트의 표시 이름입니다datasets.data 객체 * 2 개의 속성 fields 및 rows 있는 표 형식으로 데이터 객체가 필요합니다.datasets.data.fields 배열 <bood> *필수 필드 배열,datasets.data.fields.name String * 필드의 필드 이름,datasets.data.rows 배열 <Array> *필수 행, fields 및 rows 있는 표 형식으로 필요한 배열 options 객체
options.centerMap 부울 default: true centerMap 이 true Kepler.gl로 설정된 경우 True Data Points 경계 내에 맵보기를 배치합니다.options.readOnly 읽기 부울 default: false readOnly 가 true 로 설정되면 왼쪽 설정 패널이 숨겨집니다.options.keepExistingConfig 부울 default: false . config 객체이 객체는 전체 kepler.gl 인스턴스 구성 {MapState, MapStyle, Visstate}를 포함합니다.
Kepler.gl은 Easy API KeplerGlSchema.getConfigToSave 를 제공하여 현재 Kepler 인스턴스 구성의 JSON 블로브를 생성합니다.
// 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
} )
) ;AddDatatomap 및 Schema Manager와의 맵을 저장 및로드하는 방법에 대해 자세히 알아보십시오.
