vue+cesium初探（一）加载cesium

参考文章1：https://www.cnblogs.com/laixiangran/p/4984522.html

参考文章2：https://blog.csdn.net/weixin_41940497/article/details/107904575?spm=1001.2014.3001.5501

参考文章3：https://blog.csdn.net/seelingzheng/article/details/105020577?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242

1.创建Vue项目

这个不必多说

2.安装cesium 依赖

npm i cesium --save

或

yarn add cesium

3.在项目根目录新增配置文件 vue.config.js,如下

主要看 1,2,3,4 部分，属于配置cesium的

const path = require("path");

const TerserPlugin = require('terser-webpack-plugin');

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

const webpack = require('webpack');

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

function resolve(dir) {

  return path.join(__dirname, dir);

}

module.exports = {

  // 打包后运行环境目录

  publicPath: process.env.NODE_ENV === "production" ? "/projectName/" : "/",

  lintOnSave: true, // eslint-loader 是否在保存的时候检查

  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件

  filenameHashing: true, // 文件hash

  devServer: {

    // port: 3306,

    open: true,

    proxy: {

      "/api": {

        // target: "http://xxx.xxx.xx.xxx:xxxx/", // 开发地址及端口号

        // target: "http://xxx.xxx.xx.xxx:xxxx/", // 测试地址

        target: "http://xxx.xxx.xx.xxx:xxxx/", // 正式服务器地址

        ws: true,

        changeOrigin: true,

        pathRewrite: {

        }

      },

      "/LocalDemoApi": {

        target: "http://localhost:8080", // 路径指向本地主机地址及端口号

        ws: true,

        changeOrigin: true,

        pathRewrite: {

          "^/LocalDemoApi": "/DemoData" // 路径转发代理

        }

      },

    }

  },

  /*

    配置vue-cli3项目，可以说是all in vue.config.js的。

    当然，封装、就一定会留个口给用户，去对底层进行自定义操作。

    vue.config.js的配置项中，有两个口，configureWebpack和chainWebpack。

    configureWebpack:

        是调整webpack配置最简单的一种方式，可以新增也可以覆盖cli中的配置。

    可以是一个对象：被 webpack-merge 合并到webpack 的设置中去

    也可以是一个函数：如果你需要基于环境有条件地配置行为，就可以进行一些逻辑处理，可以直接修改或

    新增配置，(该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。

    在函数内，你可以直接修改配置，或者返回一个将会被合并的对象。

    chainWebpack:

        这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则

    和具名插件，可以通过其提供的一些方法链式调用，在cli-service中就使用了这个插件

  */

  configureWebpack: {

    output: {

      sourcePrefix: ' ' // 1 让webpack 正确处理多行字符串配置 amd参数

    },

    amd: { // 2

      toUrlUndefined: true // webpack在cesium中能友好的使用require

    },

    resolve: {

      extensions: ['.js', '.vue', '.json'],

      alias: {

        'cesium': path.resolve(__dirname, cesiumSource) // 3 定义别名cesium后，cesium代表了cesiumSource的文件路径

      }

    },

    plugins: [ // 4

      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Workers'), to: 'Workers' }]),

      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),

      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]),

      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),

      new webpack.DefinePlugin({ // 5

        CESIUM_BASE_URL: JSON.stringify('./')

      })

    ],

    // module: {

    //   unknownContextRegExp: /^.\/.*$/,

    //   unknownContextCritical: false // 6 不让webpack打印载入特定库时候的警告

    // }

    optimization: {

      minimizer: [

        new TerserPlugin({

          terserOptions: {

            ecma: undefined,

            warnings: false,

            parse: {},

            compress: {

              drop_console: true,

              drop_debugger: false,

              pure_funcs: ['console.log'] // 移除console

            }

          },

        }),

      ]

    },

  },

  chainWebpack: config => {

    // 配置import 和 require 等路径别名,webpack中是通过 resolve.alias 来实现此功能的,通过set方法添加修改想要的alias 配置

    config.resolve.alias

      .set("@", resolve("src"))

      .set("spatial", resolve("public/SpatialData"))

      .set("assets", resolve("src/assets"))

      .set("components", resolve("src/components"));

  },

  // 修改浏览中的标签logo

  pwa: {

    iconPaths: {

      favicon32: "favicon.ico",

      favicon16: "favicon.ico",

      appleTouchIcon: "favicon.ico",

      maskIcon: "favicon.ico",

      msTileImage: "favicon.ico"

    }

  },

  // 多页面方式

  // pages: {

  //   index: {

  //     entry: './src/main',

  //     template: './public/index.html',

  //     fileName: 'index.html',

  //   },

  //   weui: {

  //     entry: './src/wmain',

  //     template: './public/windex.html',

  //   }

  // },

  css: {

    loaderOptions: {

      sass: {

        // implementation: require('sass'), // This line must in sass option

        // prependData: `@import "@/assets/scss/mixin.scss";` //引入全局变量

      },

    },

  },

};

4.配置main.js全局引入cesium相关文件

import Vue from 'vue'

import App from './App.vue'

import './registerServiceWorker'

import router from './router'

import store from './store'

Vue.config.productionTip = false

// 引入cesium相关文件

var cesium = require('cesium/Cesium.js');

var widgets = require('cesium//Widgets/widgets.css');

// 如果vue.config.js中不配置别名，就要用下面的方式按路径引入

// var cesium = require('cesium/Build/Cesium/Cesium.js');

// var widgets = require('cesium/Build/Cesium/Widgets/widgets.css');

Vue.prototype.cesium = cesium

Vue.prototype.widgets = widgets

new Vue({

  router,

  store,

  render: h => h(App)

}).$mount('#app')

5.修改helloWorld.vue

<template>

  <div id="container" class="box">

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

  </div>

</template>

<script>

export default {

  name: 'HelloWorld',

  props: {

    msg: String

  },

  data () {

    return {

    }

  },

  methods: {

    init () {

      const Cesium = this.cesium

      const viewer = new Cesium.Viewer('cesiumContainer');

      viewer._cesiumWidget._creditContainer.style.display = "none";// 隐藏版权

    }

  },

  mounted () {

    this.init()

  }

}

</script>

<style scoped lang="scss">

html,

body,

#cesiumContainer {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

  overflow: hidden;

}

.box {

  height: 100%;

}

</style>

最后运行：

巴特西

vue+cesium初探（一）加载cesium

最新文章

热门文章

巴特西

vue+cesium初探（一） 加载cesium

最新文章

热门文章

vue+cesium初探（一）加载cesium