技术栈： Cesium@1.99 + Vue2
本系列将用「实用干货 + 完整源码」的形式，带你循序渐进掌握三维 GIS 核心技能，持续探索Cesium的高级功能，相关源码全部免费公开，请关注微信公众号。
关注【Hello summer】，开启GIS学习
获取系统、实用的 GIS 干货
【本篇将介绍如何搭建Cesium开发环境，并开始第一个Cesium项目。】
1.1创建一个vue项目
进入cmd 使用vue ui进入vue项目创建导航页面
选择目录，创建vue项目，包管理器根据使用习惯自己选择，我这里使用的是npm。然后选择一个模板，我这里使用的是vue2，勾选了一个router。这样一个vue项目就创建好了2.1 安装cesium
用vscode打开vue项目，终端执行命令安装包，这里指定安装1.99版本的cesium
npm installnpm install cesium@1.99
2.2 复制Cesium
在node_modules文件夹下找到cesium->Build->Cesium文件夹；将Cesium文件夹复制到public📂下。
2.3 引入cesium
在index.html引入cesium的css样式文件和js文件
<!DOCTYPE html><htmllang=""> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <linkrel="icon"href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> <linkrel="stylesheet"href="./Cesium/Widgets/widgets.css"> <scripttype="text/javascript"src="./Cesium/Cesium.js"></script> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <divid="app"></div> <!-- built files will be auto injected --> </body></html>
注意：在package.json中将cesium定义为一个全局变量。
"globals": { "Cesium": true }
3.1 搭建cesium的第一个页面
这样就可以在vue页面里使用cesium啦,在HomeView.vue里新建一个id为cesiumContainer的div，然后将cesium与挂接到该容器。这样一个最简单的cesium页面就完成啦。
<template> <div> <divid="cesiumContainer"></div> </div></template><script>// @ is an alias to /srcexport default { name: 'HomeView', components: { }, data() { return { viewer: null, } }, mounted() { this.init(); }, methods: { init() { Cesium.Ion.defaultAccessToken = "你的key"; this.viewer = new Cesium.Viewer('cesiumContainer', { homeButton: true, sceneModePicker: true, baseLayerPicker: false, // 影像切换 animation: true, // 是否显示动画控件 infoBox: false, // 是否显示点击要素之后显示的信息 selectionIndicator: true, // 要素选中框 geocoder: true, // 是否显示地名查找控件 timeline: true, // 是否显示时间线控件 fullscreenButton: true, shouldAnimate: true, navigationHelpButton: true, // 是否显示帮助信息控件 }); this.viewer.cesiumWidget.creditContainer.style.display = 'none';//去除logo }, },}</script><style>#cesiumContainer { width: 100vw; height: 100vh;}</style>
4.1 Token申请
cesium官网：https://cesium.com/
在官网上注册一个账号，登录申请即可
