<template>
  <div class="mapPage">
    <div id="cesiumContainer"></div>
  </div>
</template>
<script>
import { reactive, toRefs, onBeforeMount, onMounted, nextTick, onBeforeUnmount } from 'vue';
import NewFiberMapOperate from './gisMapFunction';
import axios from 'axios';
import bus from '@/bus';
export default {
  components: {},
  props: {},
  setup(props) {
    const allData = reactive({
      movePosition: '113.934113,30.872118',
    });
    const initeMap = async () => {
      window.newfiberMap = new NewFiberMapOperate('cesiumContainer', {
        pitch: 55,
        lng: 113.953,
        lat: 30.906,
      });
      newfiberMap.map.on('mousemove', function (e) {
        let movePosition = gcoord.transform(turf.point([e.lngLat.lng, e.lngLat.lat]), gcoord.GCJ02, gcoord.WGS84);
        allData.movePosition = `${movePosition.geometry.coordinates[0].toFixed(6)},${movePosition.geometry.coordinates[1].toFixed(6)}`;
      });
    };
    onMounted(() => {
      nextTick(() => {
        initeMap();
      });
    });
    onBeforeUnmount(() => {});
    return {
      ...toRefs(allData),
      initeMap,
    };
  },
};
</script>
<style lang="scss">
.mapPage {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 10;
  background: lavender;
  #cesiumContainer {
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .coordinateContainer {
    position: absolute;
    left: 20px;
    bottom: 30px;
  }
}
</style>