cesium实现简单地图展示

 

vue中使用cesium初始化

cesium.vue内容如下：

<template>
  <div class="mapBox">
    <div id="cesium" ref="cesium"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      viewer:null,
    }
  },
  mounted() {
    this.mapInit();
  },
  methods: {
    mapInit() {
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees( 90, -20, 110, 90); //西南东北，默认显示中国
      this.viewer = new Cesium.Viewer("cesium", {
        animation: false, //是否显示动画控件
        homeButton: false, //是否显示home键
        geocoder: false,// 查询
        baseLayerPicker: false, //是否显示图层选择控件
        timeline: false, //是否显示时间线控件
        fullscreenButton: false, //是否全屏显示
        scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
        infoBox: false, //是否显示点击要素之后显示的信息
        sceneModePicker: false, //是否显示投影方式控件  三维/二维
        navigationHelpButton: false, //是否显示帮助信息控件
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
          url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
        }),
        terrainProvider: new Cesium.CesiumTerrainProvider({ 
          url: "http://data.marsgis.cn/terrain"
        }),
        skyAtmosphere:false,
        // orderIndependentTranslucency: false,
        contextOptions: {
          webgl: {
            alpha: true,
          },
        },
      });
      // 设置基本属性
      this.viewer.scene.sun.show = false; 
      this.viewer.scene.moon.show = false;
      this.viewer.scene.skyBox.show = false; //关闭天空盒，否则会显示天空颜色
      this.viewer.scene.undergroundMode = true; 
      this.viewer.scene.globe.show = true; 
      this.viewer.scene.backgroundColor = new Cesium.Color(0, 0, 0, 0);
      this.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1000;
      this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 5600000;
      if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
        //判断是否支持图像渲染像素化处理
        this.viewer.resolutionScale = window.devicePixelRatio;
      }
      this.viewer.scene.fxaa = true;
      this.viewer.scene.postProcessStages.fxaa.enabled = true;
      // 隐藏版权
      this.viewer._cesiumWidget._creditContainer.style.display = "none";

      this.viewer.scene.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(
          120.952811,31.854272,
          6000
        ),
        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-40),
          roll: Cesium.Math.toRadians(0), //heading、pitch和roll就是镜头相对于xyz轴的角度，比如pitch为-90°而另外两个为0时，就是90°向下俯视地球。
        },
      });
    },
  },
  }
</script>
<style lang='scss'>
.mapBox{
  width: 100%;
  height: 100%;
  #cesium{
    width: 100%;
    height: 100%;
    padding:20px;
    box-sizing: border-box;
  }
  .cesium-selection-wrapper,.cesium-selection-wrapper-visible{
    display: none!important;
  }
}
</style>