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 相关文章推荐
Javascript 按位取反运算符 (~)
Feb 04 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 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
资料注册后发信小技巧
2006/10/09 PHP
php预定义常量
2006/12/25 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
python3 shelve模块的详解
2017/07/08 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
Django中Middleware中的函数详解
2019/07/18 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
编辑个人求职信范文
2013/09/21 职场文书
运动会领导邀请函
2014/01/10 职场文书
学生出入校管理制度
2014/01/16 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
二婚主持词
2015/06/30 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android