<template>
  <!-- 海绵综合一张图地图cesium -->
  <div class="mapContainerMF" id="mapContainerMF"></div>
</template>

<script setup>
import blue_vector from './mapStyle.js';
import cesiumPaiShuiArea from './cesiumPaiShuiArea.js';
const { proxy } = getCurrentInstance();
//创建地图实例
const createIniteMap = () => {
  window.newfiberMap = new NewFiberMap('mapContainerMF', {
    terrain: false,
    selectionIndicator: false, //单击是否出现绿色边框
  });
  var layer = new NewFiberMap.Layer.MVTImageryProvider({
    style: blue_vector,
    tileSize: 1024,
  });
  newfiberMap.getMap().scene.globe.baseColor = Cesium.Color.fromCssColorString(blue_vector.layers[0]['paint']['background-color']);
  newfiberMap.getMap().imageryLayers.addImageryProvider(layer);
  // //设置视窗位置
  newfiberMap.setView({
    lng: 114.312,
    lat: 34.502,
    heading: 2.281299097855777,
    zoom: 16358.12942752382,
    pitch: -25.2508969308367,
    roll: 0.005453465256790101,
  });
};
onMounted(() => {
  createIniteMap();
});
</script>

<style lang="scss" scoped>
.mapContainerMF {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 100;
}
</style>