企业官网建设流程全解析

GeoLibre 云原生 GIS 完整实战：浏览器零安装跑通六条工作流，从接数据到地图嵌入

【免费下载链接】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 里运行。把官方教程的六条端到端工作流读完并练一遍之后，你可以直接在浏览器里流式加载远程大数据集，零安装完成缓冲、叠加、地形产品与空间 SQL 查询，最后把地图交付成可分享、可嵌入、甚至可用代码驱动的可交互页面。

环境与边界：三种构建各自能干什么

先说清分工：官方教程的默认前提是——绝大多数操作在在线版完成，只有涉及"本地文件"或"Python 处理"的少数步骤才需要换桌面应用。

💡"处理引擎"有两类，别混为一谈。Python 侧车（sidecar）是桌面应用管理的一个本地 Python 环境，负责栅格处理与部分格式转换；而 Whitebox 地理处理工具箱完全是另一回事——它的 1000+ 工具以 WebAssembly 形式在浏览器里跑，无需安装，不属于"仅限桌面"的范畴。每个工具对话框顶部的引擎选择器会列出该工具当前可用的选项，动手前先看一眼最稳妥。

六条工作流共用的示例数据是一份公开的世界各国 GeoParquet 文件：https://data.source.coop/giswqs/opengeos/countries.parquet。

快速出图 🧭：从空工作区到可检查的数据只要四个动作

整条链路是四个动作，全部可以在在线版当场完成。

把图层丢进地图。场景：手上有矢量数据的 URL，想先看看效果。动作：打开添加数据 → 矢量图层，在面板里粘贴示例国家的 URL，点加载。结果：国家出现在地图上，countries图层进入图层面板，随时可样式化、可查询、可参与叠加。

样式与分级统计。选中countries图层，右侧样式面板若折叠就展开它。纯色方案只需动填充颜色、轮廓颜色、填充不透明度三个参数；想出分级统计图，把样式类型设为Graduated，选一个数值型属性（POP_EST或GDP_MD_EST都可以），依次定类别数、配色方案、色带，最后点应用样式类型。

用属性表验数据。点状态栏上的属性表展开它，选countries加载记录：按列排序、在搜索属性里输关键词找要素，选中某行时地图上同步高亮对应要素；点探索能一次性剖析每个字段的类型、完整度和取值分布。也可以给图层打开要素识别，点击地图上任意国家，属性直接出现在弹窗里。

保存或分享。桌面应用里用项目 → 保存写出.geolibre.json；任何环境都能用项目 → 分享上传并拿到公开链接——分享服务的配置细节见本文"交付与嵌入"一节。

接入云原生数据：远程 GeoParquet 怎么流式读

GeoLibre 为云原生地理空间格式而设计：矢量侧是 GeoParquet 与 FlatGeobuf，栅格侧是 Cloud-Optimized GeoTIFF（COG），瓦片侧是 PMTiles。

远程 GeoParquet 怎么流式读

场景很直白：数据在云端，不想整文件下回来。打开添加数据 → GeoParquet 图层（或直接走矢量图层），粘贴 URL 点加载，真正的关键开关是流式 GeoParquet（不拷贝）（Stream GeoParquet (no copy)）——它通过 HTTP range 请求原地读取，大文件不整体拷进内存；只要行是空间排序的（例如 GeoLibre 自带转换工具写出的 Hilbert 序），就只抓取相关 row group，代价极小。仓库里这条按需读取管线落在 apps/geolibre-desktop 的 DuckDB 加载器中，另有一个独立的 GeoParquet 写入器与@duckdb/duckdb-wasm保持解耦，元数据与坐标系的正确性有专门的测试覆盖。

只抓视图内要素的另外两种格式

• FlatGeobuf：自带空间索引、对流式友好的矢量格式。打开添加数据 → FlatGeobuf 图层，输入.fgbURL 加载，GeoLibre 会在格式允许时只取当前视图内的要素。
• COG：把常规 GeoTIFF 重新组织，让客户端只读所需瓦片。打开添加数据 → 栅格图层，输入.tifURL 加载，之后在样式面板里调亮度、对比度、饱和度与色相。本地的 GeoTIFF 或 COG 也可以直接拖到地图上，作为栅格图层添加。

本地数据转云原生：引擎归属怎么分

转换统一走处理 → GeoLibre 工具箱 → 转换，按运行位置分两个阵营：

• 矢量转 GeoParquet、CSV 转 GeoParquet：浏览器内借助 DuckDB-WASM 运行。例如把本地 GeoJSON 发布为 GeoParquet——选输入文件与输出路径，跑完把产物加回地图验证即可。
• 矢量转 FlatGeobuf、矢量转 PMTiles、栅格转 COG：在 Python 侧车（桌面应用）上运行。

转出来的文件可以直接进空间 SQL 环节——SQL 工作区支持从 URL 直接读 Parquet、CSV、JSON、GeoJSON，不必先加载成图层。

两条分析路线：矢量工具箱与空间 SQL

同一件事有两条路：菜单驱动的处理 → GeoLibre 工具箱和处理 → SQL 工作区。前者是参数化表单，选完就跑；后者是完整的 DuckDB Spatial 环境，条件、聚合、统计逻辑自己写。选择原则一句话：单一几何操作且参数明确，走工具箱；复杂条件、统计口径，或想直接吃远程 URL，走 SQL。

💡两个工具箱共用一个菜单，容易点错。处理 → 矢量（分隔线上方）是 Whitebox 目录的矢量类别；处理 → GeoLibre 工具箱 → 矢量才是本节所用的对话框。发现工具行为对不上预期时，先确认菜单没开错地方。

矢量工具箱：从缓冲到连接七件工具

做叠加至少需要两个图层，比如一组点/线要素加一个用于裁剪的多边形图层。

• 缓冲（处理 → GeoLibre 工具箱 → 矢量 → 缓冲）：设输入图层、距离、单位（公里、米或英里），选引擎，点运行，缓冲图层立即上图。
• 裁剪（Clip）：保留落在叠加图层内部的输入部分，输入的属性随之保留。
• 相交（Intersection）：只留两个多边形图层的重叠区域。
• 差异（Difference）：从输入里挖掉叠加图层的范围。
• 合并（Union）：两个多边形图层并成一个（两种引擎下属性均不保留）。
• 空间连接（Spatial join）：按空间关系（相交、包含或位于内部）把连接图层的属性挂到每个输入要素上——比如给每个点打上"所在多边形"的标签，任何几何类型都适用。
• 属性连接（Attribute join）：与几何无关，关键字段匹配即挂属性（例如用共享的 FIPS 码把普查统计挂到边界多边形上）。它是一对一的（首个匹配的连接行胜出），两侧各选关键字段，可列出要带过来的字段，并选内连接或左连接。

选好输入与叠加图层后直接运行。结果出来先开属性表检查，把样式调得与输入区分开；每次运行都会记进处理 → 历史，条目一键重跑，还能复制等价的 Python 代码。

💡缓冲距离"投影感知"与否差别很大。客户端（Turf.js）引擎直接在地理坐标里算缓冲，零配置开箱即用；大范围、要求精确公制距离时，改用两个 GeoPandas 引擎之一——侧车（GeoPandas）（桌面应用）或Python（Pyodide）：后者在浏览器里跑与侧车完全相同的 GeoPandas 代码，结果与侧车一致却免去安装，运行时首次使用时下载一次。两者都会在缓冲前先重投影。

空间 SQL：把图层当表查

SQL 工作区基于 DuckDB-WASM，浏览器与桌面应用里都能用。加载好示例国家图层后，每个已加载的矢量图层就是一张可查询的表，最常用的两种玩法合在一起看：

-- 查已加载图层：取预估 GDP 最高的十个国家 SELECT NAME, CONTINENT, GDP_MD_EST FROM countries ORDER BY GDP_MD_EST DESC LIMIT 10; -- 也可以不先加载文件：FROM 里直接写裸 URL，工作区自动包上对应读取器， -- 仅按 HTTP range 请求取需要的字节，避免整文件下载 -- 注意：数据位于 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;

第二段示例信息量最大：工作区会检测FROM子句中的裸 URL 并自动包上正确的读取器——这个简写是 SQL 工作区的便利特性，标准 DuckDB CLI 里你得显式写read_parquet('https://...')。空间扩展已加载，所有ST_*函数可用，只要结果保留geom列就能上图。示例数据集的列名（NAME、CONTINENT、POP_EST、GDP_MD_EST，几何列geom）是 Natural Earth 的字段；换数据集时，先跑一句DESCRIBE SELECT * FROM 'your-file-url'摸清结构。

结果出来有三个出口：点添加为图层从结果建新图层（可选命名，支持一次添加多个，识别、选择与属性表和任何矢量图层一样可用）；用旁边的导出 CSV、导出 GeoParquet按钮直接落盘；或者从示例查询菜单起步、用历史重跑旧查询。完整语法与配置见官方 SQL 工作区 参考。

地形产品：山体阴影、坡度、坡向、等高线的引擎清单

数字高程模型（DEM）的派生工具集中在处理 → GeoLibre 工具箱 → 栅格下。栅格工具是"文件进、文件出"，本地或可访问的栅格效果最好。引擎可用性先列清楚：

💡引擎怎么选。前三个派生工具都有客户端引擎，浏览器版零安装即可跑；等高线与按掩膜图层裁剪没有客户端引擎，必须依赖桌面应用管理的 rasterio Python 侧车。大栅格或地理坐标系下的地形，建议优先侧车引擎。工具顶部的引擎选择器会列出可用选项。

山体阴影：选 DEM 为输入，按需设方位角（azimuth）、高度角（altitude）与 z 因子，运行后着色浮雕栅格上图。把它压到其他图层下方，把上方图层的混合模式设为正片叠底（Multiply），浮雕就能从颜色里透出来——比降不透明度干净得多，后者会把两层一起洗淡。

坡度与坡向：分别从 DEM 计算陡峭程度与最陡坡的罗盘方向。跑完给输出套上 色带 样式，再从控件菜单打开色条显示数值标尺。

等高线：选 DEM、设间距（interval，线间高差），运行即生成矢量格式的等高线，像任何矢量数据一样可以标注与样式化——这一步只在侧车上跑，需要桌面应用。

裁剪到研究区：按范围裁剪用边界框，浏览器里也能跑；按掩膜图层裁剪用矢量掩膜，仅侧车。

收尾还有两个顺手的动作：用栅格转矢量（Polygonize）把栅格输出转成矢量，或用栅格转 COG写出云原生文件便于分享；栅格序列的时间动画则交给时间滑块插件（Time Slider）。

交付与嵌入：从分享令牌到运行时 API

先配一次分享令牌

分享会把项目上传到share.geolibre.app，凭个人 API 令牌工作。打开设置 → 环境变量，把令牌粘进Share.GeoLibre API token字段（令牌在share.geolibre.app/settings的"设置 → API 令牌"下创建），一次配置永久生效。

分享项目，拿到公开 URL

把地图构建到位：加好图层、设好样式、视图停在观众落地的位置，然后打开项目 → 分享...，确认标题并上传，得到指向.geolibre.json的公开 URL，例如https://share.geolibre.app/you/my-map.geolibre.json。分享文件捕获的内容与本地保存完全一致：图层、样式、插件状态、地图视图。例外是读取你电脑上文件的图层——分享前的对话框会把这些图层列为缺失，因为share.geolibre.app只存项目文件、绝不上传数据文件；本地数据要先自行托管到公开地址。

打开与 iframe 嵌入

任何人把项目 URL 作为url参数传给在线版即可打开：https://web.geolibre.app/?url=https://share.geolibre.app/you/my-map.geolibre.json。

嵌入自己的页面则用<iframe>加嵌入参数控制界面外壳。干净纯地图的示例：

<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>

参数一览（可自由组合）：

经验法则：读者需要开关图层、探索数据但不能改动 →layout=viewer；地图只是页面插图而非交互对象 →maponly。

运行时 API：从自己的页面持续对话

URL 参数只在加载时配置一次。要在运行时持续对话——比如飞到用户在你的 UI 里点击的那条记录、并监听他在图内的操作——安装类型化客户端（对应仓库中的 packages/embed 包）：

npm install @geolibre/embed

import { connect } from "@geolibre/embed"; const map = await connect(document.querySelector("iframe"), { origin: "https://web.geolibre.app", }); map.on("selectionChanged", ({ featureIds }) => showRecordFor(featureIds[0])); async function focusField(field) { await map.setView({ bbox: field.bbox }); await map.highlightFeature({ layerId: "fields", filter: { parcel_id: field.id }, fit: true }); }

💡运行时 API 有白名单门槛。这个客户端只在把你页面源（origin）加入白名单的部署上生效——web.geolibre.app本身没有白名单，所以运行时 API 只适用于你自己托管的构建。完整命令列表、白名单配置与免依赖的原始postMessage协议见官方嵌入参考。

视频地图 🎬：什么场景看哪条

官方维护了一组录制的实操演示，按时间从旧到新排列，与上文文字工作流一一对应：

全部视频的分章节内容与总结收录在官方 视频教程 页。

答疑与下一步

Q：哪些步骤必须用桌面应用？A：打开/保存项目文件、读本地 MBTiles 与栅格、Python 侧车工具（rasterio 栅格处理，栅格转 COG/矢量转 FlatGeobuf/矢量转 PMTiles等转换）、等高线与按掩膜裁剪。Whitebox 工具箱除外——它在浏览器中以 WebAssembly 运行。

Q：矢量缓冲的引擎怎么选？A：小范围零配置 →客户端（Turf.js）；大范围精确公制距离 →侧车（GeoPandas）（桌面）或Python（Pyodide）（任何环境）。

Q：COG 序列怎么动起来？A：配合时间滑块插件（Time Slider），官方 用户指南 的数据集成一节有完整说明。

Q：嵌入参数能随意组合吗？A：maponly、layout=viewer、layout=compact、toolbar=none、panels=none、theme=dark可自由组合。

Q：分享时本地文件图层怎么处理？A：分享前对话框会将其列为缺失——分享服务只存项目文件、不传数据。把数据文件先托管到公开地址，项目改为引用该地址。

下一步：

1. 回到官方 教程总览，按序把六篇教程完整过一遍。
2. 打开 处理工具参考，浏览 GeoLibre 工具箱与 Whitebox 目录的完整工具清单。
3. 需要把地图嵌进产品页面时，查 嵌入参考 的完整参数表与运行时协议。

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