<template>
  <div class="mapPage">
    <div id="cesiumContainer"></div>
  </div>
</template>
<script>
import mapStyle from '@/utils/gisCesium/mapStyle.json';
import bus from '@/bus';
export default {
  components: {},
  props: {},
  setup(props) {
    const allData = reactive({
      movePosition: '113.934113,30.872118',
    });
    const initeMap = async () => {
      window.newfiberMap = new NewFiberMap('cesiumContainer', {
        terrain: true,
        skyBox: NewFiberMap.Enum.SkyBox.BLUE,
        selectionIndicator: false, //单击是否出现绿色边框
      });
      //加载底图
      newfiberMap.setBaseMapByEnum([NewFiberMap.Enum.BaseMap.ARCGIS_VECTOR_BLUE], [], mapStyle);
      newfiberMap.setView({
        pitch: -25,
        lng: 113.934,
        lat: 30.872,
        zoom: 2300,
      });
      mapMoveEvent();
    };
    //鼠标移动获取经纬度
    const mapMoveEvent = () => {
      newfiberMap.registerMouseMove(point => {
        allData.movePosition = `${point[0].toFixed(6)},${point[1].toFixed(6)}`;
      });
    };
    onMounted(() => {
      nextTick(() => {
        initeMap();
      });
    });
    onBeforeUnmount(() => {
      if (newfiberMap) {
        let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
        newfiberMap.getMap().destroy();
        if (_originalGLContext) {
          _originalGLContext.getExtension('WEBGL_lose_context').loseContext();
          _originalGLContext = null;
        }
        newfiberMap.baseMap.map = null;
        newfiberMap = null;
      }
    });
    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>