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>

 

 

 

鑽研不易，轉載請注明出處。。。。。。