<!-- 热力图渲染 -->
<template>
  <div id="CesiumContainer">
  </div>
</template>

<script>
  import qs from 'qs'

  export default {
    data() {
      return {
        earth: ''
      };
    },
    components: {},
    computed: {},
    mounted() {
      this.init();
    },
    methods: {
      init() {
        Cesium.Ion.defaultAccessToken =
          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2YjcwZmQzNS1hODBiLTQzNjAtYjI0NC1kY2JkNzFhMGQwZmEiLCJpZCI6MzY5NDksImlhdCI6MTYwNDM3MjQwNn0.Ckrquc_lnL8T4CGKuxmUieS9k2VxdGX9ADL1_I0J4uQ';

        // 默认定位到中国上空
        Cesium.Camera.DEFAULT_VIEW_RECTANGLE = new Cesium.Rectangle.fromDegrees(
          90,
          -20,
          110,
          90,
        );

        // gis地图服务,第一种添加地图图层的方式
        let gisMap = new Cesium.ArcGisMapServerImageryProvider({
          url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
        });

        let viewer = new Cesium.Viewer('CesiumContainer', {
          imageryProvider: gisMap,
        });

        this.earth = viewer;
        // this.renderHeatmap()
      },
      // async getDatas() {
      //   let res = await this.$http.post('/huaizi/V3Action/inversion', qs.stringify({
      //     INTYPE: 'MOON',
      //     TYPE: 'TEMP',
      //     TIMETYPE: '2020-04-29 00:00:00'
      //   }), {
      //     headers: {
      //       'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      //     }
      //   });

      //   res = res.data.list || [];

      //   let datas = [];
      //   for (const items of res.values()) {
      //     datas.push({
      //       x: +items.LAN,
      //       y: +items.LAT,
      //       value: +items.TEMP,
      //     })
      //   }
      //   return datas;
      // },
      // async renderHeatmap() {
      //   // 渲染热力图方法，在这里面写
      //   let res = await this.getDatas();

      //   console.log('res', res)
      // }
    }
  }

</script>

<style scoped>
  #CesiumContainer {
    width: 100%;
    height: 100%;
  }

</style>