Newer
Older
KaiFengPC / src / views / floodSys / floodYP / riskGisMap.vue
@zhangdeliang zhangdeliang on 8 Dec 1 KB update
  1. <template>
  2. <!--内涝风险评估 GIS地图 -->
  3. <div class="riskMapGis">
  4. <MapBox :initJson="`/static/libs/mapbox/style/lateWarn.json`" :loadCallback="loadCallback"></MapBox>
  5. </div>
  6. </template>
  7.  
  8. <script setup name="riskMapGis">
  9. import MapBox from '@/views/gisMapPage/gisMapBox'; //gis地图
  10. import axios from 'axios';
  11.  
  12. const { proxy } = getCurrentInstance();
  13. const allData = reactive({});
  14. const emits = defineEmits();
  15. const loadCallback = () => {
  16. emits('loadCallback');
  17. };
  18. //添加建筑白膜
  19. const addBuildingLayer = async () => {
  20. let buildingGeojson = (await axios.get('https://server1.wh-nf.cn:9000/newfiber-standard-kaifeng/2024/06/24/kaiFengBuilding.json')).data;
  21. newfiberMap_risk.map.addLayer({
  22. id: 'buildingLayer',
  23. type: 'fill-extrusion',
  24. source: {
  25. type: 'geojson',
  26. data: buildingGeojson,
  27. },
  28. // //绘画功能
  29. paint: {
  30. // Get the fill-extrusion-color from the source 'color' property. 从source 'color'属性获取fill- extrusive -color。
  31. // 'fill-extrusion-color':'rgba(200, 100, 240, 0.4)',
  32. // "fill-extrusion-color":['get','color'],//加载数据中的颜色
  33. 'fill-extrusion-color': {
  34. //根据数值中加载相对应颜色
  35. property: 'height3', // this will be your density property form you geojson
  36. stops: [
  37. [10, '#155ed7'],
  38. [20, '#2d6edb'],
  39. [30, '#447edf'],
  40. [80, '#5386da'],
  41. [100, '#7ba0dc'],
  42. [125, '#a1bfef'],
  43. [300, '#a1bfef'],
  44. ],
  45. },
  46. // 从source 'height'属性获取填充-挤出-高度。
  47. 'fill-extrusion-height': ['get', 'height3'],
  48. 'fill-extrusion-opacity': 1,
  49. },
  50. });
  51. };
  52. onMounted(() => {
  53. addBuildingLayer();
  54. });
  55. </script>
  56. <style lang="scss">
  57. .riskMapGis {
  58. width: 100%;
  59. height: calc(100vh - 120px);
  60. background: rgba(0, 0, 0, 0.05);
  61. }
  62. </style>