Clever Geek Handbook

如何使用Python和开源库制作交互式地图

今天，我们与您分享了为Web应用程序或博客创建交互式地图的分步指南。只需将本文添加为书签。例如，虽然有一个d3.js库可以创建自定义地图，但有一些工具甚至更简单。在本文中，我们将研究并使用三个易于使用但功能强大的开源Python库。





当文档卡住时



几个月前，我想为我们正在开发的有趣的Web应用程序创建一个交互式地图。我花了数小时在互联网上寻找入门的理想库，但是由于没有适当的分步指南来实现和自定义视觉效果，因此很难浏览文档。我希望我能手动比较功能和正确的实现以及自定义的详细信息。本文是尝试编写这样的指南。



本文继续比较了使用三个可用于Python的流行库对交互式背景图（choropleth）的实现，以及最终结果的详细信息和自定义。



  1. Altair — .
  2. Plotly — . Mapbox, .
  3. Folium — Leaflet — . , .




区域地图需要在背景中提供两种数据，其中一种是地理空间数据，用于填充地图的地理边界（通常是矢量文件.shp（Shapefile）或GeoJSON），并且在地图的每个正方形上都有两个数据点，以根据地图进行颜色编码数据本身。



当您需要获取所需格式的数据时，Geo Pandas库非常有用。该示例使用了印度各州的GeoJSON文件。您可以从任何公共Shapefile或GeoJSON开始。



牵牛星





Altair是基于Vega的Python渲染库。合唱以最小的努力实现，并包含交互元素-突出显示，工具提示等。



Altair与fastpages兼容。您只需使用最少的代码即可转换Jupyter Notebook文件，即可在几分钟内创建简单的博客文章。在GitHub上查看自述文件。



代码段： 



# Importing required Libraries
import geopandas as gpd
import json
import altair as alt
import pandas as pd


我们将Shapefile读取为GeoPandas框架： 



gdf = gpd.read_file('states_india.shp')


框架如下所示：







创建一个基础层和一个Choropleth层： 



# Creating configs for color,selection,hovering
multi = alt.selection_multi(fields=['count','state'], bind='legend')
color = alt.condition(multi,
                  alt.Color('count', type='ordinal',
                  scale=alt.Scale(scheme='yellowgreenblue')),
                  alt.value('lightgray'))
hover = alt.selection(type='single', on='mouseover', nearest=True,
                      fields=['x', 'y'])
#Creating an altair map layer
choro = alt.Chart(gdf).mark_geoshape(
    stroke='black'
).encode( 
    color=color, 
    tooltip=['state','count']
).add_selection(
        multi
    ).properties( 
    width=650,
    height=800
)
# Legend
c1 = alt.layer(choro).configure_legend(
    orient = 'bottom-right',
    direction = 'horizontal',
    padding = 10,
    rowPadding = 15
)
#Adding Labels
labels = alt.Chart(gdf).mark_text().encode(
    longitude='x',
    latitude='y',
    text='count',
    size=alt.value(8),
    opacity=alt.value(0.6)
)
c2 = alt.Chart(gdf).mark_geoshape(
    stroke='black'
).encode( 
    color=color, 
    tooltip=['state','count']
).add_selection(
        hover
    ).project(
    scale=100, 
)
(c1+labels).configure_view(strokeWidth=0)


上面的代码应呈现一个交互式地图，该地图具有显示工具提示并突出显示所选内容（单击）的功能。



优点：



  • 简单快速的实现。包括一组预定义的功能以加快您的工作。
  • 快速页面兼容


缺点：



  • 很少的自定义选项和有限的交互性。
  • 无法使用地图的外部风格化部分，例如OSM，Mapbox等。
  • 该API文献记载不充分。


用Plotly实施





Plotly Python绘图 库使用许多交互式和可自定义的功能来渲染准备发布的地图。



提供了来自Mapbox，OSM和其他样式选项的自定义底图配置，以及Plotly Express和大量文档的简单实现。这使Plotly成为创建交互式地图的首选选项之一。



代码段： 



# Importing required libraries

from plotly.graph_objs import Scatter, Figure, Layout
import plotly
import plotly.graph_objs as go
import json
import numpy as np
import geopandas as gpd


导入Shapefile： 



gdf = gpd.read_file('states_india.shp')
with open('states_india_1.json') as response:
 india = json.load(response)


创建一个基础层并添加部分地图： 



fig = go.Figure(go.Choroplethmapbox(geojson=india, locations=gdf['st_nm'], z=gdf['state_code'],featureidkey="properties.st_nm",colorscale="Viridis", zmin=0, zmax=25,marker_opacity=0.5, marker_line_width=1))
fig.update_layout(mapbox_style="carto-positron",
                  mapbox_zoom=3.5,mapbox_center = {"lat":23.537876 , "lon": 78.292142} ) 
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})
fig.show()


上面的代码应使用工具提示显示和缩放功能呈现交互式地图。该实施方式包括许多其他功能，这是在更详细的描述在这里。



优点：



  • 图表库和Plotly Express的实现非常简单。有大量的文档。
  • 许多设置和可自定义的样式选项。
  • 与Dash和其他用于在外部Web应用程序中嵌入摘要的选项兼容。


缺点：



  • 除了预定义的选项之外，没有其他方法可以添加弹出窗口和其他交互元素。
  • 可能需要令牌访问才能使用多种外部样式。对缩放限制和相关交互性的控制有限。


用Folium实现





Folium将Python生态系统的易用性与leaflet.js库的映射优势结合在一起。它使您可以渲染可自定义的，响应式的和交互式的十字形地图，并可以将丰富的矢量，栅格，HTML可视化内容作为地图上的标记进行传输。



该库具有许多内置的OpenStreetMap，Mapbox和Stamen地图集，还通过Mapbox或Cloudmade API支持自定义集。支持图像，视频，GeoJSON和TopoJSON。



代码段： 



# Importing required Libraries
import geopandas as gpd
import pandas as pd
import folium
import branca
import requests
import json
from folium.features import GeoJson, GeoJsonTooltip, GeoJsonPopup


导入Shapefile： 



gdf = gpd.read_file('states_india.shp')
with open('states_india_1.json') as response:
    india = json.load(response)
#Creating a custom tile (optional)
import branca
# Create a white image of 4 pixels, and embed it in a url.
white_tile = branca.utilities.image_to_url([[1, 1], [1, 1]])


添加基础层和Choropleth层： 



#Base layer
f = folium.Figure(width=680, height=750)
m = folium.Map([23.53, 78.3], maxZoom=6,minZoom=4.8,zoom_control=True,zoom_start=5,
               scrollWheelZoom=True,maxBounds=[[40, 68],[6, 97]],tiles=white_tile,attr='white tile',
               dragging=True).add_to(f)
#Add layers for Popup and Tooltips
popup = GeoJsonPopup(
    fields=['st_nm','cartodb_id'],
    aliases=['State',"Data points"], 
    localize=True,
    labels=True,
    style="background-color: yellow;",
)
tooltip = GeoJsonTooltip(
    fields=['st_nm','cartodb_id'],
    aliases=['State',"Data points"],
    localize=True,
    sticky=False,
    labels=True,
    style="""
        background-color: #F0EFEF;
        border: 1px solid black;
        border-radius: 3px;
        box-shadow: 3px;
    """,
    max_width=800,
)
# Add choropleth layer
g = folium.Choropleth(
    geo_data=india,
    data=gdf,
    columns=['st_nm', 'cartodb_id'],
    key_on='properties.st_nm',
    fill_color='YlGn',
    fill_opacity=0.7,
    line_opacity=0.4,
    legend_name='Data Points',
    highlight=True,
    
).add_to(m)
folium.GeoJson(
    india,
    style_function=lambda feature: {
        'fillColor': '#ffff00',
        'color': 'black',
        'weight': 0.2,
        'dashArray': '5, 5'
    },
    tooltip=tooltip,
    popup=popup).add_to(g)
f


上面的代码应显示带有悬停提示的交互式Choropleth贴图，单击以放大并在单击时自定义弹出窗口。



优点：



  • 许多设置和可自定义的样式选项，以及独特的交互功能，例如自定义弹出窗口/地图部件/背景以及单击缩放缩放。
  • 可以将矢量，栅格，HTML可视化内容作为标记传输到地图上。
  • 用于将地图显示为HTML的选项以及用于将片段嵌入外部Web应用程序的其他选项。
  • 大量的文档来探索所有可用功能。


缺点：



  • 取决于多个库。


结论



这三个工具可让您轻松创建网站的自定义交互式地图。



亲爱的读者，您是否曾经为您的项目制作过这样的交互式地图？



图片

您可以通过在线SkillFactory课程从头开始获得所需的职业或技能和薪资水平的提升：





E






More articles:


All Articles