!若不是vue-cli3版本以上需要安装最新版本
npm install -g @vue/cli3
一丶vue create cesium-demo1 (创建一个项目,名称是cesium-demo1)
二丶下载插件vue add vue-cli-plugin-cesium
vue add vue-cli-plugin-cesium
三丶选择Cesium版本 (我选的1.65)
然后一直回车,发现文件多了一个
四丶 打开app.vue文件,将helloword组件删掉换成生成的组件
npm run serve
会出现这个样子
因为我们没设置自己的token,所以地图没出来,我们继续找到这个No01-init.vue,改成如下代码:
mounted() {
let url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
let geogle = new Cesium.ArcGisMapServerImageryProvider({url:url});
//此处填写你在cesium中注册的token
Cesium.Ion.defaultAccessToken='你的token';
this.viewer= new Cesium.Viewer('cesiumContainer',{
baseLayerPicker: false, //是否显示图层选择控件
selectionIndicator: false,
imageryProvider:geogle,
});
}
};
然后Eslint会报红,Ceisum发红是因为插件内部使用了 Webpack 的内置模块 ProvidePlugin 来做到使用 Cesium 对象时将不再需要 import 或 require 引入,而一般我们在使用 VueCLI 创建项目时会默认带上 Eslint,Eslint 语法检验会认为 Cesium 是一个未声明的变量,于是抛出了错误
package.json
中配置 Eslint 规则允许 no-undef
,如下所示,在 package.json
中 eslintConfig
字段下的 rules
配置 "no-undef": 0
,在不关掉 Eslint 的情况下单独配置允许未声明的变量
{
"dependencies": {},
"devDependencies": {},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"no-undef": 0
}
}
}
3、保存后重新运行发现不报红了,点开页面看下结果:
相当哇塞,赶紧动手试一试吧!