kepler.gl

kepler.gl | เว็บไซต์ | แอพสาธิต | เอกสาร

kepler.gl เป็นแอปพลิเคชั่นบนเว็บที่มีประสิทธิภาพสูงและมีประสิทธิภาพสูงสำหรับการสำรวจด้วยภาพชุดข้อมูลตำแหน่งทางภูมิศาสตร์ขนาดใหญ่ สร้างขึ้นบนด้านบนของ Maplibre GL และ Deck.gl, kepler.gl สามารถแสดงผลหลายล้านคะแนนซึ่งเป็นตัวแทนของการเดินทางหลายพันครั้งและทำการรวมตัวเชิงพื้นที่ได้ทันที

kepler.gl ยังเป็นองค์ประกอบปฏิกิริยาที่ใช้ Redux เพื่อจัดการสถานะและการไหลของข้อมูล มันสามารถฝังลงในแอปพลิเคชัน react-redux อื่น ๆ และปรับแต่งได้สูง สำหรับข้อมูลเกี่ยวกับวิธีการฝัง kepler.gl ในแอพของคุณดูที่การสอนทีละขั้นตอนนี้บน Vis.academy

ลิงค์

• เว็บไซต์
• การสาธิต
• ตัวอย่าง
• เริ่มต้นใช้งาน
• คู่มือผู้ใช้แอพ
• คู่มือผู้ใช้วิดเจ็ต Jupyter
• การสอน
• สแต็คล้น
• แนวทางการบริจาค
• การอ้างอิง API
• แผนงาน

env

ใช้โหนด 18.18.2 หรือสูงกว่ารุ่นโหนดที่เก่ากว่ายังไม่ได้รับการสนับสนุน/ ทดสอบ เพื่อผลลัพธ์ที่ดีที่สุดให้ใช้ nvm install NVM

ติดตั้ง kepler.gl

ติดตั้ง Node ( > 18.18.2 ), เส้นด้ายและการพึ่งพาโครงการ

npm install --save kepler.gl
// or
yarn add kepler.gl

kepler.gl ถูกสร้างขึ้นบน mapbox คุณจะต้องใช้โทเค็นการเข้าถึง 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 ลงในแอปของคุณ คุณยังดูโฟลเดอร์ตัวอย่าง แต่ละตัวอย่างในโฟลเดอร์สามารถติดตั้งและเรียกใช้ในเครื่อง

1. Mount Reducer

kepler.gl ใช้ Redux เพื่อจัดการสถานะภายในพร้อมกับมิดเดิลแวร์ React-Palm เพื่อจัดการกับผลข้างเคียง

คุณต้องเพิ่ม taskMiddleware ของ react-palm ไปยังร้านค้าของคุณด้วย เรากำลังทำงานอย่างแข็งขันในการแก้ปัญหาที่ไม่จำเป็นต้องใช้ 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 */
    ] )
  )
) ;

หรือถ้าใช้ตัวเพิ่มประสิทธิภาพ:

 // 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

อ่านเพิ่มเติมเกี่ยวกับตัวลด

2. ส่วนประกอบเมานต์

 import KeplerGl from '@kepler.gl/components' ;

const Map = props => (
  < KeplerGl id = "foo" width = { width } mapboxApiAccessToken = { token } height = { height } / >
) ; 

อุปกรณ์ประกอบฉาก

id (สตริงจำเป็น)

• ค่าเริ่มต้น: map

ID ของอินสแตนซ์ keplergl นี้ จำเป็นต้องใช้ id หากคุณมีอินสแตนซ์ keplergl หลายตัวในแอพของคุณ มันกำหนดชื่อเสาของสถานะ keplergl ที่เก็บไว้ในตัวลด keplergl ตัวอย่างเช่นสถานะของส่วนประกอบ keplergl ที่มี ID foo ถูกเก็บไว้ใน state.keplerGl.foo

ในกรณีที่คุณสร้างอินสแตนซ์หลาย kepler.gl โดยใช้ ID เดียวกันสถานะ kepler.gl ที่กำหนดโดยรายการจะถูกแทนที่ด้วยอินสแตนซ์ล่าสุดและรีเซ็ตเป็นสถานะว่าง

mapboxApiAccessToken (สตริงจำเป็น*)

• ค่าเริ่มต้น: undefined

โดยค่าเริ่มต้น kepler.gl ใช้ mapbox-gl.js เพื่อแสดงแผนที่ฐาน คุณสามารถสร้างบัญชีฟรีที่ Mapbox และสร้างโทเค็นที่ www.mapbox.com/account/access-tokens

หากคุณเปลี่ยนรูปแบบแผนที่เริ่มต้น kepler.gl ด้วยตัวคุณเองและพวกเขาไม่ใช่สไตล์ Mapbox ไม่จำเป็นต้องใช้ mapboxApiAccessToken

อ่านเพิ่มเติมเกี่ยวกับสไตล์แผนที่ที่กำหนดเอง

getState (ฟังก์ชั่นไม่บังคับ)

• ค่าเริ่มต้น: state => state.keplerGl

เส้นทางไปยังสถานะ Root Keplergl ในตัวลดของคุณ

width (หมายเลขเสริม)

• ค่าเริ่มต้น: 800

ความกว้างของ keplergl ui

height (หมายเลขเสริม)

• ค่าเริ่มต้น: 800

appName (สตริงเป็นทางเลือก)

• ค่าเริ่มต้น: Kepler.Gl

ชื่อแอพที่แสดงในส่วนหัวแผงด้านข้าง

version (สตริงเสริม)

• ค่าเริ่มต้น: v1.0

เวอร์ชันที่แสดงในส่วนหัวแผงด้านข้าง

onSaveMap (ฟังก์ชั่นเสริม)

• ค่าเริ่มต้น: undefined

การกระทำที่เรียกว่าเมื่อคลิกบันทึก URL แผนที่ในส่วนหัวแผงด้านข้าง

onViewStateChange (ฟังก์ชั่นเสริม)

• ค่าเริ่มต้น: undefined
• พารามิเตอร์: viewState - วัตถุสถานะมุมมองที่อัปเดตที่มีพารามิเตอร์เช่นลองจิจูด, ละติจูด, ซูม ฯลฯ

การดำเนินการทริกเกอร์เมื่ออัปเดต MAP Viewport

getMapboxRef(mapbox, index) (ฟังก์ชั่น, ไม่บังคับ)

• ค่าเริ่มต้น: undefined

ฟังก์ชั่นที่เรียกว่าเมื่อ KeplerGL เพิ่มหรือลบส่วนประกอบ MapContainer ที่มีแผนที่ MAPBOX ด้านใน

อาร์กิวเมนต์ mapbox เป็น MapRef เมื่อเพิ่มหรือ null เมื่อลบออก

อาร์กิวเมนต์ 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 Tile ของคุณเองคุณสามารถส่งผ่าน URL API Server ของคุณเอง

mapStylesReplaceDefault (บูลีนตัวเลือก)

• ค่าเริ่มต้น: false

kepler.gl จัดเตรียม 4 แผนที่ให้เลือก ผ่าน true หากคุณต้องการจัดหา mapStyles ของคุณเอง ดูด้านล่าง

mapStyles (อาร์เรย์เป็นทางเลือก)

• ค่าเริ่มต้น: []

คุณสามารถจัดหารูปแบบแผนที่เพิ่มเติมที่จะแสดงในแผงการเลือกสไตล์แผนที่ โดยค่าเริ่มต้นรูปแบบแผนที่เพิ่มเติมจะถูกเพิ่มในรูปแบบแผนที่เริ่มต้น หากผ่าน mapStylesReplaceDefault: true พวกเขาจะแทนที่ค่าเริ่มต้น kepler.gl จะพยายามจัดกลุ่มเลเยอร์ตามสไตล์ของคุณตามการประชุมการตั้งชื่อ id และใช้เพื่อให้สามารถมองเห็นการสลับของชั้นแผนที่ฐาน จัดหา layerGroups ของคุณเองเพื่อแทนที่ค่าเริ่มต้นสำหรับการจัดกลุ่มเลเยอร์ที่แม่นยำยิ่งขึ้น

แต่ละ mapStyles ควรมีคุณสมบัติดังต่อไปนี้:

• id (สตริงจำเป็น) สตริงที่ muted ซ้ำกันที่ ไม่ ควรเป็นหนึ่งใน light dark ที่สงวนไว้เหล่านี้ muted_night
• label (สตริงจำเป็น) ชื่อที่จะแสดงในแผงการเลือกสไตล์แผนที่
• url (สตริง, จำเป็น) URL สไตล์ MAPBOX หรือ URL ที่ชี้ไปที่วัตถุสไตล์แผนที่ JSON ที่เขียนในสเป็คสไตล์ MAPBOX GL
• 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

สถานะ UI แบบ intial ที่ใช้กับ uistate reducer ค่าจะถูกรวมเข้าด้วยกันกับค่าเริ่มต้นเริ่มต้น INITIAL_UI_STATE

localeMessages (วัตถุไม่บังคับ)

• ค่าเริ่มต้น: การแก้ไขการแปลเริ่มต้น undefined หรือเพิ่มการแปลใหม่

อ่านเพิ่มเติมเกี่ยวกับการแปล

3. ส่งการกระทำที่กำหนดเองไปยัง keplerGl Reducer

ข้อได้เปรียบอย่างหนึ่งของการใช้ตัวลดการใช้สถานะส่วนประกอบปฏิกิริยาเพื่อจัดการสถานะ Keplergl คือความยืดหยุ่นในการปรับแต่งพฤติกรรมของมัน หากคุณมีอินสแตนซ์ KeplerGl เพียงหนึ่งเดียวในแอปของคุณหรือไม่ตั้งใจที่จะส่งการกระทำไปยัง Keplergl จากภายนอกส่วนประกอบของตัวเองคุณไม่จำเป็นต้องกังวลเกี่ยวกับการส่งต่อการส่งและสามารถย้ายไปยังส่วนถัดไป แต่ชีวิตเต็มไปด้วยการปรับแต่งและเราต้องการทำให้คุณสนุกที่สุดเท่าที่จะทำได้

มีหลายวิธีในการส่งการกระทำไปยังอินสแตนซ์ KeplerGl เฉพาะ

• ในตัวลดรูทพร้อมตัวช่วยลดการอัพเดท

การกระทำแต่ละครั้งจะถูกแมปกับตัวช่วยอัพเดทใน kepler.gl คุณสามารถนำเข้าอัพเดทตัวลดที่สอดคล้องกับการกระทำที่เฉพาะเจาะจงและเรียกมันด้วยสถานะก่อนหน้าและเพย์โหลดการดำเนินการเพื่อรับสถานะที่อัปเดต เช่น updateVisDataUpdater เป็นตัวอัปเดตสำหรับ ActionTypes.UPDATE_VIS_DATA (ดูที่ reducers/vis-state.js สำหรับการทำแผนที่ updater) นี่คือตัวอย่างที่คุณสามารถฟังแอปแอ็คชั่น 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 ;

อ่านเพิ่มเติมเกี่ยวกับการใช้ updaters เพื่อแก้ไขสถานะ kepler.gl

• ใช้ Redux 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 ) ;

• Wrap Payload Action

นอกจากนี้คุณยังสามารถสรุปการกระทำในการดำเนินการไปข้างหน้ากับผู้ช่วย 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 >
) ;

อ่านเพิ่มเติมเกี่ยวกับการดำเนินการส่งไปข้างหน้า

4. ปรับแต่งสไตล์

kepler.gl ใช้สไตล์ CSS โดยใช้องค์ประกอบสไตล์ โดยใช้เฟรมเวิร์กเคปเลอร์. GLER เสนอความสามารถในการปรับแต่งสไตล์/ธีมโดยใช้วิธีการต่อไปนี้:

• ผ่านธีมเสา
• องค์ประกอบสไตล์ Themeprovider

คุณสมบัติที่มีอยู่ในการปรับแต่งมีการระบุไว้ที่นี่

ตัวอย่างธีมที่กำหนดเอง

ผ่านธีมเสา

คุณสามารถปรับแต่งชุดรูปแบบ kepler.gl ได้โดยผ่านชุดรูปแบบ ชุดรูปแบบ ไปยังส่วนประกอบของ kepler.gl react ตามที่ตามมา:

 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

ผู้ให้บริการชุดรูปแบบองค์ประกอบขององค์ประกอบ

ในการปรับแต่งธีม kepler.gl โดยใช้ ThemeProvider คุณสามารถห่อ kepler.gl โดยใช้ ThemeProvider ตามที่ตามมา:

 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 >
) ;

5. แสดงส่วนประกอบ UI ที่กำหนดเอง

ทุกคนต้องการความยืดหยุ่นในการแสดงส่วนประกอบที่กำหนดเอง kepler.gl kepler.gl มีระบบฉีดพึ่งพาที่อนุญาตให้คุณฉีดส่วนประกอบไปยัง keplergl แทนที่ระบบที่มีอยู่ สิ่งที่คุณต้องทำคือการสร้างโรงงานส่วนประกอบสำหรับโรงงานที่คุณต้องการแทนที่นำเข้าโรงงานส่วนประกอบดั้งเดิมและการโทร injectComponents ที่ส่วนประกอบรูทของแอปของคุณที่ติดตั้ง KeplerGl ลองดู 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 Helper เพื่อเพิ่มสถานะตัวลดและการดำเนินการกับส่วนประกอบที่กำหนดเองเป็นอุปกรณ์ประกอบฉากเพิ่มเติม

 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

6. วิธีเพิ่มข้อมูลลงในแผนที่

ในการโต้ตอบกับอินสแตนซ์ kepler.gl และเพิ่มข้อมูลใหม่ลงไปคุณสามารถส่งแอ็คชั่น addDataToMap ได้จากทุกที่ภายในแอปของคุณ มันเพิ่มชุดข้อมูลหรือชุดข้อมูลหลายชุดลงในอินสแตนซ์ kepler.gl และอัปเดตการกำหนดค่าแบบเต็ม (MapState, MapStyle, VisState)

พารามิเตอร์

• วัตถุ data *ต้องการ

  • datasets (อาร์เรย์ <Object> | วัตถุ) *ชุดข้อมูลที่ต้องการ สามารถเป็นชุดข้อมูลหรืออาร์เรย์ของชุดข้อมูลแต่ละชุดข้อมูลชุดข้อมูลต้องมี info และคุณสมบัติ data

    • datasets.info Object -info ของชุดข้อมูล
      • datasets.info.id id id ของชุดข้อมูลนี้ หากกำหนดค่าการกำหนดค่า id ควรตรงกับ dataId ในการกำหนดค่า
      • datasets.info.label String ชื่อที่แสดงของชุดข้อมูลนี้
    • datasets.data Object *ต้องการ วัตถุข้อมูลในรูปแบบตารางที่มีฟิลด์คุณสมบัติ 2 fields และ rows
      • datasets.data.fields Array <jobch> *อาร์เรย์ที่ต้องการ ของฟิลด์
        • datasets.data.fields.name String *ชื่อที่ต้องการ ของฟิลด์
      • datasets.data.rows array <array> *อาร์เรย์ที่ต้องการ ของแถวในรูปแบบตารางที่มี fields และ rows

  • options วัตถุ

    • options.centerMap Boolean default: true ถ้า centerMap ถูกตั้งค่าเป็น true kepler.gl จะวางมุมมองแผนที่ภายในขอบเขตจุดข้อมูล
    • options.readOnly boolean default: false ถ้า readOnly ถูกตั้งค่าเป็น true แผงการตั้งค่าด้านซ้ายจะถูกซ่อน
    • options.keepExistingConfig Boolean default: false ไม่ว่าจะออกจากการกำหนดค่าแผนที่รวมถึงเลเยอร์ตัวกรองและ SplitMaps

• config วัตถุ วัตถุนี้จะมีการกำหนดค่าอินสแตนซ์ kepler.gl แบบเต็ม {mapstate, mapstyle, visstate}

kepler.gl จัดเตรียม API KeplerGlSchema.getConfigToSave ง่าย ๆ เพื่อสร้าง blob 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