Vue2+Cesium学习（1）从零开始搭建环境

最新推荐文章于 2024-04-26 17:54:13 发布

LionelMessi7

最新推荐文章于 2024-04-26 17:54:13 发布

阅读量989

点赞数 1

分类专栏： JavaScript、Cesium 文章标签： vue.js 前端 javascript

原文链接：https://blog.csdn.net/weixin_44857463/article/details/129224398

版权

JavaScript、Cesium 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

搜索了很多vue+cesium的教程，记录下成功的流程。

1、安装node.js

一路下一步就好，以下命令验证安装是否成功。

node -v

2、安装vue-cli

npm install -g @vue/cli

3、创建vue项目

创建一个文件夹用于放置该项目例如：cesium，在此目录下创建vue项目，运行以下代码。

cesium/cesium_demo

vue create cesium_demo

4、安装cesium

npm install cesium@1.95.0 -s

5、安装webpack

npm install copy-webpack-plugin@10.2.4

6、配置vue.config.js文件

const {defineConfig} = require('@vue/cli-service')
const CopyWebpackPlugin = require("copy-webpack-plugin");

const webpack = require("webpack");
const path = require("path");

let cesiumSource = "node_modules/cesium/Source";
let cesiumWorkers = "Workers";
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  configureWebpack: {
    externals: {
      'cesium': 'Cesium',
    },
    output: {
      sourcePrefix: " ", 
    },
    amd: {
      toUrlUndefined: true, 
    },
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        "@": path.resolve("src"),
        cesium: path.resolve(__dirname, cesiumSource),
      }
    },
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          {from: path.join(cesiumSource, cesiumWorkers), to: "Workers"},
          {from: path.join(cesiumSource, "Assets"), to: "Assets"},
          {from: path.join(cesiumSource, "Widgets"), to: "Widgets"},
          {from: path.join(cesiumSource, "ThirdParty/Workers"), to: "ThirdParty/Workers"}
        ]
      }),
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify("./"),
      }),
    ],
    module: {
      unknownContextCritical: false,
      unknownContextRegExp: /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/,
      rules: [
        {
          test: /\.js$/,
          use: {
            loader: '@open-wc/webpack-import-meta-loader',
          },
        },
      ]
    },
  },
  devServer: {
    hot: true,
    open: true,
    // 代理
    proxy: {
      '/api': {
        target: 'http://localhost:8888/',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
//这里修改你要使用的端口
    port: 8080,
  }
})

7、main.js引入css

import 'cesium/Widgets/widgets.css';

8、App.vue添加样式

html,body,#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

9、HelloWorld.vue添加代码

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

<script>
import * as Cesium from 'cesium/Cesium'
export default {
  name: 'HelloWorld',

  mounted(){
  this.initCesium()
  },
  methods:{
    initCesium:function (){
    //授权token
      Cesium.Ion.defaultAccessToken = '你的token'
      
      let viewer = new Cesium.Viewer('cesiumContainer')
    }
  }


}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

10、启动seve

在cesium_demo目录下运行一下代码，（VScode命令行）