kepler.gl 2.4.0重要更新

費弗裡發表於2020-12-20

1 簡介

　　kepler.gl作為開源地理空間資料視覺化神器，也一直處於活躍的迭代開發狀態下。而在前不久，kepler.gl正式釋出了其2.4.0版本，下面我們就來對其重要的新特性進行介紹：

kepler.gl 2.4.0重要更新
圖1

2 kepler.gl 2.4.0重要新特性

2.1 增量時間視窗

　　在這次更新中，為時間序列資料的視覺化新增了增量時間視窗功能，在上一個版本2.3.2中，當我們的資料集帶有時間型別欄位時，在新增對應的Filters之後，顯示出的時間視窗是這個樣子的：

kepler.gl 2.4.0重要更新
圖2

　　而在2.4.0版本中，時間視窗如圖3所示：

kepler.gl 2.4.0重要更新
圖3

　　在如圖4一樣從預設的Moving Time Window模式切換到Incremental Time Window模式之後，就可以使用增量時間視窗模式，畫面中的資料會從起點開始持續疊加：

kepler.gl 2.4.0重要更新
圖4

2.2 Python介面新增_repr_html_()方法

　　而這個更新不僅針對原生的kepler.gl，還針對其面向Python的介面keplergl新增_repr_html_()方法，使得將kepler.gl與flask等進行結合更加方面，就像folium中的_repr_html_()方法一樣：

  • 結合flask
from flask import Flask
from keplergl import KeplerGl

app = Flask(__name__)

@app.route('/')
def index():
    
    map_1 = KeplerGl()
    
    return map_1._repr_html_()

if __name__ == '__main__':
    app.run(debug=True)

　　而如果你對dash有所瞭解，那麼純Python快速開發出一個嵌入kepler.gl的互動式web應用將會變得非常容易，就像下面這個簡單的例子一樣：

kepler.gl 2.4.0重要更新
圖5
import dash
from keplergl import KeplerGl
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
import requests

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.H1("Dash結合Kepler.gl："),
        dcc.Dropdown(
            id='demo-dropdown',
            options=[
                {'label': '重慶', 'value': '重慶'}
            ],
            style={'width': '300px'}
        ),
        html.Iframe(id='iframe',
                    style={'height': '800px', 'width': '1900px'})
    ]
)

@app.callback(
    Output('iframe', 'srcDoc'),
    [Input('demo-dropdown', 'value')]
)
def switch_area(selected_area):

    if selected_area == '重慶':
        map_1 = KeplerGl(data={
                             selected_area: requests.get('https://geo.datav.aliyun.com/areas_v2/bound/500000_full.json').json()
                         },
                         config={
                             "mapState": {
                                 "bearing": 0,
                                 "dragRotate": False,
                                 "latitude": 29.751819,
                                 "longitude": 107.441431,
                                 "pitch": 0,
                                 "zoom": 6,
                                 "isSplit": False
                             }
                         })

        return map_1._repr_html_().decode()

    else:
        map_1 = KeplerGl(data={
                             selected_area: requests.get('https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json').json()
                         },
                         config={
                             "mapState": {
                                 "bearing": 0,
                                 "dragRotate": False,
                                 "latitude": 29.751819,
                                 "longitude": 107.441431,
                                 "pitch": 0,
                                 "zoom": 3,
                                 "isSplit": False
                             }
                         })

        return map_1._repr_html_().decode()

if __name__ == '__main__':
    app.run_server()

　　以上就是本文的全部內容，歡迎在評論區與我進行討論~

相關文章