wfs 范围查询

suerprisePlus

2024-06-21 fde8e3bedaf5f883f38c3a0ec33d3c6a8748d1c9

 src/views/homePage/index.vue

@@ -1,13 +1,24 @@
<template>
  <div class="mapChart">
    <div class="leftChart">
      <div class="chartContent">
        <div class="chartHeader">
          <chartHeader></chartHeader>
        </div>
        <div class="chartBox">
      <div
        :class="
          $store.state.setScreenFlag ? 'leftContentActive' : 'leftContent'
        "
      >
      <map-chart></map-chart></div>
            <map-chart></map-chart>
          </div>
        </div>
      </div>
      <!--  -->
      <!-- -->

      <!-- </div> -->
    </div>
    <div :class="$store.state.setScreenFlag ? 'rightMapActive' : 'rightMap'">
      <map-view></map-view>
@@ -18,37 +29,61 @@
<script>
import mapChart from "./../mapChart/index.vue";
import mapView from "./../mapView/index.vue";
import chartHeader from "./../mapChart/chartHeader.vue";
export default {
  components: {
    mapChart,
    mapView
    mapView,
    chartHeader
  },
  mounted() {}
};
</script>

<style>
<style scoped>
.mapChart {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  background: #333333;
}
.leftChart {
  flex: 1;
}
.chartContent {
  width: 100%;
  height: 100%;
  /* background: skyblue; */
  display: flex;
  flex-direction: column;
}
.chartHeader {
  width: 100%;
  height: 38px;
}
.chartContent .chartBox {
  flex: 1;
  display: flex;
  justify-content: center;

  /* 
  height: (100% - 38px);
*/
}
.leftContent {
  width: 50%;
  width: 40%;
  height: 100%;
  transition: 1s ease-out;
  display: flex;
  justify-content: center;
  background: skyblue;
}
.leftContentActive {
  width: 100%;
  height: 100%;
  transition: 1s ease-out;
 
  background: skyblue;
}
.rightMapActive {
  width: 50%;