<template>
  <!--内涝风险评估 GIS地图 -->
  <div class="riskMapGis">
    <MapBox :initJson="`/static/libs/mapbox/style/lateWarn.json`" :loadCallback="loadCallback"></MapBox>
  </div>
</template>

<script setup name="riskMapGis">
import MapBox from '@/views/gisMapPage/gisMapBox'; //gis地图
import axios from 'axios';
import { onBeforeUnmount } from 'vue';
const { proxy } = getCurrentInstance();
const allData = reactive({});
const emits = defineEmits();
const loadCallback = () => {
  emits('loadCallback');
};
//添加建筑白膜
const addBuildingLayer = async () => {
  let buildingGeojson = (await axios.get('https://server1.wh-nf.cn:9000/newfiber-standard-kaifeng/2024/06/24/kaiFengBuilding.json')).data;
  newfiberMap_risk.map.addLayer({
    id: 'buildingLayer',
    type: 'fill-extrusion',
    source: {
      type: 'geojson',
      data: buildingGeojson,
    },
    // //绘画功能
    paint: {
      // Get the fill-extrusion-color from the source 'color' property.   从source 'color'属性获取fill- extrusive -color。
      // 'fill-extrusion-color':'rgba(200, 100, 240, 0.4)',
      // "fill-extrusion-color":['get','color'],//加载数据中的颜色
      'fill-extrusion-color': {
        //根据数值中加载相对应颜色
        property: 'height3', // this will be your density property form you geojson
        stops: [
          [10, '#155ed7'],
          [20, '#2d6edb'],
          [30, '#447edf'],
          [80, '#5386da'],
          [100, '#7ba0dc'],
          [125, '#a1bfef'],
          [300, '#a1bfef'],
        ],
      },
      //    从source 'height'属性获取填充-挤出-高度。
      'fill-extrusion-height': ['get', 'height3'],
      'fill-extrusion-opacity': 1,
    },
  });
};
onMounted(() => {
  addBuildingLayer();
});
</script>
<style lang="scss">
.riskMapGis {
  width: 100%;
  height: calc(100vh - 120px);
  background: rgba(0, 0, 0, 0.05);
}
</style>