- <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';
-
- 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>