vue+cesium示例：风场图(附源码下载)

基于cesium+vue实现风场图功能效果，适合学习Cesium与前端框架结合开发3D可视化项目。

demo源码运行环境以及配置

运行环境：依赖Node安装环境，demo本地Node版本:推荐v18+。

运行工具：vscode或者其他工具。

配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：
（1）下载demo环境依赖包命令：npm install
（2）启动demo命令：npm run dev
（3）打包demo命令： npm run build

技术栈

Vue 3.5.13

Vite 6.2.0

Cesium 1.128.0

示例效果

核心源码

<template>
  <div id="cesiumContainer" class="cesium-container">
  </div>
</template>
<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import * as Cesium from 'cesium';
// 声明Cesium Viewer实例
let viewer = null;
// 组件挂载后初始化Cesium
onMounted(async () => {
  const files = [
    "./wind/cesium-wind.js"
  ];
  loadScripts(files, function () {
    console.log("All scripts loaded");
    initMap();
  });
});
const loadScripts = (files, callback) => {
  // Make Cesium available globally for the scripts
  window.Cesium = Cesium;
  if (files.length === 0) {
    callback();
    return;
  }
  const file = files.shift();
  const script = document.createElement("script");
  script.onload = function () {
    loadScripts(files, callback);
  };
  script.src = file;
  document.head.appendChild(script);
};
const initMap = async () => {
  // 初始化Cesium Viewer
  viewer = new Cesium.Viewer('cesiumContainer', {
    // 基础配置
    animation: false, // 动画小部件
    baseLayerPicker: false, // 底图选择器
    fullscreenButton: false, // 全屏按钮
    vrButton: false, // VR按钮
    geocoder: false, // 地理编码搜索框
    homeButton: false, // 主页按钮
    infoBox: false, // 信息框 - 禁用点击弹窗
    sceneModePicker: false, // 场景模式选择器
    selectionIndicator: false, // 选择指示器
    timeline: false, // 时间轴
    navigationHelpButton: false, // 导航帮助按钮
    navigationInstructionsInitiallyVisible: false, // 导航说明初始可见性
    scene3DOnly: false, // 仅3D场景
    terrain: Cesium.Terrain.fromWorldTerrain(), // 使用世界地形
  });
  // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = "none";
  viewer.scene.globe.enableLighting = false;
  // 禁用大气层和太阳
  viewer.scene.skyAtmosphere.show = false;
  //前提先把场景上的图层全部移除或者隐藏 
  // viewer.scene.globe.baseColor = Cesium.Color.BLACK; //修改地图蓝色背景
  viewer.scene.globe.baseColor = new Cesium.Color(0.0, 0.1, 0.2, 1.0); //修改地图为暗蓝色背景
  // 设置抗锯齿
  viewer.scene.postProcessStages.fxaa.enabled = true;
  // 设置默认视图位置 - 默认显示全球视图
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(104.0, 30.0, 10000000.0), // 中国中部上空
    orientation: {
      heading: 0.0,
      pitch: -Cesium.Math.PI_OVER_TWO,
      roll: 0.0
    }
  });
  viewer.scene.debugShowFramesPerSecond = true;
  const windOptions = {
    colorScale: [
      'rgb(36,104, 180)',
      'rgb(60,157, 194)',
      'rgb(128,205,193 )',
      'rgb(151,218,168 )',
      'rgb(198,231,181)',
      'rgb(238,247,217)',
      'rgb(255,238,159)',
      'rgb(252,217,125)',
      'rgb(255,182,100)',
      'rgb(252,150,75)',
      'rgb(250,112,52)',
      'rgb(245,64,32)',
      'rgb(237,45,28)',
      'rgb(220,24,32)',
      'rgb(180,0,35)',
    ],
    frameRate: 16,
    maxAge: 60,
    globalAlpha: 0.9,
    velocityScale: 1 / 30,
    paths: 2000
  };
  let windLayer;
  fetch('./wind/2024122600.json')
    .then(res => res.json())
    .then(res => {
      windLayer = new CesiumWind.WindLayer(res, { windOptions });
      windLayer.addTo(viewer);
      // windLayer.remove();
    });
}
// 组件卸载前清理资源
onUnmounted(() => {
  if (viewer) {
    viewer.destroy();
    viewer = null;
  }
});
</script>