经纬桥 GeoBridge

Appearance

示例总览 ​

在线沙箱内置 37 个示例，覆盖从出图、叠加图层、样式与交互、要素查询、三维到访问控制的常见用法。二维示例使用香港的 OpenStreetMap 数据（© OpenStreetMap 贡献者），视野统一在香港；三维示例的数据与许可见示例数据；每个示例都有看得见的地图效果和可以操作的面板，可以在沙箱里直接运行、修改和分享。本组页面给出示例的完整代码与说明。

打开在线沙箱，浏览全部示例

示例列表 ​

入门 ​

  • 矢量瓦片服务样式：取矢量瓦片服务的样式 JSON 直接作为地图样式，并统计视野内的要素数。
  • 地图方案样式：把地图方案公开的样式地址直接交给地图，按数据源开关方案里的图层。

图层 ​

  • 栅格切片：把 MapServer 的切片作为栅格图层，实时显示地图中心所在切片的行列号与图片。
  • WMTS 作为栅格源：用 SDK 读取 WMTS 能力文档，按 Web 墨卡托矩阵集作为 MapLibre 的栅格源，并列出全部矩阵集。
  • TMS 瓦片：读取 TMS 的瓦片集列表，按 scheme: 'tms' 加载并切换 PNG 与 JPEG。
  • OGC API - Tiles：OGC API 的地图瓦片作底图，道路矢量瓦片按等级配色叠加。
  • 切换底图：在栅格切片与矢量瓦片之间切换底图，地图的中心与缩放保持不变。
  • 底图上叠加矢量瓦片：在栅格底图上叠加兴趣点矢量瓦片，可开关并统计数量。
  • WMS 叠加：在地图方案上叠加 WMS 图层，滑块调透明度，显示图例。

样式与交互 ​

  • 按道路等级配色：按属性给道路配色、设线宽，图例可点击开关等级。
  • 兴趣点热力图：热力图随放大过渡为圆点，可按类别筛选、调半径。
  • 建筑悬停高亮：鼠标移到建筑上即高亮并显示名称。
  • 兴趣点类别筛选：按钮筛选兴趣点类别，同时统计全港总数。
  • 点击要素弹窗：点击兴趣点或道路，弹窗显示矢量瓦片里的属性。
  • 土地利用专题图：按类别设色，图例附各类地块数，可只看某一类。
  • 栅格与矢量对比：左右两张地图联动，对比服务端出图与浏览器渲染。

查询 ​

  • 点击识别要素：点击地图，识别各图层的要素，弹窗列出并高亮形状。
  • 属性过滤：按 where 条件查询道路并高亮，显示命中总数。
  • 框选查询：点击两个角点框选范围，查询框内兴趣点并按类别汇总。
  • 地名搜索：按名称关键字搜索兴趣点，点击结果飞到该地点。
  • 查询结果聚合：查询视野内的兴趣点，按缩放级别聚合显示。
  • 兴趣点分类统计：统计视野内各类兴趣点的数量并画成条形图。
  • 导出静态图：用地图服务的导出接口把当前视野导出为一张图片。
  • OGC API - Features 查询：按 CQL2 条件与当前视野分页读取道路要素。

三维（实验功能） ​

需要平台开启三维开关；示例数据以在线系统实际提供为准。

  • 栅格地形（MapLibre）：把栅格地形服务设为 MapLibre 的三维地形，调夸张系数、开关山体阴影，点击读取高程。
  • 网格地形（Cesium）：加载网格地形作为 Cesium 场景地形，按高程着色，点击输出经纬度与高程。
  • 3D Tiles 实景（Cesium）：加载实景三维 3D Tiles，飞到数据范围，滑块调最大屏幕误差。
  • 三维模型（Cesium）：按默认位置放置模型，列表飞到各模型，点击模型输出名称。
  • 点云着色（Cesium）：点云按 RGB、分类、强度、高度切换着色，调点大小，显示图例。
  • 高斯泼溅（Cesium）：加载平台转换的高斯泼溅 3D Tiles，按钮飞到各个泼溅。
  • WMTS 影像（Cesium）：把 WMTS 作为 Cesium 地球的影像，在经纬度与 Web 墨卡托矩阵集之间切换（不需要三维开关）。
  • 综合三维场景（Cesium）：平台切片作影像层，叠加实景 3D Tiles 与模型，一键漫游。

访问控制 ​

  • 用 API Key 访问受保护服务：带 Key 叠加受保护的服务、查询要素，并列出 Key 可访问的服务。
  • 错误处理：区分"未带 Key""Key 无效"等错误并给出中文提示。

OpenLayers 对照 ​

  • OpenLayers：XYZ 切片与 WMS：用 OpenLayers 加载同一平台的栅格切片与 WMS 图层。
  • OpenLayers：矢量瓦片：用 OpenLayers 加载矢量瓦片，按道路等级配色并悬停显示名称。
  • OpenLayers：WMTS 与 OGC API Features：WMTS 在经纬度与 Web 墨卡托矩阵集之间切换，叠加 OGC API 读取的高速公路。

沙箱提供的变量 ​

示例代码在沙箱里运行时，下面这些变量已经准备好，可以直接使用：

变量含义
client已配置好的 GeoBridgeClient：平台地址与 API Key 取自沙箱页面顶部的输入框
container预览区里的地图容器元素
services示例里用到的服务：键是示例使用的逻辑名（如 demo/roads），值是在线系统上实际的服务路径
maps示例里用到的地图方案：键是逻辑名（如 demo/map），值是地图方案 id
maplibreglMapLibre GL JS
olOpenLayers
CesiumCesiumJS 1.146（全局变量；代码里用到 Cesium 时才加载，见三维）
GeoBridgeJS SDK 的全部导出，如 GeoBridge.GeoBridgeClient、GeoBridge.GeoBridgeError、GeoBridge.maskToken

示例代码作为异步函数执行，可以在顶层直接写 await。

拷到自己的页面 ​

把示例代码搬到自己的页面时，需要把沙箱提供的变量换成自己的：

  1. 创建客户端：引入 SDK 与 MapLibre（或 OpenLayers、CesiumJS）后，自己创建 client。

    js
    const client = new GeoBridge.GeoBridgeClient({
  baseUrl: 'https://map-demo.geobridge.cn/geobridge-mapserver',
  apiKey: 'gb_xxx…', // 只访问公开服务时可以不填
})

  2. 地图容器：页面里放一个有宽高的元素，用 document.getElementById('map') 取得，替换 container。

  3. 服务路径：把 services['demo/roads'] 这样的写法换成你自己的服务路径（形如 目录/服务名，不在目录中的服务直接写服务名）；maps['demo/map'] 换成你的地图方案 id。

  4. 顶层 await：在模块脚本（<script type="module">）里可以直接使用顶层 await；在普通脚本里，把代码包进一个 async 函数再调用。

也可以在沙箱里点「下载」，得到一个已经组织好的单文件 HTML，详见在线沙箱。