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

<script setup>
import blue_vector from './mapStyle.js';
import cesiumPaiShuiArea from './cesiumPaiShuiArea.js';
import changeMapStyle from './changeMapStyle.js';
import topography from '@/assets/newImgs/topography.png';
const { proxy } = getCurrentInstance();
//创建地图实例
const createIniteMap = () => {
  window.newfiberMap = new NewFiberMap('mapContainerMF', {
    terrain: false,
    selectionIndicator: false, //单击是否出现绿色边框
  });
  // newfiberMap.setBaseMapByEnum([NewFiberMap.Enum.BaseMap.TC_BLACK]);
  // changeMapStyle.mapSetImageStyle(newfiberMap);
  var layer = new NewFiberMap.Layer.MVTImageryProvider({
    style: blue_vector,
    tileSize: 1024,
  });
  layer.newfiberId = 'blackMap';
  newfiberMap.getMap().scene.globe.baseColor = Cesium.Color.fromCssColorString('rgba(8,27,54,1)');
  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>