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

<script setup>
import blue_vector from './mapStyle.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);
};
//添加3Dtiles
const loadCesium3DTileSet = async (e = {}) => {
  let { url: o, id: a = _.uniqueId(), style: l = {}, show: i = !0, customShader: s = void 0 } = e;

  const tileset = await Cesium.Cesium3DTileset.fromUrl(o, {
    url: o,
    show: i,
    customShader: s,
    shadows: !1,
    skipLevelOfDetail: !0,
    baseScreenSpaceError: 1024,
    maximumScreenSpaceError: 64,
    skipScreenSpaceErrorFactor: 16,
    skipLevels: 1,
    immediatelyLoadDesiredLevelOfDetail: !1,
    loadSiblings: !1,
    cullWithChildrenBounds: !0,
    cullRequestsWhileMoving: !0,
    cullRequestsWhileMovingMultiplier: 10,
    preloadWhenHidden: !0,
    preloadFlightDestinations: !0,
    preferLeaves: !0,
    maximumMemoryUsage: 1024,
    progressiveResolutionHeightFraction: 0.5,
    dynamicScreenSpaceErrorDensity: 1,
    dynamicScreenSpaceErrorFactor: 4,
    dynamicScreenSpaceErrorHeightFalloff: 0.25,
    foveatedScreenSpaceError: !0,
    foveatedConeSize: 0.1,
    foveatedMinimumScreenSpaceErrorRelaxation: 0,
    foveatedTimeDelay: 0,
    luminanceAtZenith: 0,
    backFaceCulling: !0,
    debugFreezeFrame: !1,
    debugColorizeTiles: !1,
    debugWireframe: !1,
    debugShowBoundingVolume: !1,
    debugShowContentBoundingVolume: !1,
    debugShowViewerRequestVolume: !1,
    debugShowGeometricError: !1,
    debugShowRenderingStatistics: !1,
    debugShowMemoryUsage: !1,
    debugShowUrl: !1,
    dynamicScreenSpaceError: !0,
  });
  newfiberMap.getMap().scene.primitives.add(tileset);
  var boundingSphere = tileset.boundingSphere;
  var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
  var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
  var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 20);
  var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
  tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
};
onMounted(() => {
  createIniteMap();
});
</script>

<style lang="scss" scoped>
.mapContainerMF {
  width: 100%;
  height: 100%;
}
</style>