vue2.0项目集成Cesium的实现方法


Posted in Javascript onJuly 30, 2019

安装cesium

在已有项目中执行,

npm i cesium

修改配置

build/webpack.base.conf.js

1、定义 Cesium 源码路径

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

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
//--cesium--配置
const cesiumSource = '../node_modules/cesium/Source';

2、在output 里加入sourcePrefix: ' ' 让webpack 正确处理多行字符串

3、配置 amd参数

4、module中在rules后添加 unknownContextCritical: false,

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: ["babel-polyfill", './src/main.js']
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production' ?
      config.build.assetsPublicPath : config.dev.assetsPublicPath,
    //--cesium--配置------------------------------------
    sourcePrefix: ' '
  },
  //--cesium--配置----------------------------------------
  amd:{
    toUrlUndefined: true
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      //--cesium--配置
      'cesium': path.resolve(__dirname, cesiumSource)
    }
  },
  module: {
    rules: [
    ...
    ],
    //--cesium--配置-------------------------------------
    //unknownContextRegExp: /^.\/.*$/
    unknownContextCritical: false,
  }
}

build/webpack.dev.conf.js

1、定义 Cesium 源码路径和Cesium Workers 路径

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

(注意这里的 node_modules 与webpack.base.conf.js的不同,前面没有../)

2、定义CESIUM_BASE_URL变量

3、在plugins 中加入下面插件,拷贝静态资源

plugins: [
  new webpack.DefinePlugin({
   'process.env': require('../config/dev.env'),
   //--cesium--配置-------------------------------------------
   'CESIUM_BASE_URL': JSON.stringify('') 
  }),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
  new webpack.NoEmitOnErrorsPlugin(),
  // https://github.com/ampedandwired/html-webpack-plugin
  new HtmlWebpackPlugin({
   filename: 'index.html',
   template: 'index.html',
   inject: true
  }),
  //--cesium--配置---------------------------------------------
  new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),   //flag
  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 CopyWebpackPlugin([ { from: 'ThirdParty', to: 'ThirdParty' } ]),

  // copy custom static assets
  new CopyWebpackPlugin([
   {
    from: path.resolve(__dirname, '../static'),
    to: config.dev.assetsSubDirectory,
    ignore: ['.*']
   }
  ])
 ]

build/webpack.prod.conf.js

1、定义

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

2、定义'CESIUM_BASE_URL'变量

3、在plugins 中加入下面插件,拷贝静态资源

plugins: [
  // http://vuejs.github.io/vue-loader/en/workflow/production.html
  new webpack.DefinePlugin({
   'process.env': env,
   //--cesium--配置--------------------------------------
   'CESIUM_BASE_URL': JSON.stringify('static')
  }),
  ...
  new HtmlWebpackPlugin({
    ...
  },
  //--cesium--配置--------------------------------------
  new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'static/Workers' } ]),//flag
  new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'static/Assets' } ]),
  new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'static/Widgets' } ]),
  new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' } ]),
  new CopyWebpackPlugin([ { from: 'ThirdParty', to: 'ThirdParty' } ]),
  ...

ThirdParty

在项目根目录新建文件夹ThirdParty,放入draco_decoder.wasm文件,在加载gltf模型文件需要用到

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js的逻辑运算符 ||
May 31 Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
详解vue.js的devtools安装
May 26 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 #Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 #Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 #Javascript
微信小程序渲染性能调优小结
Jul 30 #Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 #Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 #Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 #Javascript
You might like
php实现快速排序法函数代码
2012/08/27 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
详解PHP队列的实现
2019/03/14 PHP
PHP实现的策略模式示例
2019/03/20 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
js静态作用域的功能。
2006/12/25 Javascript
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
zTree树形插件异步加载方法详解
2017/06/14 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
Python Property属性的2种用法
2015/06/21 Python
python线程池threadpool实现篇
2018/04/27 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
环境建设实施方案
2014/03/14 职场文书
大学生就业策划书范文
2014/04/04 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
银行员工考核评语
2014/12/31 职场文书
转让协议书
2015/01/27 职场文书
法律服务所工作总结
2015/08/10 职场文书
清明扫墓感想
2015/08/11 职场文书
小组组名及励志口号
2015/12/24 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
使用Redis实现实时排行榜功能
2021/07/02 Redis