vue中使用cesium

原创已于 2025-08-27 10:45:44 修改 · 909 阅读

21 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

于 2025-02-07 16:24:51 首次发布

1. 创建Vue项目

首先，确保你已经安装了Vue CLI。如果没有安装，可以使用以下命令进行安装：

bash

复制

npm install -g @vue/cli

然后创建一个新的Vue项目：

bash

复制

vue create my-cesium-app

进入项目目录：

bash

复制

cd my-cesium-app

2. 安装Cesium

在Vue项目中安装Cesium：

bash

复制

npm install cesium

3. 配置Cesium

Cesium需要一些额外的配置才能在Vue项目中正常工作。首先，在vue.config.js中添加以下配置：

javascript

复制

const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.join(__dirname, 'node_modules/cesium/Build/Cesium/Workers'),
            to: 'Workers'
          },
          {
            from: path.join(__dirname, 'node_modules/cesium/Build/Cesium/ThirdParty'),
            to: 'ThirdParty'
          },
          {
            from: path.join(__dirname, 'node_modules/cesium/Build/Cesium/Assets'),
            to: 'Assets'
          },
          {
            from: path.join(__dirname, 'node_modules/cesium/Build/Cesium/Widgets'),
            to: 'Widgets'
          }
        ]
      })
    ]
  }
};

4. 初始化Cesium

在Vue组件中初始化Cesium。首先，在src/components目录下创建一个新的组件，例如CesiumViewer.vue：

vue

复制

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

<script>
import * as Cesium from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';

export default {
  name: 'CesiumViewer',
  mounted() {
    this.initCesium();
  },
  methods: {
    initCesium() {
      // 设置Cesium的静态资源路径
      window.CESIUM_BASE_URL = '/';

      // 初始化Cesium Viewer
      const viewer = new Cesium.Viewer('cesiumContainer', {
        terrainProvider: Cesium.createWorldTerrain()
      });

      // 添加图片图层
      const imageryLayer = viewer.imageryLayers.addImageryProvider(
        new Cesium.SingleTileImageryProvider({
          url: 'https://example.com/path/to/your/image.jpg', // 替换为你的图片URL
          rectangle: Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75) // 设置图片的经纬度范围
        })
      );

      // 定位到图片所在区域
      viewer.camera.setView({
        destination: Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
      });
    }
  }
};
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100vh;
}
</style>

5. 在App.vue中使用CesiumViewer组件

在src/App.vue中使用刚刚创建的CesiumViewer组件：

vue

复制

<template>
  <div id="app">
    <CesiumViewer />
  </div>
</template>

<script>
import CesiumViewer from './components/CesiumViewer.vue';

export default {
  name: 'App',
  components: {
    CesiumViewer
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0;
  padding: 0;
}
</style>