WholeProcessPlatform/frontend/src/components/gis/GisView.vue

<template>
  <div class="gis-view">
    <div id="mapContainer" />
    <!-- 地图图例 -->
      <!-- tabType="{baseType[0]?.tagType}"
        legendData="{legendData}"
        legendDataMap="{legendDataMap}"
        setLegendDataMap="{updateLegendDataMap}"
        dvtpType="{dvtpType}"
        mapList="{mapList}"
        loading="{loading}"
        pointData="{pointData}" -->
      <MapLegend />
    <!-- 地图筛选器 -->
    <MapFilter />
    <!-- 地图控制器 -->
    <MapController />
    <!-- 基础图层切换器 -->
    <BaseLayerSwitcher />
    <!-- <MapFilter inverse={true} searchList={mapSearchList} pointData={pointData} fish={fish}
    wqElementsList={wqElementsList} className={'map-filter'} initialValues={{ timeRange: searchTimeRange, dvtp: dvtpType, year: yearTime }}
    getFormRef={(ref: any) => (mapFilterFormRef.current = ref)}
    fetchPointData={fetchPointData} /> -->
  </div>
</template>
<script setup lang="ts">
import MapLegend from "@/components/mapLegend/index.vue";
import MapFilter from "@/components/mapFilter/index.vue";
import MapController from "@/components/mapController/index.vue";
import BaseLayerSwitcher from "@/components/baseLayerSwitcher/index.vue";
</script>

<style lang="scss" scoped>
.gis-view {
  width: 100%;
  height: 100%;
  position: absolute;
  visibility: visible;
}
#mapContainer {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: red;
}
</style>