vue使用cesium

敲代码的小江江

已于 2022-06-17 11:01:30 修改

阅读量4.9k

点赞数 4

文章标签： npm 前端 node.js

于 2022-06-15 12:15:10 首次发布

本文链接：https://blog.csdn.net/qq_40863573/article/details/125294119

版权

1.从cesium官方平台下载cesium.js包

2.引入cesium.js和cesium.css

3.声明页面元素，初始化cesium并配置基础参数

4.隐藏cesium标志

5.token所在地

登录官网注册生成可获得

官网链接：CesiumJS – Cesium

6.初始化页面效果如图

附上完整代码

<template>
  <div>
    <div id="cesiumDemo"></div>
  </div>
</template>

<script>
let viewer
export default {
  name: 'CesiumDemo',
  data () {
    return {
    }
  },
  created () {
  },
  mounted () {
    this.getCesiumDem()
  },
  destroyed () {
  },
  methods: {
    // 实例cesium
    getCesiumDem () {
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxZWFlYjAyYS0xN2JlLTQ0OTItOGNkOC05YWJlNGY0MjI2NmQiLCJpZCI6NDkyMjYsImlhdCI6MTYxNzM0NjA3N30.crkTg0Logk_JUA7BROy0r9RqTJWCi8NZpTyu4qI11Fo'
      viewer = new Cesium.Viewer('cesiumDemo', {
        animation: false, // 是否显示动画控件
        baseLayerPicker: false, // 是否显示图层选择控件
        vrButton: false, // 是否显示VR控件
        geocoder: false, // 是否显示地名查找控件
        timeline: false, // 是否显示时间线控件
        sceneModePicker: false, // 是否显示投影方式控件
        navigationHelpButton: false, // 是否显示帮助信息控件
        navigationInstructionsInitiallyVisible: false, // 帮助按钮，初始化的时候是否展开
        infoBox: false, // 是否显示点击要素之后显示的信息
        fullscreenButton: false, // 是否显示全屏按钮
        selectionIndicator: true, // 是否显示选中指示框
        homeButton: false, // 是否显示返回主视角控件
        scene3DOnly: false, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
        terrainProvider: Cesium.createWorldTerrain({
          // 光照阴影
          requestVertexNormals: true,
          // 水流效果
          requestWaterMask: true
        }) // 显示地形
        // terrainProvider: new Cesium.EllipsoidTerrainProvider({}) // 不显示地形
      })
    }
  }
}
</script>
<style scoped>
#cesiumDemo {
  width: 100vw;
  height: 100vh;
}
/* 隐藏cesium标志 */
.cesium-viewer .cesium-widget-credits {
  display: none;
}
</style>