【在线体验】虚拟现实与三维地球应用

最近一直在研究gemni，作为地表最强大模型，怎么也得亲身体验一下才行啊，想着做个什么gis的app，最好是有新意的，大家又能有点用处，于是乎，这个项目就诞生了，做的不好的地方，还望小伙伴们不吝赐教，感谢Thanks♪(･ω･)ﾉ

1：集成VR三维地球项目

2：全球tiff的画个框，随意下载

访问体验： https://www.seggis.cn/

1 手势控制三维地球

第一次体验的时候，我自己都惊了。打开页面，摄像头启动，然后你挥挥手，地球就跟着转。捏一下手指，放大缩小。完全不需要鼠标键盘。

// 手势识别的核心逻辑其实不复杂
const detectGesture = (handLandmarks) => {
  if (isPinchGesture(handLandmarks)) {
    // 缩放地球
    camera.zoom(scaleFactor);
  } else if (isRotateGesture(handLandmarks)) {
    // 旋转地球
    globe.rotate(rotationAngle);
  }
};

当然，实际实现比这复杂得多。我们用的是MediaPipe做手势识别，Three.js渲染三维场景。刚开始的时候延迟挺高的，后来优化了几轮，现在基本能做到实时响应了。

为什么做这个？

说实话，最开始就是觉得好玩。但用了一段时间发现，这玩意儿在教育场景下特别有用。地理老师上课，不用再对着PPT讲"这里是赤道，那里是北极"了。直接手势控制，学生看得更清楚。

而且，这种交互方式降低了使用门槛。以前用GIS软件，得先学半天怎么操作。现在？挥挥手就会了。

2 智能TIFF下载

做这个功能是因为我们自己也经常需要下载地理数据。传统方式太麻烦了：

1. 1. 找到数据源网站

2. 2. 输入坐标（还得知道坐标系）

3. 3. 选择格式

4. 4. 等待下载

5. 5. 处理坐标转换

一套流程下来，半天就没了。

所以我们做了个可视化选择的功能。在地图上画个框，选好精度，点下载。就这么简单。

# 后端处理的核心逻辑
def download_image(geometry, zoom_level, target_crs):
    # 计算需要的瓦片
    tiles = calculate_tiles(geometry, zoom_level)
    
    # 下载并合并
    merged_image = download_and_merge_tiles(tiles)
    
    # 坐标转换
    reprojected = reproject_to_crs(merged_image, target_crs)
    
    return reprojected

当然，实际代码比这复杂。要考虑文件大小限制、用户权限、错误处理等等。但核心思路就是这样。

3 技术架构

技术选型：为什么用Vue3 + Next.js

最开始我们想用单一框架。但试了试发现，不同功能对框架的要求不一样。

VR三维地球需要：

• • 复杂的3D渲染

• • 实时的手势识别

• • 流畅的交互体验

地图下载需要：

• • 灵活的界面交互

• • 表单处理

• • 状态管理

手势交互

做手势识别的时候，遇到的最大问题是延迟。MediaPipe识别手势需要时间，渲染三维场景也需要时间。两个加起来，用户就能感觉到卡顿。

后来我们做了几轮优化：

1. 1. 手势识别和渲染并行处理

2. 2. 预测用户手势，提前渲染

3. 3. 优化3D模型加载

// 优化后的处理流程
useEffect(() => {
  const processFrame = async () => {
    // 并行处理
    const [gesture, frame] = await Promise.all([
      detectGesture(videoFrame),
      renderScene()
    ]);
    
    // 应用手势
    applyGesture(gesture);
  };
  
  const interval = setInterval(processFrame, 16); // 60fps
  return () => clearInterval(interval);
}, []);

现在基本能做到60fps了。当然，这取决于设备性能。高端设备没问题，低端设备可能会降帧。

移动端适配

移动端的手势识别其实更复杂。因为屏幕小，手势范围有限。我们做了适配，小屏幕下手势识别区域会调整。但说实话，移动端体验还是不如桌面端。

下载功能：那些踩过的坑

做下载功能的时候，踩了不少坑。

第一个坑：坐标转换

不同坐标系之间的转换，说起来简单，做起来麻烦。WGS84、GCJ02、BD09，每个都有自己的特点。我们用了proj4库，但还是遇到了一些边界情况。

# 坐标转换
from pyproj import Transformer

transformer = Transformer.from_crs(
    source_crs='EPSG:4326',  # WGS84
    target_crs='EPSG:3857'    # Web Mercator
)

lon, lat = transformer.transform(lat, lon)

第二个坑：文件大小

大文件下载，服务器压力大，用户等待时间长。我们做了预估，但有时候预估不准。后来加了进度提示，用户至少知道要等多久。

第三个坑：并发下载

多个用户同时下载，服务器容易崩。我们做了限流，但还是有压力。这个还在优化中。

实际应用：真的有人用吗？

说实话，刚开始我们也不知道这玩意儿有没有人用。但上线后，发现还真有不少用户。

教育场景

有个地理老师联系我们，说上课用VR地球，学生注意力明显提高了。以前讲地球自转，学生一脸懵。现在手势控制，学生自己操作，理解得更快。

科研场景

有个研究团队，需要下载大量地理数据。以前要联系数据提供商，等好几天。现在在线选择，几小时就能拿到数据。效率提升很明显。

商业场景

有个规划公司，用VR地球做方案展示。客户看到三维可视化，比看PPT印象深多了。据说因为这个，还多接了几个项目。

技术展望：未来会怎样？

说实话，我们也不知道未来会怎样。但有几个方向在考虑：

多模态交互

现在主要是手势，以后可能会加语音。比如"放大到北京"，地球就自动定位到北京。这个技术上可行，但需要时间。

性能优化

WebGL性能还有提升空间。特别是移动端，现在还是有点卡。我们想试试WebGPU，但兼容性是个问题。

数据源扩展

现在主要用公开数据源，以后可能会接入更多数据。但数据成本是个问题，还在考虑商业模式。

一些思考

做这个项目，最大的感受是：技术不是目的，解决问题才是。

手势控制看起来很酷，但如果没有实际应用场景，就是炫技。智能下载看起来很实用，但如果操作复杂，用户还是不会用。

所以我们在设计的时候，一直问自己：这个功能真的有用吗？用户会用吗？用起来方便吗？

可能不是每个功能都完美，但至少我们在努力让地理信息应用变得更友好。

关于平台

这是一个地理信息服务平台，主要功能是VR三维地球和智能影像下载。技术栈是Vue3 + Next.js + Flask，都是比较成熟的技术。

访问体验： https://www.seggis.cn/

功能特点：

• • VR三维地球：手势控制，沉浸式体验

• • 智能下载：可视化选择，自动处理坐标转换

• • 多坐标系支持：WGS84、GCJ02等

注意事项：

• • VR地球需要摄像头权限

• • 下载功能需要登录

• • 大文件下载可能需要等待

如果有什么问题，欢迎反馈。我们还在持续优化中。

这篇文章主要介绍了平台的核心功能和一些技术实现。代码示例都是简化版，实际代码会更复杂。如果对某个功能感兴趣，可以访问网站体验一下。

本公众号只做干货，分享实际项目中的点点滴滴

希望您阅读后有所收获

同时，也希望您能在下方给个赞赏

您的赞赏

是我持续创作的最大动力！

非常感谢！

点分享

点点赞

点在看