vue-cli3.0+cesium初始化构建项目

因为项目上需要使用vue+cesium，自己虽然不擅长前端尤其是对vue和cesium都是0基础，没办法只能硬着头皮上。vue和cesium扫盲后开始vue+cesium集成，功夫不负有心人，终于小有成果。

在这里分享一下使用<script>标签引用cesium的过程（个人比较青睐使用<script>标签引用cesium，因为这种方式操作cesium最接近jQuery中操作cesium，仅仅个人意见而已），在此省略vue-cli3.0创建项目的过程（如果需要可以自行百度）。

使用<script>标签引用cesium

1.搭建完vue项目后，自行下载cesium依赖文件，直接在public文件中引入cesium文件夹，然后在index.html中引入widgets.css；在body底部引入cesium.js，详情如下图：

2.在HelloWorld.vue中创建cesium实例

<template>
  <div id="cesiumContainer"></div>
</template>

<script>

export default {
  name: 'HelloWorld',
  mounted() {
	var earth = new Cesium.UrlTemplateImageryProvider({
		url:'images/taile_blue/{z}/{x}/{y}.jpg',
		fileExtension : "jpg",
	});
	var viewer = new Cesium.Viewer('cesiumContainer', {
		imageryProvider:earth,//地图数据
		baseLayerPicker:false,//关闭图层选择器
		animation: false, //是否显示动画控件
		baseLayerPicker: false, //是否显示图层选择控件
		geocoder: false, //是否显示地名查找控件
		timeline: false, //是否显示时间线控件
		sceneModePicker: true, //是否显示投影方式控件
		navigationHelpButton: false, //是否显示帮助信息控件
		infoBox: false, //是否显示点击要素之后显示的信息
		fullscreenButton: true,//是否显示全屏按钮
		selectionIndicator: false,//是否显示选中指示框
	});
  }
}
</script>

<style scoped>

</style>

3.到此最简单的集成工作已经完成。别高兴太早，如果使用了eslint 会报错，提示 Cesium 未定义，需要修改 package.json，设置no-undef。

4.大功告成，运行看效果！至此完成简单的集成，要相信一句话只要锲而不舍最后终将成功。