经纬桥 GeoBridge

Appearance

在线沙箱 ​

在线沙箱让你不安装任何东西就能改代码、看效果、发链接。沙箱匿名可用，不需要登录；内置 37 个示例（见示例总览），代码运行在与页面隔离的预览框里。

打开在线沙箱

界面 ​

  • 左侧：示例列表，按分类分组，可以搜索。
  • 中间：代码编辑器，支持 JavaScript 语法高亮。
  • 右侧：预览区；下方是日志面板，显示 console.log、console.warn、console.error 的输出与未捕获的异常；每次运行前自动清空，只显示本次运行的输出。
  • 顶部：「平台地址」「API Key」两个输入框，以及「运行」「重置」「分享」「下载」按钮。
  • 快捷键：Ctrl + Enter（macOS 为 Cmd + Enter）运行。

代码里可以直接使用沙箱准备好的 client、container、services、maps、maplibregl、ol、GeoBridge，以及三维示例用的 Cesium（代码里用到时才加载），并可在顶层直接 await，详见示例总览。每次运行都会重建预览，上一次的地图与定时器不会残留。

平台地址与 API Key ​

  • 平台地址默认是在线系统 https://map-demo.geobridge.cn/geobridge-mapserver。改成你自己部署的平台地址（含上下文路径），示例就会访问你的平台；此时示例里 services、maps 对应的服务路径需要在你的平台上存在，或者把代码里的路径改成你自己的服务。
  • API Key 只访问公开服务时可以不填。Key 只保存在当前浏览器标签页中，关闭标签页即失效；不会写进分享链接，也不会写进下载的文件。
  • 在沙箱里请使用未限制来源域名的 Key。 预览框出于安全考虑运行在隔离的环境中，发出的请求不带可识别的来源域名；设置了来源域名白名单的 Key 在这里一定匹配不上，请求会被拒绝（错误码 TOKEN_INVALID）。需要测试带白名单的 Key 时，把代码下载为 HTML，放到白名单内的站点上运行（见下文）。

分享链接 ​

  • 点「分享」生成链接：当前代码压缩后写在链接的 # 之后。这一部分不会发往服务器，平台既不存储也不审核分享的代码。打开某个内置示例的链接形如 /sandbox/#example=wmts。
  • 代码上限为 64 KB。超过时「分享」会提示「代码超过 64 KB，无法生成分享链接」；打开损坏或超限的链接时会给出提示并回到示例原文。
  • 链接里不含 API Key。
  • 打开分享链接不会自动运行。 页面会提示风险：这段代码来自分享链接，运行时它可以使用你填写的 Key，也能把 Key 发往其他网站。
  • 填写了 Key 时，由链接载入的代码在第一次运行前必须点「确认运行」，即使你修改过代码也一样。确认只对这一次载入有效；没有填写 Key 时可以直接运行。

死循环保护 ​

写错的循环不会让页面卡死：

  • 代码里的同步循环让页面无响应达到约 1.5 秒时，脚本会被停止，日志显示「脚本无响应，已停止」。停止后即使代码用 try/catch 捕获了这个错误，后续循环也会立即再次停止。
  • 在循环里 await 定时器、requestAnimationFrame 等会让出页面的写法不受影响；但只 await 一个立即完成的值（如 while (true) { await null }）并不会真正让出，同样会被停止。
  • 预览完全没有回应时（约 2 秒；用到 Cesium 的三维代码放宽到约 10 秒，因为首次绘制时的着色器编译可能让页面短暂停顿），沙箱会销毁这个预览并显示「脚本无响应，已停止」，再准备一个新的空白预览。少数情况下新预览也无法就绪，会提示「预览进程无响应，请刷新页面」。
  • 语法有错、无法解析的代码不在保护范围内，会直接报语法错误。

下载为单个 HTML ​

点「下载」得到一个 HTML 文件，可以作为自己项目的起点。它通过相对路径 ./vendor/… 引用 MapLibre、OpenLayers 与 JS SDK，不引用任何外网脚本，也不含 Key（apiKey 留空，请自行填入）。使用时：

  • 需要把沙箱的 vendor/ 目录一并拷走，与下载的 HTML 放在同一目录下。vendor/ 里的文件可以从在线系统的 https://map-demo.geobridge.cn/geobridge-mapserver/sandbox/vendor/ 下载；自行部署的平台同样在 /sandbox/vendor/ 下提供。
  • 必须通过 http(s) 打开，例如用任意静态文件服务器在本地启动。MapLibre GL JS 6 只提供模块脚本，直接双击用 file:// 打开会加载失败。
  • 代码运行在模块脚本里，即严格模式（沙箱的预览不是严格模式），依赖非严格语义的写法会报错。正则字面量里含有 <!-- 或 <script 时，请改用 new RegExp('…') 的写法。
  • 下载的页面在你自己的站点上运行，带有正常的来源域名，所以设置了来源域名白名单的 Key 在这里可以使用。
  • 三维示例（代码里用到 Cesium）下载的页面另外引用 ./vendor/cesium/Cesium.js 与它的样式，并在加载前把 CESIUM_BASE_URL 设为 ./vendor/cesium/：需要把 vendor/cesium/ 整个目录（约 13 MB，含 Cesium 运行时要用的 Workers、Assets、ThirdParty、Widgets）一并拷走。也可以改为引入你自己的 CesiumJS（1.146 及以上），删掉这几行并自行设置 CESIUM_BASE_URL。二维示例下载的页面不引用 Cesium。

已知限制 ​

  • 沙箱不提供要素编辑（需要登录平台）。
  • 三维示例是实验功能，需要平台开启三维开关，浏览器需要支持 WebGL 2。
  • 浏览器窗口很矮时布局可能拥挤；正在解析分享链接的短暂时间内输入的内容可能被覆盖。