ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

GeoLibre Chrome 扩展 “Open data in GeoLibre”:从网页数据链接到一键打开地图的完整技术解析

GeoLibre Chrome 扩展 “Open data in GeoLibre”:从网页数据链接到一键打开地图的完整技术解析 GeoLibre Chrome 扩展 “Open data in 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 官方的 Chrome 扩展 Open data in GeoLibre 展开它能在当前网页中自动发现可被 GeoLibre 打开的地理空间数据链接与地图服务并把选中内容通过深链接一次性加载到同一张地图上。读完本文你将掌握该扩展的安装与手动加载方式、两种数据发现机制页面链接扫描与 Resource Timing 服务识别的源码级原理、深链接的构造规则以及它在隐私设计上刻意回避了哪些能力。1. 扩展定位与权限设计只有两个权限的 Manifest V3 扩展扩展源码位于 extensions/geolibre-chrome/是一个 Manifest V3 Chrome 扩展完整声明见 manifest.json字段值含义manifest_version3使用 MV3 规范nameOpen data in GeoLibre扩展名称version0.3.1当前源码中的版本号minimum_chrome_version106最低浏览器版本要求permissions[activeTab, scripting]仅这两个权限无任何 host 权限action.default_popuppopup.html点击工具栏图标弹出操作面板content_security_policy.extension_pagesscript-src self; object-src self扩展页面只允许加载自身脚本从源码结构看整个扩展只有 4 个核心脚本popup.mjs弹窗逻辑负责注入扫描脚本、渲染结果列表与构建打开链接scanner.mjs页面数据集链接扫描器注入到活动标签页执行service-scanner.mjs地图服务识别器纯函数库在扩展页面执行url-builder.mjsGeoLibre 深链接构建器。值得注意的设计取舍是扩展没有后台 service worker、不请求任何网站 host 权限、不做任何存储。“仅在用户点击图标时才能访问当前标签页”这一约束直接体现在activeTab权限上——它是点击后授予的而不是对某个站点的常驻授权。隐私政策源文件 PRIVACY.md 对此有更完整的表述扩展不使用远程代码、广告、分析追踪、Cookie 或任何形式的扩展存储。2. 安装扩展2.1 通过 Chrome Web Store 安装扩展已发布到 Chrome Web Store“Open data in GeoLibre”安装一步完成并自动更新打开 Chrome Web Store 中的该扩展页面选择Add to Chrome并确认在 Chrome 工具栏将Open data in GeoLibre固定Pin方便随时点击。由于只依赖 MV3 标准能力任何能安装 Chrome Web Store 扩展的 Chromium 系浏览器均可使用包括 Chrome、Edge、Brave、Vivaldi、Opera 与 Arc。2.2 手动加载打包版本Load unpacked如果不希望走商店渠道或想运行比商店审核版本更新的构建可以加载打包发布物从 GeoLibre 的最新 Release 中下载文件名以geolibre-chrome-开头的 ZIP 资源包解压到一个打算长期保留的目录——Chrome 直接从这个目录加载扩展删除目录会导致扩展失效打开chrome://extensions开启Developer mode选择Load unpacked选中解压出的geolibre-chrome-version目录将Open data in GeoLibre固定到工具栏。手动安装的副本不会自动更新。更新流程是下载并解压新版 Release 资源然后在chrome://extensions上点击该扩展的Reload如果解压到了不同目录需先移除旧副本再加载新目录。从仓库根目录打包发布物的命令定义在 package.json 中npm run build:chrome-extension它执行 scripts/package-chrome-extension.mjs输出版本化的上传 ZIP 到dist/。商店上架文案与权限说明见 STORE_LISTING.md。另外开发者也可以直接把仓库内的 extensions/geolibre-chrome 目录作为开发版加载打开chrome://extensions开启 Developer mode选择Load unpacked并指向该目录即可。3. 从网页打开数据集完整操作流程访问包含地理空间文件链接的任意网页或数据目录点击 Chrome 工具栏中的 GeoLibre 图标使用All/Vector/Raster三个筛选页签过滤发现的数据集仅控制显示不影响已选项勾选一个或多个数据集默认不选中任何项弹窗内还提供 Select all / Select none 快捷操作点击Open in GeoLibre所选数据集会加载到同一张 GeoLibre 地图上。扩展识别的数据集类型包括GeoJSON 与空间 JSON、GeoParquet 与 Parquet、PMTiles、GeoTIFF 与 Cloud-Optimized GeoTIFFCOG、包含 GeoJSON 的 ZIP 压缩包、携带 JSON-LD 下载元数据的无扩展名链接以及现有的 GeoLibre 数据深链接。在 Source Cooperativesource.coop仓库页面上它还会读取页面内嵌的完整文件清单使当前可见列表之外的数据集也可被选中。对地图服务WMS、WMTS、WFS、OGC API Features、ArcGIS Feature Service、XYZ/TMS 栅格瓦片、PBF/MVT 矢量瓦片的识别则依赖下文第 5 节的 Resource Timing 机制。4. 数据集发现机制scanDocumentForDatasets的扫描与分类逻辑页面数据集扫描由 scanner.mjs 中的scanDocumentForDatasets()完成。该函数被chrome.scripting.executeScript序列化后注入活动标签页执行因此源码注释特别强调所有辅助函数必须内联在函数体内不能闭包引用模块级变量。4.1 四类扫描源扫描源选择器说明锚点与链接资源a[href], link[href]主要来源提示词取type、rel、download、title属性与链接文本自定义数据属性[data-url], [data-href], source[src]覆盖把文件地址放在自定义属性里的页面JSON-LD 结构化数据script[typeapplication/ldjson]递归遍历读取contentUrl与downloadUrl字段Source Coop 内嵌清单script中的self.__next_f.push载荷该站的大目录表做了虚拟滚动只有可见行是锚点因此从 Next.js 内嵌清单中恢复全部文件路径4.2 格式分类与置信度classify()scanner.mjs#L97-L140按“URL 路径后缀优先、页面提示词兜底”的规则给出{ format, kind, confidence }格式路径特征提示词特征kind置信度GeoJSON.geojsongeojson/geojson/feature collectionvector3GeoParquet.geoparquet/.parquetgeoparquet/parquetvector3PMTiles.pmtilespmtilesvector3GeoTIFF.tif/.tiff/.coggeotiff/cloud optimized/cograster3ZIP.zipapplication/zip等vector2JSON.json且非*.style.json含geo/spatial/vector/dataset等词vector1Data API无扩展名命中地理关键词vector/raster2一个容易忽视的判据是“页面识别”文档站会链接诸如 “Add a GeoJSON line” 这样的教程页其 URL 本身并不含数据后缀。源码用echoesSlug()判断——当目录式 URL以斜杠结尾的路径 slug 被链接文本逐词复述时视为“关于该格式的页面”而非数据从而避免把 HTML 页面当作数据集提供。相关行为由 tests/chrome-extension.test.ts 中的 “does not read a documentation links wording as a dataset” 用例固化验证。4.3 URL 规范化两个站点的特判canonicalUrl()对两类站点做专门改写保证拿到的是真正可下载字节的地址Hugging Face同一文件可从 blob、raw、blame、edit、delete、commits 七种路由链接到只有resolve路由302 到 CDN能返回地图数据源可读的字节。源码按仓库路径文法中路由参数出现的位置/datasets、/spaces下深一层定位并改写为resolve同时清除?downloadtrue参数与行号锚点否则锚点会把一个文件拆成两条重复项Source Cooperative把source.coop主机上的数据对象链接统一改写到公开数据主机data.source.coop剩下的source.coop链接只可能是站点导航直接丢弃。4.4 样式文件配对若页面同时链接name.style.json或name.geolibre.style.json扫描器按文件主干去除数据后缀与样式主干比对把样式 URL 绑定到同名数据集的styleUrl字段scanner.mjs#L282-L293。最终结果按置信度降序、名称升序排序返回同名 URL 只保留置信度更高的一条。5. 地图服务识别读回页面自己的 Resource Timing 缓冲地图的瓦片和服务文档是 JavaScript 运行时请求的页面上根本不存在对应链接。扩展的解法是读取performance.getEntriesByType(resource)——每个文档为自己保留的请求记录scanner.mjs 中collectRequestedUrls()从顶层框架及其所有同源框架收集。识别与归并逻辑在 service-scanner.mjs请求特征识别为处理SERVICEWMSGetMap/GetCapabilities/GetFeatureInfoWMS栅格剥除 OGC 操作参数得到端点携带LAYERS值SERVICEWMTSGetTileWMTS栅格把瓦片坐标还原为{z}/{x}/{y}模板wmtsTileTemplate携带LAYERSERVICEWFSGetFeature等WFS矢量额外剥除 WFS 专属操作参数携带typeName路径形如…/FeatureServer/n/queryArcGIS Feature Service矢量保留请求中出现的层索引避免误落到服务的第一个图层路径形如…/collections/id/itemsOGC API矢量裸/collections路由仅当伴随 OGC 格式参数f时才认定/tile.json、/tiles.json、/tilejson.json矢量瓦片 TileJSON作为瓦片集的元数据入口…/{z}/{x}/{y}.png\|jpe?g\|webp\|gif\|pbf\|mvt形式的已完成瓦片请求XYZ/TMS 或矢量瓦片折叠为可复用的{z}/{x}/{y}模板并做坐标合法性校验zoom ≤ 30且行列小于2^zoom独立的.pbf/.mvt链接矢量瓦片但排除字体路径/fonts/与N-M.pbf字形范围文件——那是字体而非瓦片集去重键是“URL 层名”candidateKey因此同一端点提供的多个图层会分别列出例如WMS service: topp:states而不是折叠成一条。候选上限为 100 条MAX_SERVICE_CANDIDATES。每条服务结果还携带“页面当时向该服务要什么”WMS 的LAYERS、WFS 的typeName、WMTS 的层名以及矢量瓦片集所在来源加载的样式文档。这些信息最终作为serviceLayer与serviceStyle参数进入 GeoLibre使 Add Data 对话框打开时即处于可提交状态而不是停在图层字段为空的端点上。5.1 读缓冲而非监听网络的三个后果extensions/geolibre-chrome/README.md 专门记录了这一设计的边界源码实现与之逐条对应Worker 请求不可见。MapLibre 等渲染器从 web worker 拉取矢量瓦片记录在 worker 自己的时间线里而非文档的。这类瓦片集只能靠主线程确实请求过的 TileJSON 恢复找不到 TileJSON 时退而用样式文档——GeoLibre 能从样式文档自身解析出图层。只有当一个来源提供了自命名样式…/style.json等却没有任何瓦片集时样式才以自己的名义成为候选。由于从不读取响应体描述栅格瓦片的 TileJSON 无法与矢量 TileJSON 区分会以矢量瓦片集名义提供这种误报无法成为图层——GeoLibre 在提交时解析文档解析不出源图层就会拒绝。缓冲有限。每个文档默认只保留 250 条 Resource Timing 记录且写满即停。地图早期的请求通常远在容量之内但极繁忙的页面可能丢失晚加入的服务。提高上限需要document_start注入脚本进而需要本设计刻意回避的宽 host 权限因此这一上限被接受。跨域框架不可达。activeTab只授予标签页主框架的来源allFrames: true能覆盖顶层框架与同源框架注入跨域框架会被逐帧拒绝同源框架仍能返回自己的缓冲见 popup.mjs 中inspectPage()的实现。完全运行在跨域iframe内的地图因此对扫描不可见弹窗显示“无服务”而非报错。该扩展还直接识别“打开服务 URL 本身”的页面——响应就是页面本身例如一个 WMS GetCapabilities 文档页面会列出其服务端点。而每个文档的缓冲是私有且随导航丢弃的无服务的页面如example.com显示为空不会继承上一个页面的请求。6. 深链接构建buildGeoLibreUrl的参数规则点击Open in GeoLibre后url-builder.mjs 中的buildGeoLibreUrl()把选择结果编码到https://web.geolibre.app/的查询串中新标签页打开后由 GeoLibre 自动加载。两类目标走不同入口文件型数据集可多选叠加到同一张地图https://web.geolibre.app/?dataURL1dataURL2stylestyleURL1stylestyleURL2每个数据集追加一个data参数只要任一数据集带样式就会按位追加style参数无样式的位置留空保证样式与数据集一一对应。地图服务每次只能一个且不能与其他数据混合格式到add参数的映射为识别格式add值XYZ / TMSxyzWMSwmsWMTSwmtsWFSwfsOGC APIogc-featuresArcGIS Feature ServicearcgisVector tilesogc-vector-tileshttps://web.geolibre.app/?addwmsserviceUrl端点serviceLayertopp:states服务 URL 之外的serviceLayer页面当时渲染的图层与serviceStyle矢量瓦片集的样式文档参数即来自第 5 节的识别结果。一个边界条件值得注意如果某个矢量瓦片集只通过样式文档被发现样式 URL 就是其自身 URL则不再重复传serviceUrl——否则 GeoLibre 会把样式文档当作 TileJSON 解析而失败url-builder.mjs#L33-L36。构建器还会校验所有 URL 必须是 HTTP/HTTPS否则抛出可读错误如 “GeoLibre can only open HTTP or HTTPS dataset links.”这正是弹窗无法打开时错误提示的来源。URL 构建逻辑有专门的测试覆盖见 tests/chrome-extension.test.ts 中对buildGeoLibreUrl的用例。7. 访问与隐私CORS、凭据与“不做什么”CORS 是硬性前提。GeoLibre 从浏览器直接请求所选链接源服务器必须允许跨域请求CORS。完整 HTTP(S) URL包括签名查询参数会被原样转发给 GeoLibre扩展本身从不抓取或上传数据集。凭据不随链接走。Cookie 及其他浏览器会话凭据不会被转发因此依赖 Cookie 或会话认证的链接可能失败而直接嵌在 URL 里的凭据签名参数、访问令牌属于 URL 的一部分会随 URL 转发——隐私政策提醒用户不要选中不希望发送到 GeoLibre 的 URL。临时的blob:URL 与浏览器内部链接无法传输。扩展“不做什么”与其做什么同样重要依据 PRIVACY.md 与 manifest仅在使用者点击图标的那一刻请求活动标签页此后再无任何观察时机不读取任何响应体识别服务靠的是页面为自己记录的请求地址而非监听网络不存储任何东西——发现列表只存在于弹窗打开期间关闭即丢弃无后台运行、无分析统计、无远程代码。新标签页的导航会把所选 URL 与用户 IP 暴露给 GeoLibre 的 web 托管基础设施标准服务日志可能保留它们这也是隐私政策中明确声明的行为。8. 小结一个刻意收敛的设计样本“Open data in GeoLibre” 的价值不在功能多而在边界清晰两个权限、无后台、无存储换来的是“点击即扫描”的低风险体验代价是三个明确接受的盲区worker 瓦片请求、250 条缓冲上限、跨域 iframe源码与测试tests/chrome-extension.test.ts把每一条边界都固化成了可验证的行为。对想在自己的项目中做“页面 → 地图应用”数据桥接的开发者而言这套“链接扫描 Resource Timing 读回 深链接参数协议”的组合是一个可以直接参考的实现范本对 GeoLibre 用户而言理解第 6 节的data/style/add/serviceUrl/serviceLayer/serviceStyle参数体系同样能让你手工构造出扩展生成的同一种深链接。【免费下载链接】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创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表