【vue2 + Cesium】使用Cesium、添加第三方地图、去掉商标、Cesium基础配置、地图放大缩小事件、获取可视区域、层级、高度

参考文章：
vue2 使用 cesium 篇【第一篇】
vue2 使用 cesium 【第二篇-相机视角移动+添加模型】

vue2 项目模版：
vue2-common

安装 cesium

npm install cesium --save

这个就很简单，只需要一句简简单单的命令就可以实现在 vue 项目中安装 cesium 了。

这个样子嘞，就是安装完成了，会开发 vue 的都晓得哈。

看一下依赖包里面，也成功下载了 cesium 的依赖。

接入项目 cesium

node_modules中找到cesium,复制build文件夹下Cesium文件夹到public文件夹下。复制完后就是下图

好的第一步完成！

然后第二步，在项目 index.html 文件中，head 标签里面，引入 cesium 的全局样式和cesium 源码。

<link rel="stylesheet" href="./Cesium/Widgets/widgets.css">
<script type="text/javascript" src="./Cesium/Cesium.js"></script>

就是下面这个样子哈。

好的，完成之后我们重新启动一下项目，记得哈，重启一下项目！

使用 cesium

vue文件中 粘贴代码

<template>
  <div id="my-map"></div>
</template>

<script>


export default {
  name: "HomeView",

};
</script>

<style scoped>
#my-map {
  width: 100%;
  height: 100%;
  background-color: black;
}
</style>

随后刷新页面，得到一个黑色的页面

非常好，效果出来了，到现在还没有用到一点儿的 cesium 别急，下面开始哈。

我们写一个 init() 方法，然后在 init() 方法里面呢，实现把这个 div 渲染成一个蓝星。

   init() {
      this.viewer = new Cesium.Viewer('my-map', {
        homeButton: false,
        sceneModePicker: false,
        baseLayerPicker: false, // 影像切换
        animation: true, // 是否显示动画控件
        infoBox: false, // 是否显示点击要素之后显示的信息
        selectionIndicator: false, // 要素选中框
        geocoder: false, // 是否显示地名查找控件
        timeline: true, // 是否显示时间线控件
        fullscreenButton: false,
        shouldAnimate: false,
        navigationHelpButton: false, // 是否显示帮助信息控件
      });
    }

完成！蓝星加载出来了！

到此处完整vue代码

<template>
  <div id="my-map"></div>
</template>

<script>
  export default {
    name: "HomeView",
    methods: {
      init() {
        this.viewer = new Cesium.Viewer("my-map", {
          homeButton: false,
          sceneModePicker: false,
          baseLayerPicker: false, // 影像切换
          animation: true, // 是否显示动画控件
          infoBox: false, // 是否显示点击要素之后显示的信息
          selectionIndicator: false, // 要素选中框
          geocoder: false, // 是否显示地名查找控件
          timeline: true, // 是否显示时间线控件
          fullscreenButton: false,
          shouldAnimate: false,
          navigationHelpButton: false, // 是否显示帮助信息控件
        });
      },
    },
    mounted() {
      this.init();
    },
  };
</script>

<style scoped>
  #my-map {
    width: 100%;
    height: 100%;
    background-color: black;
  }
</style>

Cesium 相关资料

首先分享一些资料给各位，希望有用：

Cesium 官网：https://cesium.com/
Cesium 官网 API：https://cesium.com/learn/cesiumjs/ref-doc/
Cesium 中文API： http://cesium.xin/cesium/cn/Documentation1.62/
Cesium 官方案例：https://sandcastle.cesium.com/
Cesium 技能树：https://www.wenjiangs.com/doc/egyaeyav
Cesium 中文社区：http://cesium.xin/
3D 模型下载网站：https://sketchfab.com/feed

上边这部分网站呢，也许对你有用，需要的话可以看一下。

cesium token 申请和设置

使用cesium需要申请一个token值，这个地方就和百度地图或者是高德地图一样，需要一个 token 秘钥来进行操作，确保在使用 cesium 的过程中不会出现 token 过期造成地图加载不出来的问题。当然了，现在看我们是一点问题没有，蓝星地球可以正常加载，但是随着我们测试编写的时间增长，调用 cesium 图层次数过多，就会出现图层加载不出来，就是超次数，这个是时候，我们地球可能就白了，因为没有实时图层返回了，这个时候就需要 token，所以说我们现在就设置上 token，防止这种事情的发生。

首先我们需要去 cesium 官网去申请一个 token，方法很简单：

cesium申请token请点击 这里

登录之后

然后我们就成功的获取到了一个 cesium 的秘钥，然后我们在 TCesium.js 文件中的构造器函数中，加载这个 token 就可以了。

Cesium.Ion.defaultAccessToken = '你申请的cesium的token'

就像下面这个样子：

好的，这样子的话， token 就申请使用完成了。

cesium 基础配置

相关API

我们在上面的代码配置了一些基本的设置项，稍微过一下子哈。

this.viewer = new Cesium.Viewer("my-map", {
      homeButton: true,
      sceneModePicker: true,
      baseLayerPicker: true, // 影像切换
      animation: false, // 是否显示动画控件
      infoBox: false, // 是否显示点击要素之后显示的信息
      selectionIndicator: false, // 要素选中框
      geocoder: true, // 是否显示地名查找控件
      timeline: false, // 是否显示时间线控件
      fullscreenButton: false,
      shouldAnimate: false,
      navigationHelpButton: false, // 是否显示帮助信息控件
});

就是上面这一块，我写了几个常用的，先全部设置为 false，就是不使用，我们稍微说几个常用的看一下哈。

homeButton

我们先看 homeButton 参数，我们如果设置为 true。这个是主页按钮，啥意思呢，就是我们加载出蓝星之后，我们可以鼠标转动嘛、放大缩小啥的。如果我们设置 homeButton 为 true 之后，在页面的右上角就会出现一个主页按钮，当我们改变过蓝星之后，点击这个按钮，会回到我们最开始的视角。

sceneModePicker

sceneModePicker 是地图显示的维度控制，他提供 二维平面 和 三维球体 两种方式。当设置为 true 的时候，右上角会提供一个维度切换的按钮，帮助我们进行蓝星维度的展示切换功能。

baseLayerPicker

Cesium 为我们提供了一些底图，这个 baseLayerPicker 设置为 true 的时候，右上角会有一个图层切换的按钮，但是我觉得没用，不是没用，不好用，一般都是自己写，不用他默认提供的。

animation 和 timeline

这两个是时间轴相关的，一般用不到，但是不保险，需要的时候没有还真不行，这两个要同时设置，true 的时候都 true，false 的时候都是 false。当然也不绝对哈，就是 timeline 的时候呢，就开始时间轴功能，animation 就是显示时间轴的控件，可以直观的控制时间轴的进度、速度之类的。

selectionIndicator

selectionIndicator 是要素选中框，啥意思呢，就比如说我的蓝星上有模型，那么我点击蓝星上模型的时候呢，就会出现一个框框把模型给框住，我觉得没必要。

fullscreenButton

这个是全屏按钮，设置为 true 的时候呢，右下角就会出现一个全屏按钮，点击之后，cesium 就会进行全屏显示。

infoBox

这个是要素信息框，一般都是 false，啥呢，就是蓝星上面有一个模型，点击模型的时候会显示这个模型的信息之类的，一般不用他自带的，一般是自己写或者是自己改，一般设置 false 就可以。

geocoder

这个是地名查找组件，开启后，右上角会出现一个查询地址的组件，但是不好用，一般情况下，不显示就行。

navigationHelpButton

这是一个帮助按钮，如果设置为 true 的时候，右上角会有一个帮助的提示，这个关闭就可以。

多余样式隐藏

我们使用 cesium 的时候发现哈，左下角会有一些版权信息，我们想隐藏的话也很简单。

只需要在 viewer 创建完成之后，把他的版权 DOM 设置为 none 就可以了

this.viewer._cesiumWidget._creditContainer.style.display = 'none'

这样界面就干净多了，除了蓝星啥都没有了。

代码截图

添加第三方底图

相关文档

我们到现在使用的底图都是 cesium 默认提供的，如果我们需要用自己的底图也很简单，无论是 geoserve 自己发布的还是 高德底图 、百度底图、天地图底图都是可以的，但是有一点需要说一下哈，就是这个高德、百度、google 底图都是有偏移的，直接放进来可能会有偏差，所以说建议使用天地图的。

以天地图为例，我们先创建一个底图对象，使用天地图需要申请 tk 值，这个自己去申请，如果不会的话，看我关于天地图的博文，里面有介绍和步骤。

代码

const imageLayers = this.viewer.scene.imageryLayers;
imageLayers.remove(imageLayers.get(0)); //移除默认影像图层
const TDTTK = "key"; //填入你自己的天地图Key
// 天地图影像
const tdtLayer = new Cesium.WebMapTileServiceImageryProvider({
  url: `http://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,
  layer: "tdt",
  style: "default",
  format: "image/jpeg",
  tileMatrixSetID: "w",
  maximumLevel: 18,
  show: false,
});
this.viewer.imageryLayers.addImageryProvider(tdtLayer);
// 天地图注记
const tdtAnnotionLayer = new Cesium.WebMapTileServiceImageryProvider({
  url: `http://t0.tianditu.com/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,
  layer: "tdtAnno",
  style: "default",
  format: "image/jpeg",
  tileMatrixSetID: "w",
  maximumLevel: 18,
  show: false,
});
this.viewer.imageryLayers.addImageryProvider(tdtAnnotionLayer);

这样就添加进来了。

效果图

截止到这里完整代码:

<template>
  <div id="my-map"></div>
</template>

<script>
  export default {
    name: "HomeView",
    data() {
      return {
        TDT_SL: null,
      };
    },
    methods: {
      init() {
        Cesium.Ion.defaultAccessToken =
          "cesium_key";
        this.viewer = new Cesium.Viewer("my-map", {
          homeButton: true,
          sceneModePicker: true,
          baseLayerPicker: true, // 影像切换
          animation: false, // 是否显示动画控件
          infoBox: false, // 是否显示点击要素之后显示的信息
          selectionIndicator: false, // 要素选中框
          geocoder: true, // 是否显示地名查找控件
          timeline: false, // 是否显示时间线控件
          fullscreenButton: false,
          shouldAnimate: false,
          navigationHelpButton: false, // 是否显示帮助信息控件
        });

        // 注释版权信息
        this.viewer._cesiumWidget._creditContainer.style.display = "none";

        const imageLayers = this.viewer.scene.imageryLayers;
        imageLayers.remove(imageLayers.get(0)); //移除默认影像图层
        const TDTTK = "key"; //填入你自己的天地图Key
        // 天地图影像
        const tdtLayer = new Cesium.WebMapTileServiceImageryProvider({
          url: `http://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,
          layer: "tdt",
          style: "default",
          format: "image/jpeg",
          tileMatrixSetID: "w",
          maximumLevel: 18,
          show: false,
        });
        this.viewer.imageryLayers.addImageryProvider(tdtLayer);
        // 天地图注记
        const tdtAnnotionLayer = new Cesium.WebMapTileServiceImageryProvider({
          url: `http://t0.tianditu.com/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,
          layer: "tdtAnno",
          style: "default",
          format: "image/jpeg",
          tileMatrixSetID: "w",
          maximumLevel: 18,
          show: false,
        });
        this.viewer.imageryLayers.addImageryProvider(tdtAnnotionLayer);
      },
    },
    mounted() {
      this.init();
    },
  };
</script>

<style scoped>
  #my-map {
    width: 100%;
    height: 100%;
    background-color: black;
  }
</style>

销毁 cesium

创建说完了，现在说一下销毁，销毁的话就很简单了，就是一句话：

this.viewer.destroy()

执行上面这句话就直接销毁了，这个一般是组件注销了，不展示 cesium 的时候使用，防止一直占用资源啥的，具体情况具体分析哈！

地图放大缩小

其实 cesium 的放大缩小和百度地图他们不一样。cesium 的放大缩小其实就是相机高度，相机高度变小就是放大，相机高度变大就是缩小。理解吧？相机高了，视角大了，蓝星上面东西就小了。

首先是放大：

/**
 * 地图放大
 */
zoomIn() {
  // viewer 为 Viewer 对象
  let position = this.viewer.camera.position;
  let cameraHeight = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height;
  // 每次缩小 20 倍，参数可改
  let moveRate = cameraHeight / 20.0;
  this.viewer.camera.moveForward(moveRate);
}

然后是缩小：

/**
 * 地图缩小
 */
zoomOut() {
  // viewer 为 Viewer 对象
  let position = this.viewer.camera.position;
  let cameraHeight = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height;
  // 每次缩小 20 倍，参数可改
  let moveRate = cameraHeight / 20.0;
  this.viewer.camera.moveBackward(moveRate);
}

道理都是一样的！

可以写两个按钮分别是“放大”和“缩小”，点击按钮的时候，执行这两个方法就可以了！

获取可视区域、高度、层级

获取可视区域这个很简单呀，一行代码完事：

let rectangle = this.viewer.camera.computeViewRectangle();

我们可以看一下返回的数据：

我们看到哈，打印出来的坐标不是地理坐标，转换一下就可以了。

let rectangle = this.viewer.camera.computeViewRectangle();
let east = Cesium.Math.toDegrees(rectangle.east).toFixed(6);  // 转地理坐标
console.log(rectangle, east)

如果需要的话，挨个转换一下也可以。

获取相机高度的话更简单了。

let height = Math.ceil(this.viewer.camera.positionCartographic.height).toFixed(0);
console.log("相机高度----->> ", height)

直接打印一下看结果：

这个单位是米哈。

然后是层级，就和百度高德一样，层级显示：

let zoom = this.heightToZoom(height).toFixed(0)
console.log("层级----->> ", zoom)

这是需要用到的一个方法，为啥里面是这样，我也不知道，我也是从网上抄的这个方法：

heightToZoom(height) {
  let A = 40487.57;
  let B = 0.00007096758;
  let C = 91610.74;
  let D = -40467.74;
  return Math.round(D + (A - D) / (1 + Math.pow(height / C, B)));
}

然后看一下结果：