阅读 543

基于vue-cli4脚手架搭建的cesium所踩的坑(2020年6月1日 更新)

这一段是吐槽,不想看这段的请直接往下跳

使用过cesium地图框架的小伙伴都知道1.6版本之前的都是AMD模式的框架,后来改成ES6模块化,所以就想着如果是模块化开发了是不是可以用下当下前端流行的那些框架呢,react、vue、ng等等;

一般开这这种先河的小伙伴还是有不少的,就在Git社区寻找了下,但是发现有的不是运行不了,就是有的依赖包安装不了,不论是搭tizi还是镜像都不管用,要么就是脚手架3.0以下的,或者就是用CDN方式引入,这些都不太符合我的预期,我就是想用npm包用4.0脚手架有错嘛,既然这样子那就只好自己搭建了,然后就找了下网上的一些相关资料,发现相关资料比较老,都是基于2.x的脚手架的文章,今儿我就更新个新篇章;

工具及依赖包相关版本

工具版本

node>=8.9
npm>= 3.0.0
复制代码

所需依赖npm包及版本

"cesium": "^1.64.0","copy-webpack-plugin": "^5.0.5",
"webpack": "^4.41.2"
 vue脚手架(vue-cli)是4.1.1复制代码

安装及配置步骤

先说下之前的,按照现在网上大部分教程就是说改webpack文件之类的,但是脚手架4.0以后就合并成一个了,目录啥的都优化的更简洁了,个人比较喜欢新版本的目录及相关配置,好了说本文重点,敲黑板~会vue的前三个跳过

  1. 先根据脚手架创建项目
vue create xxx  //xxx是你的项目名称
复制代码
  1. 自己不懂配置的就直接一键回车
  2. vue创建项目操作参考链接 基于vue-cli创建项目
  3. 上面说的几个依赖包如果没安装全局就安装相关依赖 ,这里就不叙述了
  4. 直接使用脚手架创建项目是没有vue.config.js这个文件,需要自己创建里面代码配置如下
const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");  
module.exports = {
	configureWebpack: {
		resolve: {
			alias: {
				'@': resolve('src')
			}
		},
		amd: {
			// cesium 2
			toUrlUndefined: true
		},
		module: {
			// cesium 3 不加这个配置会报require引入警告
			unknownContextCritical: false
		},
		// cesium 4
		plugins: [
			new CopyWebpackPlugin([
            {
              from: 'node_modules/cesium/Build/Cesium/Workers',
              to: 'cesium/Workers'
            }
          ]),
          new CopyWebpackPlugin([
            {
              from: 'node_modules/cesium/Build/Cesium/ThirdParty',
              to: 'cesium/ThirdParty'
            }
          ]),
          new CopyWebpackPlugin([
            { from: 'node_modules/cesium/Build/Cesium/Assets', to: 'cesium/Assets' }
          ]),
          new CopyWebpackPlugin([
            {
              from: 'node_modules/cesium/Build/Cesium/Widgets',
              to: 'cesium/Widgets'
            }
          ]),
          new webpack.DefinePlugin({
            // Define relative base path in cesium for loading assets
            CESIUM_BASE_URL: JSON.stringify('./cesium')
          })
		],
		optimization: {
			minimize: process.env.NODE_ENV === "production" ? true : false
		}
	}
};
复制代码
  1. 然后在main.js我做的全局导入css
此处已废弃
import 'cesium/Widgets/widgets.css'
let Cesium = require('cesium/Cesium');
Vue.prototype.Cesium = Cesium
复制代码
  1. 在组件内引入就new this.Cesium.Viewer()
  2. 根据群友网友提供,修改代码相关操作如下,最新配置写法(2020年6月1日 13:48:11)
  3. 在main.js引入相关的cesium都移除,在组件编写cesium组件内直接import
import { Viewer, UrlTemplateImageryProvider } from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'

const viewer = new Viewer('cesiumContainer', {
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        navigationHelpButton: false,
        sceneModePicker: false,
        timeline: false,
        animation: false,
        imageryProvider: googleMapProvider
    })
复制代码

总结

最后总结下,当时搭建这个确实踩了一些坑,就是诸如网上说的那些常见报错,而且很多文章都是他抄他,他搬他的,不过也都解决了,写出来感觉也没什么东西,但是确实是被路径啊,找不到包啊,声明之类的报错弄的烦躁,然后当时网上出了那些文章的小伙伴也不分享的实例,我就好了,下面分享个实例,结合脚手架的纯净版的,可以自己导入UI框架直接撸了。

更新时间 2020年6月1日 13:46:12

大家儿童节快乐

也感谢 @狼丶先森 远程协助,他vue玩的溜呀。

地址 github

如果没有github的就用gitee