Cesium配置

API文档:http://cesium.xin/cesium/cn/Documentation1.62/

<template>
  <div class="cesium">
    <div id="cesiumContainer"></div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.mapInit();
  },
  methods: {
    mapInit() {
      Cesium.Ion.defaultAccessToken ="你的token";
      var viewer = new Cesium.Viewer("cesiumContainer", {
        terrainProvider: Cesium.createWorldTerrain(),//显示地形
        geocoder: false, // 地理位置查询定位控件
        homeButton: false, // 默认相机位置控件
        timeline: false, // 时间滚动条控件
        navigationHelpButton: false, // 默认的相机控制提示控件
        fullscreenButton: false, // 全屏控件
        scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
        baseLayerPicker: false, // 底图切换控件
        animation: false, // 控制场景动画的播放速度控件
        selectionIndicator: false, //关闭绿色的方框
        infoBox: false, //关闭原生的弹窗
      });
      // 相机移动到指定位置
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(74.6, 35.7, 10000),//飞到指定坐标
        orientation: {
          heading: Cesium.Math.toRadians(60.0),
          pitch: Cesium.Math.toRadians(-15.0),
          roll: Cesium.Math.toRadians(0.0),
        },
      });
      viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
    },
  },
};
</script>
<style lang='scss' scoped>
.cesium {
  position: absolute;
  width: 100%;
  height: 100%;
  #cesiumContainer {
    width: 100%;
    height: 100%;
  }
}
</style>

你可能感兴趣的:(Cesium,vue)