代碼倉庫地址：
https://github.com/openglobus/openglobus
原創。@秋意正寒
1 簡介
OpenGlobus 是一個設計用於顯示可交互性三維地圖、影像瓦片、矢量數據、標注、三維對象的 JavaScript 庫。它所用的技術是純 WebGL，完全開源免費。
它的目標是：讓三維地圖要素更快、更好看，用戶友好度拉滿並且在有關項目中容易編碼實現。
筆者注：
OpenGlobus的起名，頗有三維界的OpenLayers的意味
2 HelloGlobus
很容易能通過 npm scripts 中的 build 命令打包到一個生產模式的 umd 包，包括兩個文件，一個 js 文件，一個 css 文件，寫這篇文章時，庫版本是 0.8.5，所以上最簡單的示例代碼：
<link rel="stylesheet" href="og-0.8.5.css">
<script src="og-0.8.5.js"></script>
<div id="viewport"></div>
<script>
const globus = new og.Globe({
target: 'viewport'
})
</script>
在控制台，鍵入 og 可輸出全局對象。
出圖大概是這樣的效果：
觀察控制台的網絡請求，不難發現在不添加任何圖層、高程數據的時候，它不會發生任何網絡圖層的請求，也就是說，這個夜光圖和背景完全是內置在代碼中的靜態資源。
3 在 Vite 中與 vue3 集成
經測試，Globe 對象暫不支持直接傳入 HTMLDivElement，只能傳遞一個 id 字符串，所以綁定 DOM ref 的方法行不通。
習慣性把屬性作為 vue 組件的 props 的開發者請注意，下列寫法雖然可以正確出現地球，但是這樣會增加監聽負載，一旦將來 globe 上的東西越來越多，WebGL 的幀率將不能保證：
<template>
<div id="viewport"></div>
</template>
<script setup>
import * as og from '@openglobus/og' // 發文時，還沒有類型定義庫 `*.d.ts`，所以暫時只能整體導入，而不能用解構語法
import { onMounted, defineProps, ref } from 'vue'
import '/node_modules/@openglobus/og/css/og.css'
let globe = ref()
onMounted(() => {
globe = new og.Globe({
target: 'viewport'
})
})
defineProps([
'globe'
])
</script>
所以，我建議改成這樣：
<template>
<div id="viewport"></div>
</template>
<script setup>
import * as og from '@openglobus/og' // 發文時，還沒有類型定義庫 `*.d.ts`，所以暫時只能整體導入，而不能用解構語法
import { onMounted } from 'vue'
import '/node_modules/@openglobus/og/css/og.css'
let globe = null
onMounted(() => {
globe = new og.Globe({
target: 'viewport'
})
})
</script>
4 在 Vite 中與 react 集成
這個就簡單了：
import React, { useEffect } from 'react'
import * as og from '@openglobus/og' // 發文時，還沒有類型定義庫 `*.d.ts`，所以暫時只能整體導入，而不能用解構語法
import '/node_modules/@openglobus/og/css/og.css'
function App() {
useEffect(() => {
const globe = new og.Globe({
target: 'viewport'
})
}, [])
return <div id="viewport"></div>
}
export default App
5 示例代碼
官網（www.openglobus.org）提供了一些示例代碼，足夠學習使用，只要知道入口對象是 Globe 類即可。
6 API風格
不僅庫的名字類似 OpenLayers，它還在很多 API 命名上“暫時”接近 ol。拿創建 XYZ 圖層來說：
const osm = new og.layer.XYZ("OpenStreetMap", {
isBaseLayer: true, // 是否是底圖
url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", // url
visibility: true, // 可見性
attribution: 'Data @ OpenStreetMap contributors, ODbL' // 聲明之類的字符串
});
和 OpenLayers 的比較：
const xyzSource = new ol.source.XYZ({
url: `https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=Your API key from http://www.thunderforest.com/docs/apikeys/ here`,
})
以及 Vector 圖層：
const markerLayer = new og.layer.Vector("Markers", {
clampToGround: true
})
在 ol 也有類似的 API 名稱。
更有趣的是，當前的示例代碼頁面和 ol 6.5 的示例代碼頁面極為相似：
| og | ol |
|---|---|
 |
 |
更別提 API 幫助文檔了，我懷疑是用的同一個母模板。
7 目前已完成的功能（截至發文時）
基本數據加載功能
- GeoJson 數據加載
- 靜態圖片加載（並支持拖拽調整其四個角的位置）
- 地形服務加載（Mapbox的地形服務、GeoServer的Bil格式地形服務等），支持垂直誇大
- GeoServer WMS 加載
- Canvas瓦片加載（Canvas作為一層直接貼到地球表面）
- 廣告牌加載（類似於精靈？），支持貼地
- 視頻紋理
- 基本矢量圖形繪制（polylines、marker、circle、ray等），marker支持交互式拖拽移動
界面定制與交互功能
- 支持自定義控件（類繼承形式實現，且暫時只能用原生 DOM）
- 支持 Popup（彈窗），彈窗樣式比較丑，雖然支持背面剔除，但是它的更新坐標的機制感覺和 Cesium 自定義氣泡差不多... 都是監聽事件改變 DOM 的坐標
- 支持圖層切換控件（盡管現在還很丑）
- 支持鼠標滑過（mousemove）、左鍵單擊（lclick）等基本事件，也支持禁用事件
- 支持相機飛行動畫
渲染器及渲染效果相關功能
- 提供時鍾（儒略日期、UTC等均支持）
- 內置簡單的數學庫
- 圖層透明度設置
- 支持簡易太陽光
- 支持假性半透明顏色覆蓋
復雜的需求肯定達不到（例如將視頻完整地貼合復雜模型等），畢竟才發布不久。
8 提供原生 WebGL 接口
在 GeoTexture2d 例子中，就出現了與底層 WebGL 幾乎完全一致的代碼，例如 fbo、program、uniforms、attributes 等，也支持自定義的着色器代碼，意味着應該是有底層的能力的。
9 展望未來
它創建於 2018 年，但是在 GitHub 上是今年 3 月才活躍起來的，官網列舉此庫的特點如下：
圖層支持
- WMS、WMTS
- 標簽和廣告牌
- 矢量圖層：線與面類型
- 靜態覆蓋圖層：支持靜態圖片、視頻、WebGL FBO
- 自定義 canvas 瓦片圖層
- GeoJSON圖層
- 其他
默認控件
- 縮放按鈕
- 經緯度坐標提示
- 圖層切換
- 太陽位置控件
- 指北針
- 交互式導航（即鼠標鍵盤控制）
引擎的性能表現
- 純 WebGL 實現渲染器
- 支持多地球實例
- 單 WebGlProgram（不太確定）
- 內置時鍾，即時渲染
- 支持事件：draw、click、mouseenter等
- 支持圖層、對象的拾取
- LOD控制
- 舒適的交互體驗
- 無依賴！
三維可視化
- 支持多種高程數據源
- 柔和的燈光
- 自定義天空盒
- 圖層外觀支持自定義：光參數、高度調整、透明度、可見范圍等
- 軸對齊的廣告牌和標簽
- 即將支持：3dTiles、大氣散射效果、glTF模型
若再迭代十幾個版本，那是非常值得期待的，畢竟它的 API 更接近 GIS 風格。
但是，現在國內的需求更接近局部展示而不是全球范圍展示，能不能被國內的piao客們青睞，還要再等等。