首先列出帮助的网站
cesium中文社区
环岛公路博客
然后是导入过程
首先可以用vue-cli创建项目
或者安装vue-cli
npm install vue-cli -g
然后推荐个插件vue-cli-plugin-cesium
vue-cli-plugin-cesium的GitHub地址
这个也不是单纯npm就可以的了,我把我的安装步骤说明一下,当然,先看看上面的网站也是挺好的
第一步就是建个工程
然后选择下一步默认就行
然后按需要导入自己想要的插件
然后用脚手架下载vue-cli-plugin-cesium
然后配置插件
(这个是我后来才发现的快捷配置)
或npm上面的插件
// npm
npm install --save-dev vue-cli-plugin-cesium
然后
一定要做的一步,当然这个也是可以页面导入的
vue add vue-cli-plugin-cesium
然后会有三个询问,
- 一个是问你时候初始化
- 二是问你css时候全局导入
- 三是问你时候导入一个例子
然后我是全选是
然后vscode打开项目(或者你使用的编译器)
然后还有一个需要改动的地方
环岛公路的博客地址
非常感谢,助我脱困
***vue+cesiumjs环境搭建【import引入】
之前写了一遍博客关于vue+cesium的搭建,后面是在index.html里通过script引入的,但是后面要用到指南针的时候发现指南针没法引入了
之前的链接: https://www.cnblogs.com/reround/p/11943717.html
后来慢慢调试发现原来是cesium的版本问题
我在11月底安装的cesium的版本是1.63.0 12月多安装的版本是1.64.0
这个两个 版本都是没法通过
import Cesium from 'cesium/Cesium'
这样来引入的
但是我们换成1.61.0 就不会出现这样的问题
首先卸载掉你项目的cesium
npm uninstall cesium
卸载完成后再去安装1.61.0的版本
npm install cesium@1.61.0 --save
然后可以把static下的cesium文件夹删除 index.html里的script引入删掉
直接在mainjs里
import Cesium from 'cesium/Cesium'
import '../node_modules/cesium/Build/Cesium/Widgets/widgets.css'
Vue.prototype.Cesium = Cesium
通过import来引入 这样后面的指南针也可以引入了***
可以看出cesium版本1.61版本才支持导入
so
先卸载
npm uninstall cesium
再下载1.61.0版本
npm install cesium@1.61.0 --save
然后写个vue页面单独引用插件给的例子
<template>
<div class="about">
<CesiumViewer />
</div>
</template>
<script>
import CesiumViewer from '@/components/CesiumExample/No01-init.vue'
export default {
components:{
CesiumViewer
}
}
</script>
<style scoped>
</style>
然后这是我写的cesium的小示例,根据他原本的例子No01-init.vue改的,不懂的可以找cesium中文社区,非常详细
<template>
<div class="map-box">
<div id="cesiumContainer"></div>
</div>
</template>
<script>
export default {
name: "",
mounted() {
let that = this;
// var viewer = new Cesium.CesiumWidget('cesiumContainer')
// eslint-disable-next-line no-undef
var viewer = new Cesium.Viewer("cesiumContainer", {
//控制是否显示控件
// geocoder: false,
// homeButton: false,
// sceneModePicker: false,
// // baseLayerPicker: false,
// navigationHelpButton: false,
// animation: false,
// timeline: false,
// fullscreenButton: false,
// vrButton: false
});
var GuangZhou = viewer.entities.add({
name: "广州",
position: this.Cesium.Cartesian3.fromDegrees(113.2, 23.1, 300000.0),
// box: {
// dimensions: new this.Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
// material: this.Cesium.Color.RED.withAlpha(0.5),
// outline: true,
// outlineColor: this.Cesium.Color.BLACK
// }
point: {
//表示点
heightReference: this.Cesium.HeightReference.CLAMP_TO_GROUND,
color: this.Cesium.Color.WHITE, //点的颜色
pixelSize: 10, //点的大小
outlineColor: this.Cesium.Color.RED, //就是所谓的border-color
outlineWidth: 5 //border-width
},
label: {
//表示点的描述
text: "广州", //点的文字
font: "14pt Source Han Sans CN", //文字的大小和字体
fillColor: this.Cesium.Color.fromCssColorString('#ffffff'), //文字的颜色
backgroundColor: this.Cesium.Color.AQUA, //给文字添加背景颜色
// 注意,这里的this.Cesium.Color后面只能接颜色的英文,不能接十六进制的颜色
// 如果你需要用到十六进制的颜色,可以使用这样来表示:
// fillColor: this.Cesium.Color.fromCssColorString('#f00')
showBackground: false, //若是想给文字添加背景颜色 这行必不可少
style: this.Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 1,
//垂直位置
heightReference: this.Cesium.HeightReference.NONE,
verticalOrigin: this.Cesium.VerticalOrigin.TOP,
pixelOffset: new this.Cesium.Cartesian2(50, 20) //偏移度 0 表示x轴上的偏移量 10表示y轴上的偏移量
},
polylineVolume: {
positions: this.Cesium.Cartesian3.fromDegreesArray([
113.27,
23.13,
120.52,
30.4,
116.4,
39.9
]),
shape: that.computeCircle(6000.0),
material: this.Cesium.Color.BLUE
}
});
var ShangHai = viewer.entities.add({
name: "上海",
position: this.Cesium.Cartesian3.fromDegrees(120.52, 30.4, 300000.0),
point: {
//表示点
heightReference: this.Cesium.HeightReference.CLAMP_TO_GROUND,
color: this.Cesium.Color.WHITE, //点的颜色
pixelSize: 10, //点的大小
outlineColor: this.Cesium.Color.RED, //就是所谓的border-color
outlineWidth: 5 //border-width
},
label: {
//表示点的描述
text: "上海", //点的文字
font: "14pt Source Han Sans CN", //文字的大小和字体
fillColor: this.Cesium.Color.fromCssColorString('#ffffff'), //文字的颜色
backgroundColor: this.Cesium.Color.AQUA, //给文字添加背景颜色
showBackground: false, //若是想给文字添加背景颜色 这行必不可少
style: this.Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 1,
//垂直位置
heightReference: this.Cesium.HeightReference.NONE,
verticalOrigin: this.Cesium.VerticalOrigin.TOP,
pixelOffset: new this.Cesium.Cartesian2(0, 20) //偏移度 0 表示x轴上的偏移量 10表示y轴上的偏移量
}
});
var BeiJing = viewer.entities.add({
name: "北京",
position: this.Cesium.Cartesian3.fromDegrees(116.4, 39.9, 300000.0),
point: {
//表示点
heightReference: this.Cesium.HeightReference.CLAMP_TO_GROUND,
color: this.Cesium.Color.WHITE, //点的颜色
pixelSize: 10, //点的大小
outlineColor: this.Cesium.Color.RED, //就是所谓的border-color
outlineWidth: 5 //border-width
},
label: {
//表示点的描述
text: "北京", //点的文字
font: "14pt Source Han Sans CN", //文字的大小和字体
fillColor: this.Cesium.Color.fromCssColorString('#ffffff'), //文字的颜色
// 注意,这里的this.Cesium.Color后面只能接颜色的英文,不能接十六进制的颜色
// 如果你需要用到十六进制的颜色,可以使用这样来表示:
// fillColor: this.Cesium.Color.fromCssColorString('#f00')
backgroundColor: this.Cesium.Color.AQUA, //给文字添加背景颜色
showBackground: false, //若是想给文字添加背景颜色 这行必不可少
style: this.Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 1,
//垂直位置
heightReference: this.Cesium.HeightReference.NONE,
verticalOrigin: this.Cesium.VerticalOrigin.TOP,
pixelOffset: new this.Cesium.Cartesian2(0, 20) //偏移度 0 表示x轴上的偏移量 10表示y轴上的偏移量
}
});
viewer.zoomTo(viewer.entities);
// eslint-disable-next-line no-console
console.log(viewer);
console.log(GuangZhou);
console.log(ShangHai);
console.log(BeiJing);
},
methods: {
computeCircle: function(radius) {
var positions = [];
for (var i = 0; i < 360; i++) {
var radians = this.Cesium.Math.toRadians(i);
positions.push(
new this.Cesium.Cartesian2(
radius * Math.cos(radians),
radius * Math.sin(radians)
)
);
}
return positions;
}
}
};
</script>
<style scoped>
.map-box {
width: 100%;
height: 100%;
}
#cesiumContainer {
width: 100%;
height: 100%;
}
</style>
这是我的main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import 'cesium/Widgets/widgets.css'
// import Cesium from '../node_modules/cesium/Build/Cesium'
import Cesium from 'cesium/Cesium'
Vue.prototype.Cesium = Cesium
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')