Cesium学习笔记——将Cesium抽取成公共服务

1、项目说明

本项目前端框架为Vue + Cesium

2、实现步骤

（1）main.js中插入以下代码：

//全局引入Cesium
import 'cesium/Build/Cesium/Widgets/widgets.css'
import * as Cesium from 'cesium'
Vue.prototype.$Cesium = Cesium
window.Cesium = Cesium

（2）新建CesiumContainer.vue

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

<script>
export default {
  name: "CesiumContainer",
  data() {
    return {
      viewer: this.$root.viewer,
    };
  },

  methods: {
    initCesium() {
      var Cesium = this.$Cesium;

      var viewer = new Cesium.Viewer('cesiumContainer', {
      baseLayerPicker: false,
      geocoder: false,
      homeButton: false,
      fullscreenButton: true,
      navigationHelpButton: false,
      sceneModePicker: false,
      timeline: false,
      animation: false,
      selectionIndicator: false,
      skyAtmosphere: false,
      infoBox:false,
      // terrainProvider: new Cesium.createWorldTerrain({
      //     requestWaterMask:false,
      //     requestVertexNormals:false
      // }),
      imageryProvider:new Cesium.UrlTemplateImageryProvider({
        url:"http://mt2.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali",
      })
    })

    viewer.scene.globe.enableLighting = false  //显示太阳照射地球效果
    viewer.shadows = false
    viewer.scene.postProcessStages.fxaa.enabled = false
    viewer.scene.globe.showGroundAtmosphere = false  //显示大气层
    viewer.scene.postProcessStages.fxaa.enabled = false;//开启抗锯齿
    if(Cesium.FeatureDetection.supportsImageRenderingPixelated()){//判断是否支持图像渲染像素化处理
      console.log(window.devicePixelRatio);
      viewer.resolutionScale = window.devicePixelRatio;
    }
      this.viewer = viewer;
      this.$root.viewer = viewer;
      this.Cesium = Cesium;
    },
  },

  mounted() {
    this.initCesium();
  },
};
</script>

<style>
.sidebar-container{
  visibility: hidden;
}
.cesium-viewer-bottom{
  visibility: hidden;
}
.cesium-viewer-toolbar{
  visibility: hidden;
}
.cesium-viewer-fullscreenContainer {
    position: absolute;
    padding: 0;
    width: 1.5%;
    height: 3%;
    display: block;
    z-index: 120;
    right: 0% !important;
    bottom: 0.2% !important;
    overflow: hidden;
}

#cesiumContainer {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
</style>

（3）其他页面引用

<template>
  <div>
    <micCesium id="cesiumContainer"></micCesium>
  </div>
</template>

<script>
import micCesium from "@/views/CesiumContainer/CesiumContainer.vue"

export default {
  components: {
    micCesium
  },
  }
</script>