vue + cesium +webpack 创建及显示

最新推荐文章于 2024-05-29 09:53:59 发布

喜闻乐见 JavaScript

最新推荐文章于 2024-05-29 09:53:59 发布

阅读量210

点赞数

分类专栏： cesium 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/dxl395957/article/details/120845918

版权

cesium 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

创建一个基于webpack的vue项目

vue init webpack 你的项目名

安装cesium

npm i cesium --save

修改webpack配置

先修改webpack.base.conf.js文件

有五个地方需要修改

1. const cesiumSource = '../node_modules/cesium/Source'

2. sourcePrefix: ' '

3.   amd: {
       toUrlUndefined: true
     }

4.'cesium': path.resolve(__dirname, cesiumSource)

5.unknownContextCritical: false

然后修改webpack.dev.conf.js 文件

有两个地方需要修改

1. const cesiumSource = 'node_modules/cesium/Source'
   const cesiumWorkers = '../Build/Cesium/Workers'

2. new CopyWebpackPlugin([ 
        { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } 
   ]),
    new CopyWebpackPlugin([ 
        { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } 
    ]),
    new CopyWebpackPlugin([ 
        { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } 
    ]),
    new webpack.DefinePlugin({
      CESIUM_BASE_URL: JSON.stringify('')
    })

再修改webpack.prod.conf.js 文件

有两个地方需要修改

1. const cesiumSource = 'node_modules/cesium/Source'
   const cesiumWorkers = '../Build/Cesium/Workers'

2. new CopyWebpackPlugin([ 
        { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } 
   ]),
    new CopyWebpackPlugin([ 
        { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } 
    ]),
    new CopyWebpackPlugin([ 
        { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } 
    ]),
    new webpack.DefinePlugin({
      CESIUM_BASE_URL: JSON.stringify('./')
    })

接着需要修改config/index.js 文件

assetsPublicPath: '',

首先到 node_modules/cesium/Build/Cesium 文件，可以看到里面还有四个文件夹和Cesiumjs

直接复制Cesium文件夹粘贴到根目录的 static文件夹里

mainjs中不需要手动导入任何文件，默认就好，然后打开index.html，用script标签去引入cesiumjs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>cesium_webpack_demo</title>
    <script src="/static//Cesium/Cesium.js"></script>
    <link href="/static/Cesium/Widgets/widgets.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

最后新建一个cesiumContainer.vue

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

<script>
import "../../node_modules/cesium/Build/Cesium/Widgets/widgets.css";

export default {
  name: "cesiumContainer",
  data() {
    return {
      viewer: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.viewer = new Cesium.Viewer("cesiumContainer", {});
      this.startup()
    },
    startup() {
      var viewer = this.viewer
      viewer.animation.container.style.visibility = 'hidden' // 不显示动画控件
      viewer.timeline.container.style.visibility = 'hidden' // 不显示时间线控件
    },
  },
};
</script>

<style scoped>
</style>

现在运行代码

npm run start

喜闻乐见 JavaScript

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vue + cesium +webpack 创建及显示

创建一个基于webpack的vue项目vue init webpack 你的项目名安装cesiumnpm i cesium --save修改webpack配置先修改webpack.base.conf.js文件有五个地方需要修改1. const cesiumSource = '../node_modules/cesium/Source'2. sourcePrefix: ' '3. amd: { toUrlUnde...
复制链接

扫一扫