CesiumJs插件vue-cesium使用之简单点，再简单点

前言

上一篇提到Vue3中用Vite配置Cesium，几行代码，那多快啊，如果项目是老项目，Vue3早期版本没有Vite呢

我自己尝试了下问题还是比较多的，那么如果不想解决这么多的问题，

又或者觉得官方给的案例不太好弄，很多功能没法自己写，那就可以偷懒使用插件了，这里我使用的插件就是vue-cesium

老实说，这个包解决了蛮多问题的，里面帮你集成了很多的功能，有很多的案例不需要你再去官网去查了然后自己写，真的很省心

插件地址：vue-cesium

如果还有Vue2版本的话，请看这里：vue2版本的vue-cesium

那你想看点别的案例，也可以去看官方的案例，不过真的很简陋就是了

官网案例地址：CesiumJs

好了，如果你想看看官方API文档，那可以看这个：官方API

也许你觉得有点累，想看看中文版本的，请看这里：中文API

准备工作

首先我们要去Cesium官网去拿到地图token，这个是免费的，只需要登录注册就行，有git账号的直接关联下就行

获取地图token

之后就是新建token，名字随便，选项用默认的就行 之后点击token，复制一下，下面会用到

下面开始正戏了

1. 安装插件

npm install vue-cesium --save yarn add vue-cesium

2. 在main.ts中配置

import VueCesium from 'vue-cesium'
import 'vue-cesium/dist/index.css'

app.use(VueCesium, {
    cesiumPath: 'https://www.supermapol.com/earth/Build/Cesium/Cesium.js', // 这里用的超图，也是组件，后面详细介绍
    accessToken: '你的 Cesium Ion 访问令牌', // 登录官网获取token
})

3. 新建地图组件

在component里面新建一个地图组件，把官方代码copy进去

<template>
<el-row ref="viewerContainer" class="demo-viewer">
  <vc-viewer
    v-if="show"
    ref="vcViewer"
    :animation="animation"
    :base-layer-picker="baseLayerPicker"
    :timeline="timeline"
    :fullscreen-button="fullscreenButton"
    :fullscreen-element="fullscreenElement"
    :info-box="infoBox"
    :skyAtmosphere="false"
    :skyBox="false"
    :scene-mode-picker="true"
    :show-credit="showCredit"
    @cesium-ready="onCesiumReady"
    @ready="onViewerReady"
    @left-click="onLeftClick"
    @touch-end="onTouchEnd"
    @destroyed="onDestroyed"
  >
    <vc-navigation :offset="offset" @compass-evt="onNavigationEvt" :other-opts="otherOpts" @zoom-evt="onNavigationEvt"></vc-navigation>
    <vc-entity @click="onEntityClick" :position="{lng: 108, lat: 32}" :point="point" :label="label">
      <vc-graphics-billboard image="https://zouyaoji.top/vue-cesium/favicon.png" :scale="0.5"></vc-graphics-billboard>
      <vc-graphics-rectangle :coordinates="[130, 20, 80, 25]" material="green"></vc-graphics-rectangle>
    </vc-entity>
    <vc-layer-imagery>
      <vc-imagery-provider-tianditu map-style="img_c" token="436ce7e50d27eede2f2929307e6b33c0"></vc-imagery-provider-tianditu>
    </vc-layer-imagery>
    <vc-layer-imagery ref="layerText">
      <vc-imagery-provider-tianditu map-style="cia_c" token="436ce7e50d27eede2f2929307e6b33c0"></vc-imagery-provider-tianditu>
    </vc-layer-imagery>
  </vc-viewer>
  <el-row class="demo-toolbar">
    <el-row>
      <el-button type="danger" round @click="unload">销毁</el-button>
      <el-button type="danger" round @click="load">加载</el-button>
      <el-button type="danger" round @click="reload">重载</el-button>
    </el-row>
    <el-row v-if="!loading">
      <el-switch v-model="animation" active-color="#13ce66" inactive-text="动画"> </el-switch>
      <el-switch v-model="timeline" active-color="#13ce66" inactive-text="时间轴"> </el-switch>
      <el-switch v-model="baseLayerPicker" active-color="#13ce66" inactive-text="基础图层"> </el-switch>
      <el-switch v-model="fullscreenButton" active-color="#13ce66" inactive-text="全屏按钮"> </el-switch>
      <el-switch v-model="infoBox" active-color="#13ce66" inactive-text="信息提示框"> </el-switch>
      <el-switch v-model="showCredit" active-color="#13ce66" inactive-text="版权信息"> </el-switch>
    </el-row>
  </el-row>
</el-row>
</template>

<script>
  import { watch, ref, onMounted } from 'vue'
  export default {
    setup() {
      const loading = ref(false)
      const animation = ref(true)
      const timeline = ref(true)
      const baseLayerPicker = ref(false)
      const fullscreenButton = ref(true)
      const infoBox = ref(true)
      const showCredit = ref(true)
      const fullscreenElement = document.body
      const vcViewer = ref(null)
      const point = ref({
        pixelSize: 28,
        color: 'red'
      })
      const label = ref({
        text: 'Hello World',
        pixelOffset: [0, 150]
      })
      const billboard = ref({})
      const offset = ref([50, 25])
      const otherOpts = ref({
        offset: [0, 32],
        position: 'bottom-right'
      })
      const show = ref(true)

      watch(timeline, val => {
        otherOpts.value.offset = val ? [0, 30] : fullscreenButton.value ? [30, 5] : [0, 5]
      })

      watch(fullscreenButton, val => {
        if (!timeline.value && !val) {
          otherOpts.value.offset = [0, 5]
        } else if (!timeline.value && val) {
          otherOpts.value.offset = [30, 5]
        }
      })

      const onViewerReady = ({ Cesium, viewer, vm }) => {
        console.log('viewer is loaded.', vm)
        vm.vcMitt.on('destroyed', e => {
          console.log('viewer is destroyed', e)
        })
        loading.value = false
        viewer.scene.globe.enableLighting = true
      }
      const onCesiumReady = e => {
        console.log(e)
      }
      const onNavigationEvt = e => {
        console.log(e)
      }
      const onEntityClick = e => {
        console.log(e)
      }
      const onLeftClick = e => {
        console.log(e)
      }
      const onTouchEnd = e => {
        console.log(e)
      }
      const onDestroyed = e => {
        console.log('onDestroyed', e)
      }
      const load = () => {
        // vcViewer.value.load().then(e => {
        //   console.log(e)
        //   loading.value = false
        // })
        show.value = true
      }
      const unload = () => {
        // this.$refs.vcViewer.unload().then(e => {
        //   console.log(e)
        //   this.loading = true
        // })
        show.value = false
      }
      const reload = () => {
        loading.value = true
        vcViewer.value.reload().then(e => {
          console.log(e)
          loading.value = false
        })
      }

      return {
        loading,
        animation,
        timeline,
        baseLayerPicker,
        fullscreenButton,
        infoBox,
        showCredit,
        fullscreenElement,
        vcViewer,
        point,
        label,
        billboard,
        offset,
        otherOpts,
        show,
        onViewerReady,
        onCesiumReady,
        onNavigationEvt,
        onEntityClick,
        onLeftClick,
        onTouchEnd,
        onDestroyed,
        load,
        unload,
        reload
      }
    }
  }
</script>

<style>

</style>

4. 导入用到的页面

直接在页面以组件的形式导入就可以了，基本没问题的话，就会出现一个巨丑的官方案例

下次一定

下期讲怎么优化地图，把这些不需要的按钮啊，动画轴去掉

下次一定来了：vue-cesium第二期-使用之功能简单介绍

哦，对了，给你们看看刚出的红皮，狗头保命！