60 lines
1.2 KiB
Vue
60 lines
1.2 KiB
Vue
|
<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>
|