浏览器里跑云原生 GIS：GeoLibre 从第一张地图到嵌入网页的 5 步路径-迪斯科星球

浏览器里跑云原生 GIS：GeoLibre 从第一张地图到嵌入网页的 5 步路径

【免费下载链接】GeoLibreA lightweight, cloud-native GIS platform for visualizing, exploring, and analyzing geospatial data. It runs in the web browser, on the desktop, on mobile, and inside Jupyter notebooks.项目地址: https://gitcode.com/GitHub_Trending/ge/GeoLibre

GeoLibre 是一个轻量、开源的云原生 GIS 平台：浏览器打开就能用，桌面端、手机和 Jupyter Notebook 里也能跑。它把"加载远程数据、做空间分析、把成果发给别人"压缩进同一条工作流，让你 15 分钟内装得上、画得出、能分享。

30 秒环境自检，再动手

开始之前，花半分钟确认三件事：

在线版零安装：浏览器构建版web.geolibre.app直接开玩，绝大多数操作都能在这里完成。
少数场景必须桌面端：打开/保存本地项目文件（.geolibre.json）、读取本地 MBTiles 和栅格文件、Python 侧车（sidecar）驱动的工具。安装入口见 docs/downloads.md。
示例数据：多篇教程共用一份公开的世界国家 GeoParquet，直接粘贴这个地址即可：

https://data.source.coop/giswqs/opengeos/countries.parquet

一个常被忽略的例外：Whitebox 地理处理工具箱（1000+ 工具）走 WebAssembly，不需要任何安装，浏览器里就能跑。

先让数据上图

想快速看到效果？按数据格式对号入座：

GeoParquet（压缩列式矢量，最推荐）：走"添加数据 → GeoParquet 图层"（或矢量图层），贴上远程 URL，点"加载"。关键开关是Stream GeoParquet (no copy)——它用 HTTP range 请求原地查询文件，不把大文件整个拷进内存；对按空间排序（如 Hilbert 序）的大文件尤其划算，只拉取相关的 row group。
FlatGeobuf：走"添加数据 → FlatGeobuf 图层"，贴.fgb地址。这个格式自带空间索引，GeoLibre 在条件允许时只抓取当前视野内的要素。
COG（Cloud-Optimized GeoTIFF）：走"添加数据 → 栅格图层"，贴.tif的 URL。加载后在样式面板里调亮度、对比度、饱和度、色相。本地 GeoTIFF 也可以直接拖进地图。
本地数据转云原生：走"处理 → GeoLibre 工具箱 → 转换"。矢量转 GeoParquet、CSV 转 GeoParquet 在浏览器里由 DuckDB-WASM 完成；矢量转 FlatGeobuf、矢量转 PMTiles、栅格转 COG 则交给桌面端的 Python 侧车。

样式层面：选中图层后展开样式面板，调填充/轮廓颜色和不透明度；想做分级统计图，把样式类型切到Graduated，选一个数值属性（示例数据里可用POP_EST或GDP_MD_EST），再定类别数、配色方案与色带，最后点应用样式类型。想查数据，点状态栏的属性表，按列排序、搜索，或点探索一次性看每个字段的类型、完整度与分布。

三种分析姿势

菜单工具箱：缓冲与叠加

适合"对矢量图层做几何运算"的任务。入口在处理 → GeoLibre 工具箱 → 矢量（注意：分隔线上方的"处理 → 矢量"是 Whitebox 的矢量类别，别点错）。

缓冲：设输入图层、距离与单位，再选引擎——客户端（Turf.js，浏览器零配置）、侧车（GeoPandas，桌面端）、Python（Pyodide，浏览器里跑和侧车相同的 GeoPandas 代码）。大范围要精确公制距离时，选后两者，它们缓冲前会先重投影。
叠加：裁剪、相交、差异、合并；以及空间连接（按"相交/包含/位于内部"把多边形属性挂到点上）和属性连接（按关键字段一对一挂接，不涉及几何）。
每次运行都会记进处理 → 历史，一键重跑，还能复制等价的 Python 代码。

栅格工具：从 DEM 出地形产品

适合"手里有高程数据，想要山体阴影/坡度/等高线"。入口在处理 → GeoLibre 工具箱 → 栅格。

山体阴影、坡度、坡向都有客户端（浏览器）引擎，在线版零安装可用。山体阴影产物放在其他图层下方，把上层混合模式设为正片叠底（Multiply），浮雕会"透"出颜色，比降不透明度干净得多。
等高线没有客户端引擎，必须桌面端侧车（rasterio）跑；设好等高线间距即可生成矢量等高线，之后像普通矢量一样标注、配色。
想限定研究区，用按范围裁剪（边界框，浏览器可跑）或按掩膜图层裁剪（矢量掩膜，仅侧车）。

SQL 工作区：把查询结果直接上图

适合"想先筛数据再看图"的分析。从处理 → SQL 工作区打开，底层是 DuckDB-WASM，浏览器和桌面端都能跑。每个已加载的矢量图层都是一张表：

SELECT NAME, CONTINENT, GDP_MD_EST FROM countries ORDER BY GDP_MD_EST DESC LIMIT 10;

更省事的是裸 URL 直查：FROM后直接写文件地址，工作区会自动套上对应读取器并流式读取，无需先加载。空间函数（ST_*）也已就绪；注意 EPSG:4326 下ST_Area算出的是平方度，要平方千米用ST_Area_Spheroid(geom) / 1e6。

SELECT NAME, ST_Area(geom) AS area, geom FROM https://data.source.coop/giswqs/opengeos/countries.parquet WHERE CONTINENT = 'Africa' ORDER BY area DESC;

结果带几何列时，点添加为图层就成新图层；旁边的导出 CSV / 导出 GeoParquet按钮可一步落地文件。不确定列名时，先跑DESCRIBE SELECT * FROM '<文件 URL>'。

把结果交出去

场景 A：发给同事一个链接

先在设置 → 环境变量里填一次Share.GeoLibre API token（令牌在share.geolibre.app/settings的"设置 → API 令牌"下创建）。
打开项目 → 分享...，确认标题并上传，得到形如https://share.geolibre.app/you/my-map.geolibre.json的公开地址。
对方用https://web.geolibre.app/?url=<项目地址>即可打开。

分享文件捕获图层、样式、插件状态和地图视图；引用你本机文件的图层会被对话框列为"缺失"——平台只存项目文件，绝不上传你的数据。

场景 B：嵌进自己的网页

最干净的嵌入是一个<iframe>加maponly参数：

<iframe src="https://web.geolibre.app/?url=https://share.geolibre.app/you/my-map.geolibre.json&amp;maponly" title="GeoLibre map" width="100%" height="600" style="border: 0;" loading="lazy" allow="fullscreen; geolocation"></iframe>

外观由 URL 参数控制，可自由组合：maponly（只留地图）、layout=viewer（只读，保留图层/识别/底图）、layout=compact（细图标工具栏）、toolbar=none、panels=none、theme=dark。参数全集见 docs/user-guide/embedding.md。

要运行时持续驱动地图（比如用户点了你页面里的某条记录，地图就飞过去），装类型化客户端@geolibre/embed，实现位于 packages/embed：

import { connect } from "@geolibre/embed"; const map = await connect(iframeEl, { origin: "https://web.geolibre.app" }); await map.setView({ bbox: field.bbox });

注意：运行时 API 只在你自己托管的构建上生效（需要把你的源加入白名单）；公网web.geolibre.app未开放白名单。

按兴趣选看

视频教程按时间收录在 docs/tutorials/videos.md，每条都有章节和摘要：

GeoLibre 1.0 全介绍（40:18）——三种构建方式、流式加载 180 GB 数据集不下载、3D 瓦片、LiDAR 一网打尽，最适合当第一课。
浏览器里的地理处理（21:52）——Whitebox 工具箱（现已 1000+ 工具）纯 WASM 跑 DEM 地形与水文分析。
免费高分灾害卫星影像（8:26）——装 Vantor 插件、查 STAC 目录、对比灾前灾后并下载原始 COG。
规整建筑足迹（16:25）——Rust 写的规整化工具在浏览器内清理不规则多边形。
GeoLibre + GeoLens（25:41）——自托管数据栈：浏览目录、3D 拉伸样式、编辑回写。
Model Builder 与 AI 助手（18:55）——图形化流程 + 自然语言生成模型。
尼泊尔洪水制图（23:14）——灾害响应全流程：找影像、滑动对比、提取建筑。
云原生工作流网络研讨会（1:07:28）——COG / GeoParquet / PMTiles / DuckDB 如何协作的总览。
影像地理配准（15:35）——控制点、RMS 残差、导出 GeoTIFF。

遇到卡点先看这里

哪些动作绕不开桌面端？存/开本地项目文件、读本地 MBTiles 与栅格、侧车工具（等高线、栅格转 COG、矢量转 FlatGeobuf 等）。其余的，在线版都能干。
缓冲结果距离"看着不对"？客户端引擎在地理坐标下计算，大范围场景换 Pyodide 或侧车引擎，它们会先重投影再缓冲。
SQL 报列不存在？数据集列名千差万别，先DESCRIBE SELECT * FROM '<URL>'摸一遍结构再写查询。
COG 序列想动起来？装时间滑块插件做时间动画，见 docs/user-guide/data-integrations.md。

更细的界面与功能说明，随时回 docs/user-guide/ 对应章节。现在就去打开web.geolibre.app，把示例国家数据贴上、换个配色、分享出去——你的第一张云原生 GIS 地图，十分钟内就能交出去。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析