<template>
  <div>
    <div id="cesiumContainer" />
    <div id="contentContainer">
      <top-header />
      <bottom-utils />
      <content />
    </div>
  </div>
</template>

<script setup>
import autoFit from "autofit.js";
import { onMounted } from "vue";
import InitMap from "./js/initMap.js";
import river from "./json/river.json";
import TopHeader from "./components/header.vue";
import BottomUtils from "./components/bottom_utils.vue";
import Content from "./components/content.vue";

const villagePoint = [
  {
    name: "长不老口村",
    longitude: 119.03337180938561,
    latitude: 40.19664822790694,
  },
];
onMounted(async () => {
  autoFit.init({ dw: 1920, dh: 1080, el: "#contentContainer", resize: true });
  const initMap = new InitMap();
  const { mapMethods } = initMap.initMap();
  mapMethods.mapFlyTo();
  await mapMethods.addRiver(river.river[0].position);
  await mapMethods.addPoint("village", villagePoint);
});
</script>

<style scoped lang="scss">
#cesiumContainer {
  width: 1920px;
  height: 1080px;
  position: relative;
  z-index: 0;
  isolation: isolate;
}

#contentContainer {
  width: 1920px;
  height: 1080px;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  > * {
    pointer-events: auto;
  }
}
</style>
