vue 使用cesium

最新推荐文章于 2025-10-18 19:19:20 发布

原创

最新推荐文章于 2025-10-18 19:19:20 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍了如何在Vue项目中使用Cesium，包括安装步骤、在main.js中引入、配置vue.config.js，以及实现地图定位和叠加图层功能。通过在methods中编写代码，可以实现三维地球效果，并能根据需求定位特定区域或加载JSON数据划定地图区域。

首先呢我也是第一次接触哈所以也有好多不熟练的地方😭多多鼓励谢谢大家啦

1.首先第一步要安装cesium

$ npm install cesium

2.接着在main.js 中引入cesium

// cesium 初始化引入
import "cesium/Build/Cesium/Widgets/widgets.css";
import * as cesium from "cesium";

3. 现在就有点复杂了哈创建vue.config.js

// const path = require("path");
// eslint-disable-next-line no-unused-vars
// const TerserPlugin = require('terser-webpack-plugin');
 

//这里面设计到webpack  要记得安装webpack
const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
// const cesiumSource = './node_modules/cesium/Source'

// eslint-disable-next-line no-unused-vars
// function resolve(dir) {
//     return path.join(__dirname, dir);
// }
// const { defineConfig } = require("@vue/cli-service");
module.exports = {
  devServer: {
    // port: 8888,
    open: true,
  },
  // defineConfig: {
  //   transplieDependencies: true,
  //   lintOnSave: false,
  // },
  configureWebpack: {
    output: {
      sourcePrefix: "",
    },
    plugins: [
      // 4
      //     // new CopyWebpackPlugin([{ from: p