Vue + Cesium 从入门到实战：打造 WebGIS 3D 可视化

2023-10-25 21:58:32

前言

随着 WebGL 技术的蓬勃发展，基于 WebGIS 的 3D 可视化应用愈发受到关注。本文将指导大家使用 Vue 框架和 CesiumJS 库，从零开始搭建一个功能强大的 WebGIS 3D 可视化项目。

环境搭建

搭建 Vue + Cesium 开发环境所需以下步骤：

安装 Node.js（版本 14 及以上）
安装 Vue CLI
创建新的 Vue 项目
安装 CesiumJS

详细步骤请参考：

# 创建 Vue 项目
vue create my-vue-cesium-app

# 进入项目目录
cd my-vue-cesium-app

# 安装 CesiumJS
npm install cesium --save

Cesium 地图初始化

在 Vue 组件中，使用 Cesium Viewer 组件初始化地图：

<template>
  <div id="cesiumContainer" />
</template>

<script>
import { createViewer } from "cesium";

export default {
  mounted() {
    const viewer = createViewer("cesiumContainer", {
      // viewer 配置选项
    });
  },
};
</script>

数据加载与可视化

使用 Cesium 加载和可视化地理空间数据：

加载图像

viewer.imageryLayers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({
  url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
}));

加载地形

viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
  url: "https://assets.agi.com/stk-terrain/world"
});

加载模型

const model = viewer.entities.add({
  name: "Model",
  model: {
    uri: "path/to/model.gltf"
  }
});

事件交互

为地图添加事件交互功能：

单击事件

viewer.scene.canvas.addEventListener("click", function(event) {
  const pickedObject = viewer.scene.pick(event.clientX, event.clientY);
  if (pickedObject) {
    // 处理拾取对象
  }
});

鼠标移动事件

viewer.scene.canvas.addEventListener("mousemove", function(event) {
  const cartesian = viewer.camera.pickEllipsoid(event.clientX, event.clientY);
  if (cartesian) {
    // 处理笛卡尔坐标
  }
});

进阶功能

除了基础功能外，还可探索更高级的 Cesium 功能：

动态加载数据

const dynamicLayer = new Cesium.DynamicLayer({
  loadFeatures: (time, callback) => {
    // 加载实时数据
  }
});
viewer.dataSources.add(dynamicLayer);

自定义着色器

const fragmentShader =
  "uniform sampler2D texture;\n\
  varying vec2 v_texCoord;\n\
  void main() {\n\
    gl_FragColor = texture2D(texture, v_texCoord);\n\
  }";

const surfaceMaterial = new Cesium.Material({
  fabric: {
    type: "ShaderMaterial",
    uniforms: {
      texture: new Cesium.Texture({
        context: viewer.scene.context,
        url: "path/to/texture.png"
      })
    },
    fragmentShader: fragmentShader
  }
});