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.大功告成,运行看效果!至此完成简单的集成,要相信一句话只要锲而不舍最后终将成功。

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值