cesium的使用
安装
建议使用vue的cesium插件:vue-cli-plugin-cesium。vue add命令可零配置添加cesium: vue add vue-cli-plugin-cesium
报错
添加完成后如果报错cesium未定义(Eslint 语法校验问题),则在package.json中添加以下代码:
{
"dependencies": {},
"devDependencies": {},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"no-undef": 0
}
}
}
使用
1、使用cesium前需要在此处(https://cesium.com/ion/tokens )获取cesium的账户token。
2、添加cesium的初始球体组件:
<template>
<!--cesium球体组件-->
<div
class="cesium-div"
id="cesiumContainer">
</div>
</template>
<script>
import myToken from "../jsonData/myCesiumToken.json";//引入账户token
export default {
name: '',
props: {},
mounted() {
Cesium.Ion.defaultAccessToken = myToken.token;
const viewer = new Cesium.Viewer('cesiumContainer', {
geocoder:true,//控制右上角的查找工具
homeButton:true,//控制右上角的home图标
sceneModePicker:false,//控制右上角的选择视角模式,2d,3d
baseLayerPicker:false,//控制右上角的图层选择器
navigationHelpButton:false,//控制右上角的导航帮助按钮
animation:true,//控制左下角的动画器件
timeline:true,//控制下方时间线
fullscreenButton:false,//右下角全屏按钮
vrButton:false//右下角vr按钮
});
viewer._cesiumWidget._creditContainer.style.display="none"//取消版权信息
},
}
</script>
<style scoped>
#cesiumContainer{
height: 100vh;width: 100vw;
}
</style>
转载请标注来源与原作者