基於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之家的學習交流圈