vue+cesium案例：智慧城市多种可视化特效(附源码下载)

基于vue和cesium实现的智慧城市，集成了多种可视化特效，包括建筑物高亮渲染、动态光锥、区域流光飞线、道路飞线、雷达扫描、光波扩散、光墙特效以及粒子烟花等。项目展示了现代智慧城市的数字孪生可视化效果，适合学习Cesium与前端框架结合开发3D可视化项目。

demo源码运行环境以及配置

• 运行环境：依赖Node安装环境，demo本地Node版本:推荐v16+。
• 运行工具：vscode或者其他工具。
• 配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：
  （1）下载demo环境依赖包命令：npm i
  （2）启动demo命令：npm run dev
  （3）打包demo命令： npm run build

技术栈

• Vue 3.5.13
• Vite 4.4.5
• Cesium 1.93.0
• cesium-navigation-es6 3.0.8
• GSAP 3.12.2
• Turf.js 6.5.0

示例效果

核心源码

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

<script>
import * as Cesium from "cesium";
import CesiumNavigaion from "cesium-navigation-es6";
import "./Widgets/widgets.css";
import initViewer from "./cesium/initViewer";
import modifyBuild from "./cesium/modeifyBuild";
import MousePosition from "./cesium/MousePosition";
import modifyMap from "./cesium/modifyMap";
import LightCone from "./cesium/LightCone";
import RectFlyLight from "./cesium/RectFlyLight";
import RoadLightLine from "./cesium/RoadLightLine";
import RadarLight from "./cesium/RadarLight";
import LightSpread from "./cesium/LightSpread";
import LightWall from "./cesium/LightWall";
import ParticleLight from "./cesium/ParticleLight";

export default {
  name: 'App',
  mounted() {
    // 初始化cesium
    var viewer = initViewer();
    // 创建建筑
    modifyBuild(viewer);
    // 根据鼠标位置生成经纬度值
    let mousePosition = new MousePosition(viewer);
    // 设置导航罗盘的配置
    var options = {
      // 启用罗盘
      enableCompass: true,
      // 是否启用缩放
      enableZoomControls: false,
      // 是否启用指南针外环
      enableCompassOuterRing: true,
      // 是否启用距离的图例
      // enableDistanceLegend: false,
    };
    // 初始化导航罗盘
    let navigation = new CesiumNavigaion(viewer, options);
    // 修改地图的底色
    modifyMap(viewer);
    // 添加动态的光锥特效
    let lightCone = new LightCone(viewer);
    // 创建区域上升流光飞线
    let rectFlyLight = new RectFlyLight(viewer);
    // 创建道路飞线
    let roadLightLine = new RoadLightLine(viewer);
    // 创建雷达
    let radarLight = new RadarLight(viewer);
    // 6边形光波扩散特效
    let lightSpread = new LightSpread(viewer);
    // 光墙特效
    let lightWall = new LightWall(viewer);
    // particleLight,创建烟花粒子
    let particleLight = new ParticleLight(viewer, Cesium.Color.RED);
    let particleLight1 = new ParticleLight(viewer, Cesium.Color.AQUA);
    let particleLight2 = new ParticleLight(viewer, Cesium.Color.GREEN);
  }
}
</script>

<style>
#cesiumContainer {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

源码下载

GIS之家的学习交流圈