cesium之创建一个干净的地球

cesium之创建一个干净的地球

效果图：

 

 

 代码：

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

<script>

import * as Cesium from 'cesium/Cesium'
import "cesium/Widgets/widgets.css"
export default {
  name: 'wallmapway',
  data () {
    return {
      viewer: {}
    }
  },
  mounted() {
        //创建viewer实例
        Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2N2UwZWU2Zi1jN2UzLTQ3YTAtOTZmNC05MzNkM2IxZDViMzgiLCJpZCI6MjY1MzgsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODc5MDQ0NTF9.lLpxvsIwB9Se5GeINW-jp5nm406S7KVWMdvH8swDHQ4";
        this.viewer = new Cesium.Viewer('wallmapway',{
          "geocoder":false, // 隐藏搜索
          "homeButton":false, // 隐藏主页
          "sceneModePicker":false, // 隐藏二三维转换
          "baseLayerPicker":false, // 隐藏图层选择控件
          "navigationHelpButton":false, // 隐藏帮助按钮
          'animation':false, // 隐藏时钟
          'timeline':false, // 隐藏时间轴
          "fullscreenButton":false, // 隐藏全屏
          "vrButton":false, // 隐藏双屏模式
          "infoBox":false, // 隐藏点击 entity 信息框
          "selectionIndicator":false, // 隐藏点击 entity 绿框
          // 设置底图
           imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
                url: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
            })
        });

        // 定位到全国
        // 中国坐标
        let chinaPosition = Cesium.Cartesian3.fromDegrees(106.435314, 35.960521, 7000000.0);
        this.viewer.camera.flyTo({
          destination:chinaPosition,
                    duration: 1, // 飞行时间
                    //offset: new Cesium.HeadingPitchRange(0.0, Cesium.Math.toRadians(-20.0)) // 偏移量
        })
        
        

    }
}
</script>

<style lang="scss" scoped>
#wallmapway{
    text-align: center;
    width: 100%;
    height: 100%;
}
</style>

 

 

 

钻研不易，转载请注明出处。。。。。。