数据可视化数据分析GIS【免费下载链接】foliumPython Data. Leaflet.js Maps.项目地址https://gitcode.com/gh_mirrors/fo/folium点击查看免费下载本指南面向使用 folium 的开发者围绕 Draw 插件封装自 Leaflet.draw展开介绍如何在交互式地图上自由绘制点、线、面等矢量要素并把绘制结果导出为 GeoJSON 文件。你将掌握folium.plugins.Draw的完整用法从最小示例、导出按钮配置、几何点击行为、工具栏与编辑选项到基于 FeatureGroup 的预置图层和事件回调最终能独立构建可交互的绘图地图应用。一、Draw 插件是什么Draw 是 folium 提供的一个插件它把 Leaflet 的 Leaflet.draw 绘图与编辑工具封装成 Python 类让地图使用者可以通过鼠标在浏览器地图上绘制和编辑几何图形。在 plugins.rst 的插件清单中Draw 被描述为Enables drawing features like polylines, polygons, rectangles, circles and markers through a very nice user-friendly interface with icons and hints即通过带图标和提示的用户友好界面绘制折线、多边形、矩形、圆和标记点等要素。从源码结构看Draw类继承自JSCSSMixin与MacroElement见 folium/plugins/draw.py并声明了默认的 JS/CSS 依赖default_js [ ( leaflet_draw_js, https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js, ) ] default_css [ ( leaflet_draw_css, https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css, ) ]这意味着只要使用 Draw 插件folium 就会自动把 Leaflet.draw 1.0.2 的 JavaScript 与样式表注入到输出 HTML 中无需手工引入任何外部资源。在 folium/plugins/init.py 中Draw已从folium.plugins.draw导出因此可直接通过from folium.plugins import Draw导入。二、最小示例三行代码让地图可绘图关联文档给出的最小示例非常简洁import folium from folium.plugins import Draw m folium.Map() Draw(exportTrue).add_to(m) m代码运行后例如在 Jupyter Notebook 中地图左上角会出现 Leaflet.draw 的绘图工具栏用户可在地图上绘制各类图形由于传入了exportTrue地图右上角还会出现一个 Export 按钮点击即可把已绘制的所有图形下载为 GeoJSON 文件。其中Draw(exportTrue).add_to(m)是核心调用Draw创建控件add_to(m)把它挂载到地图实例m上。这是 folium 所有图层/控件元素统一的使用方式add_to是 MacroElement 提供的标准接口。三、完整参数详解与实战配置根据 folium/plugins/draw.py 的构造函数源码Draw支持以下参数参数类型默认值说明exportboolFalse是否添加一个将绘制图形导出为 GeoJSON 文件的小按钮feature_groupFeatureGroup可选None承载可编辑图形的 FeatureGroup 对象可用来预置图层filenamestrdata.geojson导出 GeoJSON 文件的文件名positionstrtopleft绘图工具栏的位置topleft、toprigth、bottomleft、bottomrightexport_positionstrtopright导出按钮的位置见下文show_geometry_on_clickboolTrue为True时点击图形会弹出 alert 显示其几何描述draw_optionsdictNone实际使用{}绘图工具栏的配置项对应 Leaflet.draw 的draw选项edit_optionsdictNone实际使用{}编辑工具栏的配置项对应 Leaflet.draw 的edit选项ondictNone实际使用{}附加到新建图层的事件处理器键为事件名值为JsCode处理器源码中对None的处理是self.draw_options draw_options or {}即未传参时自动使用空字典因此这些可选项都可以省略。3.1 export 与 filename导出为 GeoJSONexportTrue会在地图上渲染一个Export按钮HTML 结构为一个a idexport_...链接见模板 folium/plugins/draw.py。点击按钮后前端脚本会把drawnItems绘图结果 FeatureGroup通过toGeoJSON()序列化经encodeURIComponent编码为 data URI并设置download属性实现浏览器下载document.getElementById(export_{{ this.get_name() }}).onclick function(e) { var data drawnItems_{{ this.get_name() }}.toGeoJSON(); var convertedData text/json;charsetutf-8, encodeURIComponent(JSON.stringify(data)); ... document.getElementById(export_{{ this.get_name() }}).setAttribute( download, {{ this.filename|tojson }} ); }因此filename参数直接决定下载文件的名称。例如Draw(exportTrue, filenamemy_data.geojson).add_to(m)下载得到的文件是一个标准的 FeatureCollection 形式 GeoJSON可直接被后续的 folium.GeoJson、QGIS 等工具读取。3.2 export_position导出按钮的角落定位从源码看export_position是一个较新的参数用于在exportTrue时把导出按钮固定在地图四个角之一避免与 LayerControl 等其他控件重叠。它通过_export_position_to_css函数映射为 CSS 偏移见 folium/plugins/draw.pytopright默认top: 90px; right: 10px;toplefttop: 90px; left: 10px;bottomrightbottom: 20px; right: 10px;bottomleftbottom: 20px; left: 10px;传入非法值会抛出ValueError: export_position must be one of [...]该行为由 tests/plugins/test_draw.py 的test_draw_export_position_invalid测试用例验证。默认值topright刻意复刻了历史版本中导出按钮的硬编码位置。Draw(exportTrue, export_positionbottomright).add_to(m)3.3 position绘图工具栏位置position控制 Leaflet.draw 工具栏本身的悬挂位置默认topleft。取值与 Leaflet 控件位置一致topleft、topright、bottomleft、bottomright。3.4 show_geometry_on_click点击图形弹出几何信息默认True即绘制完成后点击任一图形浏览器会弹出 alert 并打印该图形的 GeoJSON 描述对应模板中的alert(coords); console.log(coords);。对不需要该交互的应用可关闭Draw(show_geometry_on_clickFalse).add_to(m)3.5 draw_options 与 edit_options精细控制绘制与编辑行为这两个字典会原样传入 Leaflet.draw 的new L.Control.Draw({position, draw, edit})用于控制draw_options控制工具栏提供哪些绘图工具及其行为如polyline、polygon、rectangle、circle、marker、circlemarker及polygon等的显示与限制。edit_options控制编辑行为如featureGroup由 folium 自动注入以及各几何类型编辑时的限制。例如禁止折线与多边形自相交Draw( draw_options{polyline: {allowIntersection: False}}, edit_options{poly: {allowIntersection: False}}, ).add_to(m)从 folium/plugins/draw.py 的模板可以看到folium 会把options.edit.featureGroup自动指向承载绘图的 FeatureGroup因此用户无需在edit_options中手动指定featureGroup。3.6 on为新建图层注册事件on接受一个事件名到JsCode处理器的映射。JsCode是 folium 中用于包装原始 JavaScript 代码的类见 folium/utilities.py在 folium/plugins/draw.py 的模板中每个绘制的新图层都会执行layer.on(event, handler)。例如在每次绘制完成后弹出该图形的 GeoJSONfrom folium.utilities import JsCode m folium.Map() Draw( on{ click: JsCode( function(event) { alert(JSON.stringify(this.toGeoJSON())); } ) }, ).add_to(m)注意on中的处理器作用在每个新建的图层上而不是地图本身这与下面介绍的draw:created地图事件不同。四、基于 FeatureGroup 预置图层Draw的feature_group参数允许传入一个已有的FeatureGroup对象该组将作为drawnItems承载所有绘制和后续编辑的图形。这样可以在初始化时就给用户预置一些图层例如import folium from folium.plugins import Draw from folium import FeatureGroup m folium.Map() fg FeatureGroup().add_to(m) Draw(feature_groupfg).add_to(m)从模板逻辑看folium/plugins/draw.py当feature_group传入时drawnItems直接引用该组否则 folium 会自动new L.featureGroup().addTo(map)创建一个内部组来存放可编辑图层。预置 FeatureGroup 的典型用途是把既有的 GeoJSON 图层放入其中让用户可以直接编辑已有图形或者把绘制结果与业务数据放在同一图层组中统一管理。五、底层事件流转与运行机制5.1 绘制流程CREATED 事件链folium 为 Draw 生成的脚本挂载了两类事件见 folium/plugins/draw.pyL.Draw.Event.CREATED用户完成一次绘制后触发回调中拿到e.layer与e.layerType把图层序列化为坐标字符串供show_geometry_on_click和on处理器使用然后将图层加入drawnItemsdraw:created同样把新建图层加入drawnItems两条路径共同保证无论是通过工具栏新建还是其他方式创建的图层都能被收集、可编辑、可导出。5.2 资源注入JSCSSMixin 渲染Draw继承的JSCSSMixin见 folium/elements.py在render()阶段会把default_js/default_css列表中的每个 URL 分别以JavascriptLink和CssLink的形式加入 figure 的 header从而保证 Leaflet.draw 的脚本与样式随地图页面一起加载。5.3 唯一性保证export 按钮的 id导出按钮的 DOM id 由export_{{ this.get_name() }}动态生成每个 folium 元素都有唯一的get_name()因此同一页面放置多个Draw(exportTrue)时每个按钮的 id、事件处理器和 FeatureGroup 都是各自独立的不会互相干扰。这一点由 tests/plugins/test_draw.py 的test_two_draw_controls_get_unique_export_ids测试专门验证。六、在 Notebook 中展示与文档示例一致上述代码都可在 Jupyter Notebook 中直接运行并渲染交互地图m作为单元格末表达式时由 Notebook 内嵌 HTML 展示。Draw(exportTrue).add_to(m)后即可在浏览器中操作用工具栏的图标选择要绘制的类型标记点、折线、多边形、矩形、圆等在地图上拖拽/点击完成绘制过程中 Leaflet.draw 会给出图标和操作提示点击已绘图形可编辑拖动节点、调整形状或删除点击 Export 按钮下载当前所有图形的 GeoJSON 文件。七、常见问题与注意事项导出按钮不显示确认传入了exportTrue默认False同时确认地图在 Notebook 中已渲染、脚本未被浏览器拦截。导出位置与其他控件重叠使用export_position调整导出按钮到其他角落例如export_positionbottomright。点击图形弹出 alert 干扰交互设show_geometry_on_clickFalse。需要限制绘图行为如禁止自相交通过draw_options与edit_options传递 Leaflet.draw 的原始选项。需要预置可编辑图层先创建FeatureGroup并调用Draw(feature_groupfg)。下载文件名通过filename自定义默认data.geojson。依赖资源Leaflet.draw 1.0.2 由 folium 自动从 CDN 注入见default_js/default_css离线环境下需自行配置内网 CDN 地址。八、延伸阅读Draw 插件源码folium/plugins/draw.py插件导出与注册folium/plugins/init.py测试用例含导出按钮 id 唯一性、位置 CSS、非法值校验tests/plugins/test_draw.pyJS/CSS 资源注入机制folium/elements.py插件总览docs/user_guide/plugins.rst其他绘图类插件对比Geomandocs/user_guide/plugins/geoman.md同样提供交互绘制与编辑能力可按需选择。赞分享数据可视化数据分析GIS【免费下载链接】foliumPython Data. Leaflet.js Maps.项目地址https://gitcode.com/gh_mirrors/fo/folium点击查看免费下载相关推荐用 folium 的 DivIcon 在地图上绘制饼图图标Mini-chart 实战指南用 folium 的 DivIcon 在地图上绘制饼图图标Mini chart 实战指南 在 folium 中Markers 并不局限于 Leaflet 默数据可视化数据分析GIS使用 folium.GeoJson 在地图上渲染 GeoJSON加载、样式、交互与 choropleth 实战指南使用 folium.GeoJson 在地图上渲染 GeoJSON加载、样式、交互与 choropleth 实战指南 导读 folium.GeoJson 是 f数据可视化数据分析GIS使用 Folium BoatMarker 插件在地图上绘制带航向与风向的船舶标记使用 Folium BoatMarker 插件在地图上绘制带航向与风向的船舶标记 本指南讲解 folium 的 folium.plugins.BoatMarke数据可视化数据分析GIS上一篇Delicate故障排除常见问题诊断和解决方案的快速参考指南下一篇B站数据挖掘利器bilibili-api-python 全新玩法指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考