Vue.js中能否使用WebGL Earth或globe.gl？如何引入并初始化？

库兼容性说明 #

WebGL Earth 和 globe.gl 均为框架无关的原生 JavaScript 库，官方推出的 react-globe.gl 仅为面向 React 生态做的组件化封装，两个库本身完全支持在 Vue 2/Vue 3 项目中直接使用，无需依赖 Vue 专属的封装组件，可使用的功能和 React 版本完全一致。

具体接入步骤 #

1. globe.gl 接入示例（Vue 3 组合式 API 为例） #

• 第一步：安装依赖

npm install globe.gl

• 第二步：组件内编写逻辑

<template>
  <!-- 地球挂载容器，必须显式设置宽高 -->
  <div ref="globeContainer" style="width: 100vw; height: 100vh;"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import Globe from 'globe.gl'

const globeContainer = ref(null)
let globeInstance = null

onMounted(() => {
  // 初始化地球实例
  globeInstance = Globe()(globeContainer.value)
    .globeImageUrl('你的地球纹理图资源地址')
    .bumpImageUrl('你的地形凹凸纹理图资源地址')
  
  // 可选：监听窗口大小变化自适应
  const handleResize = () => {
    globeInstance.width(window.innerWidth)
    globeInstance.height(window.innerHeight)
  }
  window.addEventListener('resize', handleResize)
  // 将监听事件存到实例上方便卸载时移除
  globeInstance._handleResize = handleResize
})

onBeforeUnmount(() => {
  // 销毁实例释放资源，避免内存泄漏
  if (globeInstance) {
    window.removeEventListener('resize', globeInstance._handleResize)
    globeInstance._destructor()
    globeInstance = null
  }
})
</script>

如果使用 Vue 2 选项式 API，只需将 ref 取值方式替换为 this.$refs.globeContainer，生命周期对应替换为 mounted 和 beforeDestroy 即可。

2. WebGL Earth 接入示例 #

• 第一步：安装依赖

npm install webgl-earth

• 第二步：组件内编写逻辑

<template>
  <div ref="earthContainer" style="width: 800px; height: 600px;"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import WebGLEarth from 'webgl-earth'

const earthContainer = ref(null)
let earthInstance = null

onMounted(() => {
  // 初始化地球实例，可自定义初始中心点、缩放层级等参数
  earthInstance = new WebGLEarth(earthContainer.value, {
    center: [116.4074, 39.9042],
    zoom: 3
  })
})

onBeforeUnmount(() => {
  // 销毁实例
  if (earthInstance) {
    earthInstance.destroy()
    earthInstance = null
  }
})
</script>

注意事项 #

• 挂载地球的 DOM 容器必须提前设置明确的宽高，否则库无法正常完成渲染
• 必须在组件卸载的生命周期中手动销毁实例、移除监听事件，避免 WebGL 上下文泄漏导致的内存溢出问题
• 两个库的官方原生 API 都可以直接调用，不需要做额外的 Vue 适配

内容的提问来源于stack exchange，提问作者tako-sphynx