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
Jun 19 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 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
使用PHP维护文件系统
2006/10/09 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
php实现socket推送技术的示例
2017/12/20 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
node.js基础知识小结
2018/02/26 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
Python聚类算法之DBSACN实例分析
2015/11/20 Python
Python实现包含min函数的栈
2016/04/29 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
python中Apriori算法实现讲解
2017/12/10 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
Python进程池Pool应用实例分析
2019/11/27 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
Python如何测试stdout输出
2020/08/10 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
门卫岗位职责
2013/11/15 职场文书
洗煤厂厂长岗位职责
2014/01/03 职场文书
材料化学专业求职信
2014/07/15 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
专职安全员岗位职责
2015/04/11 职场文书
毕业设计致谢词
2015/05/14 职场文书
商业计划书范文
2019/04/24 职场文书