企业官网建设流程全解析

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 里。你能用它加载 GeoParquet、FlatGeobuf、COG 这类远程格式，做缓冲、叠加、山体阴影等矢量/栅格分析，用 DuckDB 空间 SQL 直接查询并把结果上图，最后把项目一键分享成公开链接、或用 iframe 嵌进任意网页。读完这篇，你会知道从「打开空白地图」到「拿到一个可分享的 URL」整条链路怎么走，以及哪些步骤必须在桌面端完成。

能力全景图

先把能力摊开成三层：进来什么、算什么、出去什么。

💡 关键前提：绝大多数能力浏览器就能跑，只有「读本地文件 + Python 侧车」相关操作需要桌面应用。

5 分钟跑通首张地图

浏览器构建版 web.geolibre.app 就是 GeoLibre 本体，装都不用装，直接开练。下面这条最短路径能给你一张「有样式、能查数据」的地图。

1. 开一张图：进入在线版，你会看到一张底图和一个空的图层面板（参见图层面板说明）。

2. 加一个矢量图层：打开「添加数据 → 矢量图层」，在输入框里贴上示例数据集地址，点「加载」：

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

   各国轮廓立刻上图，图层面板里多出一个countries图层。所有支持的数据源见添加数据。

3. 改样式：选中countries，展开右侧样式面板，调「填充颜色 / 轮廓颜色 / 填充不透明度」。想做分级统计图，就把「样式类型」设为Graduated，挑一个数值属性（如POP_EST或GDP_MD_EST），设类别数、配色方案和色带，再点「应用样式类型」。参考样式。

4. 查数据：状态栏点「属性表」展开，选countries载入记录；可按列排序或在「搜索属性」里找要素，选中某行地图会高亮；点「探索」能一次看全每个字段的类型、完整度与取值分布。参考属性表。

5. 收尾：桌面端用「项目 → 保存」写成.geolibre.json；任何环境都能「项目 → 分享」拿到公开链接。

想省事的读者可以只做到第 3 步就停下——一张带样式的地图已经能用了。

按场景深入

场景 A｜把云原生数据搬上图

GeoLibre 天生为云原生格式设计：矢量是 GeoParquet 和 FlatGeobuf，栅格是 COG，瓦片是 PMTiles。

远程加载 GeoParquet打开「添加数据 → GeoParquet 图层」（或矢量图层），贴上 URL 加载。大文件有个更省的开关——流式 GeoParquet（不拷贝）：它走 HTTP range 请求「原地查询」，不把整个文件搬进内存，最适合按空间排序的大远程文件（比如 Hilbert 序写出来的那种，GeoLibre 自带转换工具就这么写），这样只抓相关 row group。

远程加载 FlatGeobuf打开「添加数据 → FlatGeobuf 图层」，贴.fgbURL 加载。格式允许时它只抓当前视野内的要素。

远程加载 COG打开「添加数据 → 栅格图层」，贴 COG 的.tifURL。COG 是组织过的常规 GeoTIFF，客户端只读它需要的块。加载后同样能在样式面板调亮度、对比度、饱和度、色相。

📎 顺手一招：本地 GeoTIFF / COG 可以直接拖到地图上，当成栅格图层加进来，见添加数据 - 拖放。

本地转云原生用「处理 → GeoLibre 工具箱 → 转换」写出云原生文件。这里要分清引擎：

• 矢量转 GeoParquet、CSV 转 GeoParquet在浏览器里借 DuckDB-WASM 跑，无需安装；
• 矢量转 FlatGeobuf、矢量转 PMTiles、栅格转 COG跑在 Python 侧车，也就是桌面应用。

举个例子，把本地 GeoJSON 发成 GeoParquet：打开「处理 → GeoLibre 工具箱 → 转换 → 矢量转 GeoParquet」，选输入文件和输出路径，运行，再把产物加回地图验证。

想深挖这套读取管线：浏览器按需加载在apps/geolibre-desktop/src/lib/duckdb-vector-loader.ts，GeoParquet 写入器在apps/geolibre-desktop/src/lib/duckdb-geometry.ts，浏览器内 DuckDB 处理管线在apps/geolibre-desktop/src/lib/duckdb-processing.ts。

场景 B｜做空间分析

分析工具分矢量和栅格两路，入口都在「处理 → GeoLibre 工具箱」下。

⚠️ 先分清两个工具箱：处理 → 矢量（分隔线上方）是 Whitebox 目录的矢量类；本场景用的是处理 → GeoLibre 工具箱 → 矢量。别点错。

矢量：缓冲与叠加先至少加一个矢量图层（做叠加要两个，比如一组点/线 + 一个裁剪用的多边形）。

• 缓冲：「处理 → GeoLibre 工具箱 → 矢量 → 缓冲」，设输入图层、距离、单位，再选引擎：

  • 客户端（Turf.js）：浏览器内跑，零配置，但在地理坐标里做缓冲；
  • 侧车（GeoPandas）：桌面端跑，支持投影感知的精确距离；
  • Python（Pyodide）：在浏览器里跑和侧车一样的 GeoPandas 代码，结果与侧车一致又不用装侧车，首次使用会下载一次。
  • 大范围要精确公制距离？选后两者，它们缓冲前会先重投影。

• 叠加：有了缓冲结果（或任意多边形）和第二个图层，可跑裁剪（保留落在叠加层内、保留输入属性）、相交（只留重叠）、差异（减去叠加区）、合并（两层合一，不保留属性）、空间连接（按空间关系挂属性，适用任意几何）、属性连接（按关键字段一对一挂属性，不涉及几何）。从「处理 → GeoLibre 工具箱 → 矢量」打开，选输入与叠加图层，运行即可。

栅格：从 DEM 出地形产品栅格工具在「处理 → GeoLibre 工具箱 → 栅格」下，是「文件进、文件出」，所以本地或可访问的栅格最顺。

• 山体阴影：选 DEM，可设方位角、高度角、z 因子，运行后浮雕栅格上图。把它压到别的图层下面，把上层混合模式设为正片叠底（Multiply），让浮雕透过颜色显出来，而不是像降透明度那样一起洗淡。
• 坡度 / 坡向：从 DEM 算陡峭程度、算最陡坡的罗盘方向。任选其一对 DEM 跑，用色带出样式，再从控件菜单打开「色条」显示数值标尺。
• 等高线：设等高线间距（相邻线的高程差），跑出矢量等高线图层，之后可以像普通矢量一样标注、上样式。
• 裁剪到研究区：「按范围裁剪」（边界框，浏览器可跑）或「按掩膜图层裁剪」（矢量掩膜，仅侧车）。

⚠️ 引擎归属别记混：山体阴影、坡度、坡向都有客户端（浏览器）引擎，浏览器构建零安装能跑；等高线和按掩膜裁剪没有客户端引擎，需要 rasterio 侧车，也就得用桌面应用。每个工具顶部的引擎选择器会显示可用项；大栅格或地理坐标系下建议优先侧车。

检查与精修：结果图层上开属性表看输出、调样式与输入区分开；每次运行都记进「处理 → 历史」，条目可一键重跑并复制等价的 Python 代码。参考处理工具。

场景 C｜用 SQL 把数据问出来

SQL 工作区基于 DuckDB-WASM，浏览器和桌面都能用，从「处理 → SQL 工作区」打开。

查已加载的图层每个已加载的矢量图层就是一张可查询的表。先加载示例国家图层，然后：

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

点「运行」，看到预估 GDP 最高的十个国家。

列名提醒：NAME、CONTINENT、POP_EST、GDP_MD_EST是示例countries.parquet采用的 Natural Earth 字段，几何列叫geom。换数据集时列名不同，可先跑DESCRIBE SELECT * FROM 'your-file-url'探一下。

裸 URL 直接查 Parquet不必先加载。工作区会识别FROM子句里的裸 URL，自动包上正确的读取器，再用 HTTP range 流式读，不用整体下载。

SELECT COUNT(*) AS n FROM https://data.source.coop/giswqs/opengeos/countries.parquet;

这个裸 URL 简写是 SQL 工作区的便利特性；标准 DuckDB CLI 里你得显式写read_parquet('https://...')。底层与apps/geolibre-desktop/src/lib/duckdb-vector-loader.ts的按需加载同源，防护边界见tests/duckdb-vector-guard.test.ts。

用空间函数空间扩展已加载，ST_*函数都能用。比如算面积并保留geom以便上图：

-- 数据在 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;

结果上图 + 导出查询返回几何列时，点「添加为图层」就能从结果建新图层（可命名），且一次可加多个。结果图层和任何矢量图层一样支持识别、选择和属性表。导出方面，「导出 CSV」和「导出 GeoParquet」两个按钮就在「添加为图层」旁边。

小工具：用「示例查询」菜单从一个能跑的查询起步，用「历史」重跑之前的查询。参考SQL 工作区。

场景 D｜把成果交付出去

满意后就能发布成公开链接、或嵌进网页。完整参考见嵌入与分享。

先配分享令牌分享会把项目传到 share.geolibre.app，用个人 API 令牌。

1. 打开「设置 → 环境变量」，把令牌贴进Share.GeoLibre API token字段（在 share.geolibre.app 的「设置 → API 令牌」下创建）。
2. 一次配好即可。

分享项目调好图层、样式和地图视图后，打开「项目 → 分享...」，确认标题并上传。GeoLibre 会返回一个指向.geolibre.json的公开 URL，形如https://share.geolibre.app/you/my-map.geolibre.json。 分享文件捕获的内容和本地保存完全一致：图层、样式、插件状态、地图视图。唯一例外是读你电脑本地文件的图层——分享前对话框会把这些列为「缺失」，因为 share.geolibre.app 只存项目文件，绝不上传你的数据文件。

打开分享的地图任何人把项目 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>

可调外观的参数（可自由组合）：

• maponly：隐藏全部外壳，只留地图；
• layout=viewer：只读地图——图层、视图、控件、底图、搜索/识别都保留，会改项目的部分全隐藏；
• layout=compact：留一条细的纯图标工具栏；
• toolbar=none：隐藏顶部工具栏，留面板和状态栏；
• panels=none：隐藏侧边和底部面板，留工具栏；
• theme=dark：加载时强制深色。

读者需要开图层、逛数据但不能改 → 用layout=viewer；地图只是页面插图、不是交互对象 → 用maponly。完整参数表见嵌入与分享。

运行时驱动地图URL 参数只在加载时配置一次。想运行时持续跟地图对话（飞到你自己 UI 里点中的那条记录、监听图内操作），就装类型化客户端：

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 }); }

⚠️ 注意：这段只在「把你的页面源（origin）加进白名单」的部署上生效——web.geolibre.app 本身没有白名单，所以运行时 API 只适用于你自己托管的构建版。白名单、完整命令列表、免依赖的原始postMessage协议，见运行时与地图对话。类型化客户端实现就在packages/embed/src，契约测试见tests/embed-api.test.ts与tests/embed-client.test.ts。

「在哪跑」对照矩阵

把散落在各处的「哪些要桌面/侧车」集中成速查表：

白名单例外：Whitebox 地理处理工具箱（1000+ 工具）走 WebAssembly，浏览器里就能跑，不依赖侧车。

常见卡点速查

• 现象：等高线/按掩膜裁剪点不了。原因：这两项没有客户端引擎，只能靠 rasterio 侧车。解法：切到桌面应用，用「侧车」引擎。
• 现象：大范围缓冲出来的公里数不对。原因：客户端（Turf.js）在地理坐标里做缓冲，大范围会有投影误差。解法：改用侧车（GeoPandas）或Python（Pyodide），它们缓冲前会先重投影。
• 现象：分享后本地图层在别人的链接里不见了。原因：share.geolibre.app 只存项目文件，不存你的数据文件。解法：把这些本地数据托管到可公开访问的位置，再用远程 URL 加载。
• 现象：裸 URL 查询报读取错误，但同一文件手动加载正常。原因：SQL 工作区自动包读取器依赖扩展名/内容判断，个别远端响应头不规范会干扰。解法：先显式「添加数据」加载成表，再对表名查询。
• 现象：iframe 嵌入后想监听/驱动地图没反应。原因：运行时 API 只在配置了 origin 白名单的自托管部署生效，公共 web 版没有白名单。解法：自托管一份构建版并把你的 origin 加进白名单。
• 现象：想让 COG 序列动起来。原因：静态图层本身不带时间轴。解法：装时间滑块插件对栅格序列做时间动画，见数据集成。

下一步

• 想看真人实操：视频教程 收录了从 1.0 总览、浏览器地理处理到影像地理配准的一系列分章节演示。
• 想要逐项参考：用户指南 把界面、图层、样式、属性表、处理、SQL 工作区都拆成了可回链的页面。
• 想顺着代码读实现：数据读取看apps/geolibre-desktop/src/lib/duckdb-vector-loader.ts，嵌入客户端看packages/embed/src，SQL 防护看tests/sql-query-layer.test.ts。

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