vue中使用Cesium——第一个Cesium页面

一 前言

市面上的前端框架中，Vue+Cesium 可谓是最佳搭档，一般做 Cesium B 端产品的公司都会使用 Vue，所以后续内容都将基于 Vue。想要在Vue中使用Cesium，我推荐使用 vue-cli-plugin-cesium，原因就是配置简单。具体的安装过程可以点击链接查看。

二 初始化

安装完vue-cli-plugin-cesium插件后，我们就可以写自己的cesium页面了。 首先定义一个div，id为cesiumContainer

<div id="cesiumContainer" class="cesium-container"></div>

定义初始化方法

init(){
  //此处不想使用默认的谷歌地图影像，所以使用此url指定ArcGIS的在线影像地图
  let url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
  let geogle = new Cesium.ArcGisMapServerImageryProvider({url:url});
  //此处填写你在cesium中注册的token
  Cesium.Ion.defaultAccessToken='你的token';
  this.viewer= new Cesium.Viewer('cesiumContainer',{
    baseLayerPicker: false,         //是否显示图层选择控件
    selectionIndicator: false,
    // geocoder: false,                //是否显示地名查找控件
    // sceneModePicker: false,         //是否显示投影方式控件
    // navigationHelpButton: false,    //是否显示帮助信息控件
    // homeButton: false,              //是否显示Home按钮
    // fullscreenButton: false,        //是否显示全屏按钮
    // timeline:false,                 //时间轴控件
    // animation:false,                //动画控件
    imageryProvider:geogle,
    // terrainProvider:new Cesium.createWorldTerrain({
    //   requestVertexNormals:true,
    //   requestWaterMask:true
    // }),
  });
},

三 效果预览

到此为止一个属于你自己的cesium页面就完成了，效果如下图所示

四 注意事项

需要注意的是你应该要为自己注册一个cesium账号（注册地址），并在项目中使用你自己的token，这样后续如果你想要使用一些平台提供的案例功能的时候你就可以将其添加进自己cesium中的仓库通过id进行调用（例如：纽约的3DTiles等等。本节并未使用，下节将会用到。）