企业官网建设流程全解析

免费浏览器 GIS 平台 GeoLibre 完整指南：从零加载数据到分享一张可嵌入的地图

【免费下载链接】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（地理信息系统，管理地图与空间数据的软件体系）平台，把 1000 多个地理处理工具以 WebAssembly 形式直接搬进浏览器：加载图层、样式设计、属性表、DuckDB 空间 SQL 全部零安装完成，而保存本地项目、读取本地栅格与 MBTiles 等桌面能力由独立安装的应用补齐。本文按"加载数据 → 分析处理 → 分享嵌入"三段走通一条完整流程，让你读完就能产出一个可公开访问的地图链接。

能力与运行环境边界一览

先把边界摆清楚，避免做到一半发现某项功能"跑不起来"：

全文使用同一个公开示例数据集（世界各国 GeoParquet，几何列geom，含NAME、CONTINENT、POP_EST、GDP_MD_EST字段）：https://data.source.coop/giswqs/opengeos/countries.parquet，后文不再重复。

加载远程 GeoParquet 的最快方式：URL 直达，大文件流式读取

这一步解决"地图数据从哪来"——不下载整份文件，直接从 URL 拉取。

1. 打开Add Data → Vector Layer（添加数据 → 矢量图层）。
2. 在面板输入上文示例数据集的 URL，点击Load，countries图层即出现在左侧图层面板。
3. 若文件较大，勾选Stream GeoParquet (no copy)：它通过 HTTP range 请求（只抓取文件中的相关片段）原地查询，只下载当前视图涉及的 row group。
4. 栅格同理：打开Add Data → Raster Layer，输入一个 COG（Cloud-Optimized GeoTIFF，一种让客户端只读所需瓦片的 GeoTIFF 组织方式）URL 加载，再在样式面板调整亮度、对比度与饱和度。
5. 选中countries图层，把样式类型设为Graduated，选数值属性（如GDP_MD_EST）、类别数与色带，点击Apply style type得到分级统计图；再点底部Attribute table打开属性表，选中图层即可排序、搜索记录，选中某行地图会同步高亮该要素。

为什么这样做：GeoParquet 是压缩的列式矢量格式，配合行按空间排序（如 Hilbert 序，让空间相邻的行在文件中相邻）存储，流式模式只需抓取当前视图相关的 row group，而不是整个文件。浏览器端的按需读取管线见 duckdb-vector-loader.ts。所有受支持的数据源类型见 添加数据参考。

💡 提示：加载失败时，先把该 URL 单独贴进浏览器确认数据可达；不确定字段名时，到 SQL 工作区运行DESCRIBE SELECT * FROM '文件URL'查看列清单。

对图层做矢量缓冲与空间 SQL 查询：两条路都通向新数据

这一步解决"从现有数据算出新数据"，几何工具对话框和 SQL 工作区两条路都可以走通。

路径一：几何工具（缓冲、叠加、连接）

1. 打开Processing → GeoLibre Toolbox → Vector → Buffer。
2. 设置Input layer、Distance与Units（公里、米或英里）。
3. 选择Engine：Client (Turf.js)浏览器零配置；Python (Pyodide)在浏览器内运行与侧车相同的 GeoPandas 代码；Sidecar (GeoPandas)由桌面侧车运行。
4. 点击Run，缓冲结果作为新图层加入地图；Clip 裁剪、Intersection 相交、Difference 差异、Union 合并、Spatial join 空间连接、Attribute join 属性连接都在同一菜单里，指定输入与叠加图层后运行。

为什么这样做：客户端引擎在地理坐标下计算缓冲，大范围精确公制距离应选两个 GeoPandas 引擎——它们先重投影再缓冲，而 Pyodide 引擎让浏览器也能得到与桌面侧车一致的结果。每次运行都会记入Processing → History，可一键重跑并复制等价的 Python 代码。

⚠️ 提示：同一个菜单里有两个"工具箱"——分隔线上方的Processing → Vector是 Whitebox 目录的矢量类别（WASM 大工具箱），本步骤用的是分隔线下方的GeoLibre Toolbox → Vector。两者区别详见 处理工具参考。

路径二：空间 SQL

1. 打开Processing → SQL Workspace：每个已加载的矢量图层都是一张可查询的表。
2. 也可以跳过加载，直接在FROM后写裸 URL——工作区会自动包上对应读取器并流式读取，无需整体下载。
3. 运行查询；结果含几何列时点Add as layer上图，Export CSV与Export GeoParquet按钮就在旁边。

-- 数据在 EPSG:4326 下，平方千米请用 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;

为什么这样做：DuckDB-WASM（在浏览器里运行的嵌入式分析数据库）同时支持浏览器与桌面端，空间扩展已预加载，所有ST_*函数开箱即用，"查什么就上图什么"是一条直线。

💡 提示：SQL 工作区带Sample queries示例菜单与History查询历史，从一条能跑通的查询改起，比从零手写 SQL 快得多。完整参考见 SQL 工作区文档。

保存项目、发布分享链接，以及把地图嵌入网页的参数清单

这一步解决"把成果交给别人"。

1. 需要本地存档时用桌面应用：Project → Save，写入一个.geolibre.json项目文件（浏览器端也会弹出浏览器保存对话框）。
2. 一次性配置分享身份：在Settings → Environment Variables的Share.GeoLibre API token字段粘贴令牌（令牌在 share.geolibre.app 的设置页创建）；Web 端也可在分享对话框直接Sign in。
3. 打开Project → Share...，确认标题并上传，得到一个指向.geolibre.json的公开 URL；任何人把它作为url参数传给在线版即可直接打开同一张地图。

为什么这样做：分享文件捕获的图层、样式、插件状态与地图视图和本地保存完全一致。例外是读取你电脑本地文件的图层——分享服务只存项目文件、绝不上传你的数据文件，所以对话框会把这些图层预先列为缺失并提示你改托管。本地数据怎么处理见 项目文档。

嵌入网页用<iframe>加 URL 参数控制界面外壳，参数可自由组合：

<iframe src="https://web.geolibre.app/?url=<分享URL>&maponly" title="GeoLibre map" width="100%" height="600" style="border: 0;" loading="lazy" allow="fullscreen; geolocation" ></iframe>

• maponly：隐藏所有外壳，只留地图
• layout=viewer：只读地图，保留图层/控件/底图/识别，隐藏编辑入口
• layout=compact：保留一条纯图标工具栏
• toolbar=none/panels=none：分别隐藏工具栏或侧边与底部面板
• theme=dark：加载时强制深色主题

完整参数表见 嵌入与分享参考。

💡 提示：读者要能开关图层但不能修改时用layout=viewer；地图只是页面插图时用maponly。选错的后果只是界面冗余，不会丢数据，改参数重新嵌入即可。

场景进阶

当你需要把本地 GeoJSON 发布为云原生格式的时候

问题：数据在本地，但你想让别人像远程大文件一样按需流式读取它。

1. 打开Processing → GeoLibre Toolbox → Conversion → Vector to GeoParquet。
2. 选择输入文件与输出路径。
3. 运行转换，把生成的 GeoParquet 加回地图验证。
4. 之后该文件即可通过 URL 加载并开启流式模式（见上文第一段）。

效果：同一份数据从"整文件搬运"变成"按视图抓取"。浏览器端Vector to GeoParquet与CSV to GeoParquet由 DuckDB-WASM 完成；Vector to FlatGeobuf、Vector to PMTiles、Raster to COG在桌面端走 Python 侧车，能读写更多格式。

当你需要把 DEM 变成山体阴影和等高线的时候

问题：你有一份数字高程模型（DEM，栅格化的地表高程数据），想看出地形起伏与海拔分带。

1. 把 DEM（GeoTIFF 或 COG）作为栅格图层加载——栅格工具是"文件进、文件出"，本地或可访问的栅格效果最好。
2. 打开Processing → GeoLibre Toolbox → Raster → Hillshade，选择 DEM，按需设置方位角、高度角与 z 因子，运行。
3. 把结果放到其他图层下方，将上层的混合模式设为Multiply（正片叠底），让浮雕透过颜色显示，而不是像降低不透明度那样把两层一起洗淡。
4. 需要坡度与坡向时运行Slope/Aspect，用色带样式输出；Contour设好等高距生成矢量等高线，可像任何矢量一样标注与样式化。
5. 用Clip by extent（范围框，浏览器可运行）把输出限制到研究区。

效果：山体阴影、坡度、坡向在浏览器零安装即可完成；等高线与Clip by mask layer没有客户端引擎，依赖 rasterio 侧车，只有桌面应用能跑。

当你需要嵌入的地图与页面实时交互的时候

问题：URL 参数只在加载时配置一次，而你想在运行时让地图"飞"到用户刚点击的记录上，并监听图内操作。

1. 在你的前端执行npm install @geolibre/embed。
2. 用connect(iframe 元素, { origin })建立类型化连接（传的是托管应用那一侧的 origin）。
3. 监听selectionChanged事件，在用户点选时切换页面内容。
4. 调用setView/highlightFeature让地图飞到目标要素。

效果：你的业务页面与地图双向同步。类型化客户端的实现见 packages/embed/。

⚠️ 注意：运行时 API 只对你把源（origin）加入白名单的部署生效（Docker 镜像用GEOLIBRE_EMBED_ORIGINS环境变量配置），web.geolibre.app 公开版没有白名单，因此它适用于你自己托管的构建；免依赖的原始postMessage协议同样记录在 嵌入参考文档 中。

常见问题

能不能在浏览器里做精确的公制距离缓冲？能。Client (Turf.js) 引擎在地理坐标中计算，大范围场景请选 Python (Pyodide) 引擎——它在浏览器内运行与侧车相同的 GeoPandas 代码，先重投影再缓冲，浏览器与桌面端结果一致。

为什么分享后别人看不到我的本地文件图层？分享服务只存储.geolibre.json项目文件，绝不上传你的数据文件，所以这类图层会在分享前被对话框列为缺失。把数据转换为 GeoParquet / PMTiles / COG 托管到公开地址后改用 URL 引用即可。

菜单里两个 "Vector" 到底有什么区别？分隔线上方的Processing → Vector是 Whitebox 目录的矢量类别（1000+ 工具的 WASM 工具箱）；分隔线下方的GeoLibre Toolbox → Vector才是缓冲、叠加、连接这类带引擎选择器的对话框工具。

等高线为什么在浏览器里没有可用引擎？Contour 与 Clip by mask layer 没有客户端引擎，依赖 rasterio Python 侧车，仅桌面应用可运行；Hillshade、Slope、Aspect 则都有浏览器引擎。

桌面端到底比浏览器多给了什么？保存/打开磁盘上的项目文件、读取本地 MBTiles 与本地栅格、读取 File Geodatabase、Python 侧车工具，以及从磁盘导入 QGIS / ArcGIS Pro 项目。其余能力（图层加载、样式、属性表、SQL、Whitebox 工具箱、分享）两端一致。

下一步学习

• 官方教程：六篇教程按"首张地图 → 云原生数据 → 矢量分析 → 空间 SQL → 分享嵌入"顺序跟练
• 处理工具参考：Whitebox 与 GeoLibre Toolbox 两个工具箱的完整工具清单
• SQL 工作区参考：DuckDB / PostGIS / Apache Sedona 三种引擎与完整查询语法
• 嵌入与分享参考：全部 URL 参数、白名单与原始 postMessage 协议
• 数据源总览：文件、Web 服务、云格式与数据库四类数据源一览

【免费下载链接】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