nsgk_mobile/src/views/contracted/village/map/map.vue

<template>
  <div class="app-container">

    <van-nav-bar :title="$route.query.deptName" left-arrow fixed placeholder @click-left="$router.push({path:'/contracted/index'})" />

    <div class="head">
      <div class="tap_block">
        <p @click="$router.push({path:'/contracted/village/contractor', query: { deptId: $route.query.deptId, deptName: $route.query.deptName }})">承包方</p>
        <p @click="$router.push({path:'/contracted/village/employer', query: { deptId: $route.query.deptId, deptName: $route.query.deptName }})">发包方</p>
        <p @click="$router.push({path:'/contracted/village/massif', query: { deptId: $route.query.deptId, deptName: $route.query.deptName }})">地块</p>
        <p class="active">地图</p>
      </div>
    </div>

    <div style="position:relative;">
      <div class="mapBox" id="landMapBox"></div>
      <div class="legend_main" v-if="showLegend">
        <div class="legend">
          <p class="legend_tt">图例
            <img src="../../../../../static/images/contracted/map_icon_01.png" @click="showLegend = false" alt="">
          </p>
          <van-checkbox-group v-model="landCategory" @change="filterLandLayer">
            <van-checkbox name="10" shape="square" checked-color="#16e90f"><div><p>承包地</p><i class="i1"></i></div></van-checkbox>
            <van-checkbox name="21" shape="square" checked-color="#01c6de"><div><p>自留地</p><i class="i2"></i></div></van-checkbox>
            <van-checkbox name="22" shape="square" checked-color="#eeee00"><div><p>机动地</p><i class="i3"></i></div></van-checkbox>
            <van-checkbox name="23" shape="square" checked-color="#ee3c3c"><div><p>开荒地</p><i class="i4"></i></div></van-checkbox>
            <van-checkbox name="99" shape="square" checked-color="#eb8600"><div><p>其他地</p><i class="i5"></i></div></van-checkbox>
          </van-checkbox-group>
        </div>
        <div class="legend_second" v-if="taskStatus === '2'">
          <p class="legend_tt" id="drawLandPolygon">
            <img src="../../../../../static/images/contracted/map_icon_02.png" alt="">画图
          </p>
        </div>
      </div>
      <div class="openLegend" v-if="!showLegend" @click="showLegend = true">
        <span class="sanjiao-left"></span>
      </div>
    </div>

    <div class="landPopup">
      <van-dialog v-model="open" :title="title" :show-confirm-button="false" :show-cancel-button="false">
        <van-form ref="landForm">
          <van-field v-model="form.dkbm" label="地块代码：" placeholder="请输入地块代码" required :rules="[{ required: true }]" :border="false" input-align="right" label-width="auto" maxlength="19" > <!-- :disabled="isDisabled" -->
            <template #button v-if="!isDisabled">
              <van-button size="mini" type="primary" native-type="button" @click="generateCode">生成代码</van-button>
            </template>
          </van-field>
          <van-field v-model="form.dkmc" label="地块名称：" placeholder="请输入地块名称" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />
          <van-field v-model="syqxzText" label="所有权性质："
                     placeholder="请选择所有权性质"
                     required
                     :rules="[{ required: true }]"
                     :border="false"
                     input-align="right"
                     right-icon="arrow-down"
                     readonly
                     clickable
                     @click="showOwnership = true"
          />
          <van-popup v-model="showOwnership" position="bottom" get-container=".app-container">
            <van-picker
              show-toolbar
              :columns="syqxzOptions"
              value-key="dictLabel"
              @confirm="onConfirmOwnershipOptions"
              @cancel="showOwnership = false"
            />
          </van-popup>
          <van-field v-model="dklbText" label="地块类别："
                     placeholder="请选择地块类别"
                     required
                     :rules="[{ required: true }]"
                     :border="false"
                     input-align="right"
                     right-icon="arrow-down"
                     readonly
                     clickable
                     @click="openLandCategoryPopup"
          />
          <van-popup v-model="showLandCategory" position="bottom" get-container=".app-container">
            <van-picker
              show-toolbar
              :columns="dklbOptions"
              value-key="dictLabel"
              @confirm="onConfirmLandCategoryOptions"
              @cancel="showLandCategory = false"
            />
          </van-popup>
          <van-field v-model="tdlylxText" label="土地利用类型："
                     placeholder="请选择土地利用类型"
                     required
                     :rules="[{ required: true }]"
                     :border="false"
                     input-align="right"
                     right-icon="arrow-down"
                     readonly
                     clickable
                     @click="showLandType = true"
          />
          <van-popup v-model="showLandType" position="bottom" get-container=".app-container">
            <van-picker
              show-toolbar
              :columns="tdlylxOptions"
              value-key="dictLabel"
              @confirm="onConfirmLandTypeOptions"
              @cancel="showLandType = false"
            />
          </van-popup>
          <van-field v-model="dldjText" label="地力等级："
                     placeholder="请选择地力等级"
                     required
                     :rules="[{ required: true }]"
                     :border="false"
                     input-align="right"
                     right-icon="arrow-down"
                     readonly
                     clickable
                     @click="showLandGrade = true"
          />
          <van-popup v-model="showLandGrade" position="bottom" get-container=".app-container">
            <van-picker
              show-toolbar
              :columns="dldjOptions"
              value-key="dictLabel"
              @confirm="onConfirmLandGradeOptions"
              @cancel="showLandGrade = false"
            />
          </van-popup>
          <van-field v-model="tdytText" label="土地用途："
                     placeholder="请选择土地用途"
                     required
                     :rules="[{ required: true }]"
                     :border="false"
                     input-align="right"
                     right-icon="arrow-down"
                     readonly
                     clickable
                     @click="showLandPurpose = true"
          />
          <van-popup v-model="showLandPurpose" position="bottom" get-container=".app-container">
            <van-picker
              show-toolbar
              :columns="tdytOptions"
              value-key="dictLabel"
              @confirm="onConfirmLandPurposeOptions"
              @cancel="showLandPurpose = false"
            />
          </van-popup>
          <van-field v-model="form.sfjbnt" label="基本农田：" required :rules="[{ required: true }]" :border="false" input-align="right" >
            <template #input>
              <van-radio-group v-model="form.sfjbnt" direction="horizontal">
                <!-- <van-radio name="1">是</van-radio>
                <van-radio name="2">否</van-radio> -->
                <van-radio v-for="dict in sfjbntOptions" :ke="dict.dictValue" :name="dict.dictValue">{{ dict.dictLabel }}</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field v-model="form.scmjm" type="number" label="实测面积(亩)：" placeholder="请输入实测面积(亩)" required :rules="[{ required: true }]" :border="false" input-align="right" />
          <van-field v-model="form.zjrxm" label="指界人姓名：" placeholder="请输入指界人姓名" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="100" />
          <van-field v-model="form.dkdz" label="地块东至：" placeholder="请输入地块东至" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />
          <van-field v-model="form.dkxz" label="地块西至：" placeholder="请输入地块西至" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />
          <van-field v-model="form.dknz" label="地块南至：" placeholder="请输入地块南至" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />
          <van-field v-model="form.dkbz" label="地块北至：" placeholder="请输入地块北至" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />
          <van-field v-model="form.dkbzxx" label="地块备注信息：" placeholder="请输入地块备注信息" type="textarea" rows="3" :border="false" input-align="right" maxlength="250" />
        </van-form>
        <div class="footer_main">
          <van-button type="default" hairline size="large" @click="closePopup">关闭弹窗</van-button>
          <van-button type="danger" hairline size="large" @click="deleteLand(form.id)" v-if="taskStatus === '2' && showDeleteBtn">删除地块</van-button>
          <van-button type="info" hairline size="large" @click="saveLand" v-if="showSaveBtn">保存信息</van-button>
        </div>
    </van-dialog>
    </div>

  </div>
</template>
<script>
  import Cookies from "js-cookie";
  import { getConfigKey } from "@/api/system/config";
  import { getDept } from "@/api/contracted";
  import { getDk, addDk, updateDk, deleteDk, generateLandCode } from "@/api/contracted/dk";
  import $ from "jquery";

  export default {
    name: "contractedVillageContractor",
    data() {
      return {
        form: {},                         // 地块信息表单参数
        map: "",                          // 地图
        mapGeoServerUrl: "",              // geoserver地址
        mapCenterLocation: [],            // 地图中心坐标
        landLayerName: "",                // 地块图层名称
        landLayer: "",                    // 地块图层
        mapBorder: "",                    // 地图边界
        villageBorderLayerName: "",       // 乡镇边界图层名称
        vectorLayer: "",                  // 绘制的矢量图层

        title: "",                        // 弹出层标题
        open: false,                      // 是否显示地块弹出层
        syqxzOptions: [],                 // 所有权性质字典
        syqxzText: null,                  // 所有权性质标签名
        showOwnership: false,             // 控制所有权性质字典弹出层的显示和隐藏
        dklbOptions: [],                  // 地块类别字典
        dklbText: null,                   // 地块类别标签名
        showLandCategory: false,          // 控制的地块类别字典弹出层的显示和隐藏
        dldjOptions: [],                  // 地力等级字典
        dldjText: null,                   // 地力等级标签名
        showLandGrade: false,             // 控制地力等级字典弹出层的显示和隐藏
        tdytOptions: [],                  // 土地用途字典
        tdytText: null,                   // 土地用途标签名
        showLandPurpose: false,           // 控制土地用途字典弹出层的显示和隐藏
        tdlylxOptions: [],                // 土地利用类型
        tdlylxText: null,                 // 土地利用类型标签名
        showLandType: false,              // 控制土地利用类型字典弹出层的显示和隐藏
        sfjbntOptions: [],                // 是否基本农田字典
        showSaveBtn: false,               // 控制保存按钮的显示隐藏
        showDeleteBtn: false,             // 控制删除按钮的显示隐藏
        isDisabled: false,                // 是否禁用
        taskStatus: null,                 // 调查任务的完成状态：1表示已完成，2表示未完成
        landCategory: ['10'],             // 地块类别

        showLegend:true
      };
    },
    created() {
      this.taskStatus = Cookies.get('taskStatus');
      this.getDicts("land_ownership").then(response => {
        this.syqxzOptions = response.data;
      });
      this.getDicts("land_type").then(response => {
        this.dklbOptions = response.data;
        // 去除地块类别中的承包地块选项
        let index = this.dklbOptions.findIndex(item => item.dictValue === '10');
        this.dklbOptions.splice(index, 1);
      });
      this.getDicts("land_grade").then(response => {
        this.dldjOptions = response.data;
      });
      this.getDicts("use_code").then(response => {
        this.tdytOptions = response.data;
      });
      this.getDicts("land_use").then(response => {
        this.tdlylxOptions = response.data;
      });
      this.getDicts("is_common").then(response => {
        this.sfjbntOptions = response.data;
      });
      // 获取geoserver的地址
      this.getGeoServerUrl();
      // 获取地块图层名称
      this.getLandLayerName();
      // 获取村边界的图层名称
      this.getVillageBorderLayerName();
    },
    mounted() {
      // 初始化地图
      setTimeout(() => {
        this.initMap();
      }, 500);
    },
    methods: {
      // 获取geoserver的地址
      getGeoServerUrl() {
        getConfigKey("system.geoServer.url").then(response => {
          this.mapGeoServerUrl = response.msg;
        });
      },
      // 获取地块图层名称
      getLandLayerName() {
        getConfigKey("geoserver.layer.landCategory").then(response => {
          this.landLayerName = response.msg;
        });
      },
      // 获取村边界的图层名称
      getVillageBorderLayerName() {
        getConfigKey("geoserver.layer.villageBorder").then(response => {
          this.villageBorderLayerName = response.msg;
        });
      },
      // 初始化地图
      initMap() {
        getDept(this.$route.query.deptId).then(response => {
          let dept = response.data;
          if (dept.lng && dept.lat) {
            this.mapCenterLocation = [dept.lng, dept.lat];
          } else {
            this.mapCenterLocation = [116.391458, 39.902377];
          }
          document.getElementById("landMapBox").innerHTML = "";
          // 定义地图投影
          let projection = new ol.proj.Projection({
            code: "EPSG:3857",
            units: "degrees",
          });
          // 定义地图图层
          let aerial = new ol.layer.Tile({
            source: new ol.source.XYZ({
              url: "http://t{0-7}.tianditu.com/img_w/wmts?" +
                "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
                "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
            }),
            isGroup: true,
            name: "卫星影像图",
          });
          let yingxzi = new ol.layer.Tile({
            source: new ol.source.XYZ({
              url: "http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
            }),
            isGroup: true,
            name: "天地图文字标注--卫星影像图",
          });
          //加载地图
          this.map = new ol.Map({
            controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]),
            layers: [aerial, yingxzi],
            projection: projection,
            target: "landMapBox",
            view: new ol.View({
              center: ol.proj.fromLonLat(this.mapCenterLocation), // 地图中心坐标
              zoom: 15.5,
              minZoom: 1, //地图缩小限制
              maxZoom: 18, //地图放大限制
              // extent: [13481224.75161,5667110.83528,13811063.06278,5880284.11416]
            }),
          });
          // // 添加村边界
          this.addVillageBorder();
          // 添加地块图层
          this.addLandLayer();
          // 绘制地块
          $("#drawLandPolygon").click(() => {
            // 创建矢量数据源
            let vectorSource = new ol.source.Vector({
              wrapX: false,
            });
            // 创建矢量图层
            this.vectorLayer = new ol.layer.Vector({
              source: vectorSource,
            });
            // 添加图层
            this.map.addLayer(this.vectorLayer);
            // 地图交互-绘制图形
            let drawInteraction = new ol.interaction.Draw({
              source: vectorSource,
              type: "Polygon",
            });
            // 添加交互
            this.map.addInteraction(drawInteraction);
            drawInteraction.on('drawend', (evt) => {
              // 移除交互
              this.map.removeInteraction(drawInteraction);
              let coordinates = evt.feature.getGeometry().getCoordinates();
              this.reset();
              this.form.theGeom = JSON.stringify(coordinates);
              this.title = "添加地块信息";
              this.showSaveBtn = true;
              this.showDeleteBtn = false;
              this.isDisabled = false;
              setTimeout(() => {
                this.open = true;
              }, 10);

            });
          });
          // 地图点击事件
          this.map.on("click", (evt) => {
            // 点击宅基地查看详情
            if (this.landLayer) {
              const viewResolution = this.map.getView().getResolution();
              const url = this.landLayer.getSource()
                .getFeatureInfoUrl(evt.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'application/json'});
              if (url) {
                fetch(url)
                  .then(response => response.json())
                  .then(data => {
                    if (data.features.length > 0) {
                      let id = data.features[0].id.split(".")[1];
                      getDk(id).then(response => {
                        const data = response.data;
                        this.reset();
                        this.form = data;
                        this.syqxzText = this.selectDictLabel(this.syqxzOptions, data.syqxz);
                        if (data.dklb === '10') {
                          this.dklbText = '承包地块';
                        } else {
                          this.dklbText = this.selectDictLabel(this.dklbOptions, data.dklb);
                        }
                        this.dldjText = this.selectDictLabel(this.dldjOptions, data.dldj);
                        this.tdytText = this.selectDictLabel(this.tdytOptions, data.tdyt);
                        this.tdlylxText = this.selectDictLabel(this.tdlylxOptions, data.tdlylx);
                        this.title = "查看地块信息";
                        this.showSaveBtn = false;
                        this.showDeleteBtn = true;
                        this.isDisabled = true;
                        setTimeout(() => {
                          this.open = true;
                        }, 10);
                      });

                      /* if (this.selectedHomesteadLayer) {
                        this.map.removeLayer(this.selectedHomesteadLayer);
                        this.selectedHomesteadLayer = "";
                      }
                      this.selectedHomesteadLayer = new ol.layer.Vector({
                        source: new ol.source.Vector({
                          features: new ol.format.GeoJSON().readFeatures(data)
                        }),
                        name: 'selectedHomesteadLayer',
                        style: new ol.style.Style({
                          fill: new ol.style.Fill({
                            //矢量图层填充颜色，以及透明度
                            color: "rgba(255, 84, 87, 0.3)",
                          }),
                          stroke: new ol.style.Stroke({
                            //边界样式
                            color: "#ff5457",
                            width: 3,
                          }),
                        })
                      });
                      // this.map.addLayer(this.selectedHomesteadLayer);
                      this.map.getLayers().insertAt(4, this.selectedHomesteadLayer);*/
                    }
                  });
              }
            }
          });
        });
      },
      filterLandLayer() {
        if (this.landLayer) {
          this.map.removeLayer(this.landLayer);
          this.landLayer = "";
        }
        this.addLandLayer();
      },
      // 添加地块图层
      addLandLayer() {
        this.landLayer = new ol.layer.Image({
          source: new ol.source.ImageWMS({
            url: this.mapGeoServerUrl + '/wms',
            params: {
              LAYERS: this.landLayerName,
              cql_filter: "dept_id = '" + this.$route.query.deptId + "' and DKLB in (" + this.landCategory + ")",
              SRID: 3857,
              abc: Math.random()        // 无效参数，保证每次发送的请求都不一样
            }
          }),
          name: 'landLayer'
        });
        this.map.getLayers().insertAt(3, this.landLayer);
        // this.map.addLayer(this.landLayer);
      },
      // 添加村边界
      addVillageBorder() {
        this.mapBorder = new ol.layer.Image({
          source: new ol.source.ImageWMS({
            url: this.mapGeoServerUrl + '/wms',
            params: {
              LAYERS: this.villageBorderLayerName,
              cql_filter: "dept_id = '" + this.$route.query.deptId + "'",
              SRID: 3857,
            },
          }),
          name: 'villageBorderLayer'
        });
        this.map.getLayers().insertAt(2, this.mapBorder);
      },
      saveLand() {
        this.$refs.landForm.validate().then(() => {
          if (this.form.id) {
            this.showSaveBtn = false;
            updateDk(this.form).then(response => {
              if (response.code == 200) {
                this.$toast({
                  icon: 'success',
                  message: '保存成功',
                  duration:"1000",
                  onClose: () => {
                    this.open = false;
                    this.showSaveBtn = true;
                  }
                });
              }
            });
          } else {
            this.form.deptId = this.$route.query.deptId;
            this.showSaveBtn = false;
            addDk(this.form).then(response => {
              if (response.code == 200) {
                this.$toast({
                  icon: 'success',
                  message: '保存成功',
                  duration:"1000",
                  onClose: () => {
                    this.open = false;
                    this.showSaveBtn = true;
                    // 移除矢量图层
                    this.map.removeLayer(this.vectorLayer);
                    this.vectorLayer = "";
                    // 移除地块图层重新加载
                    this.map.removeLayer(this.landLayer);
                    this.landLayer = "";
                    this.addLandLayer();
                  }
                });
              }
            });
          }
        }).catch(() => {
          this.$notify({ type: 'danger', message: '请填写完整的表单项' });
        });
      },
      deleteLand(id) {
        this.$dialog.confirm({
          message: '是否确认删除此地块？',
        }).then(() => {
          // on confirm
          this.showDeleteBtn = false;
          deleteDk(id).then(res => {
            if (res.code == 200) {
              this.$toast({
                icon: 'success',
                message: '删除成功',
                duration: "1000",
                onClose: () => {
                  this.open = false;
                  this.showDeleteBtn = true;
                  // 移除地块图层重新加载
                  this.map.removeLayer(this.landLayer);
                  this.landLayer = "";
                  this.addLandLayer();
                }
              });
            }
          });
        }).catch(() => {
          // on cancel
        });
      },
      onConfirmOwnershipOptions(value){
        this.form.syqxz = value.dictValue;
        this.syqxzText = value.dictLabel;
        this.showOwnership = false;
      },
      onConfirmLandCategoryOptions(value){
        this.form.dklb = value.dictValue;
        this.dklbText = value.dictLabel;
        this.showLandCategory = false;
      },
      onConfirmLandTypeOptions(value) {
        this.form.tdlylx = value.dictValue;
        this.tdlylxText = value.dictLabel;
        this.showLandType = false;
      },
      onConfirmLandGradeOptions(value) {
        this.form.dldj = value.dictValue
        this.dldjText = value.dictLabel;
        this.showLandGrade = false;
      },
      onConfirmLandPurposeOptions(value){
        this.form.tdyt = value.dictValue;
        this.tdytText = value.dictLabel;
        this.showLandPurpose = false;
      },
      generateCode() {
        generateLandCode({deptId: this.$route.query.deptId}).then(response => {
          this.$set(this.form, 'dkbm', response.data);
        });
      },
      closePopup() {
        // 移除矢量图层
        if (this.vectorLayer) {
          this.map.removeLayer(this.vectorLayer);
          this.vectorLayer = "";
        }
        this.open = false;
        this.reset();
      },
      reset() {
        this.form = {
          deptId: null,
          dkbm: null,
          dkmc: null,
          syqxz: '30',
          dklb: '99',
          tdlylx: '01',
          dldj: '01',
          tdyt: '1',
          sfjbnt: '1',
          scmjm: null,
          zjrxm: null,
          dkdz: null,
          dkxz: null,
          dknz: null,
          dkbz: null,
          dkbzxx: null,
          theGeom: null
        };
        this.syqxzText = '集体土地所有权';
        this.dklbText = '其他集体土地';
        this.tdlylxText = '【1】耕地';
        this.dldjText = '一等地';
        this.tdytText = '种植业';
      },
      openLandCategoryPopup() {
        // 修改时 && 地块类别为承包地块  不允许打开地块类别弹出层
        if (this.form.id && this.form.dklb === '10') {
          this.$toast({
            icon: 'fail',
            message: '当前地块为承包地块，不能更改地块类别',
            duration: '2000'
          })
          return ;
        }
        this.showLandCategory = true;
      }
    },
  };
</script>
<style scoped lang="scss">

  .app-container{
    background: #fff url("../../../../../static/images/contracted/contracted_index_bg.png") no-repeat center;
    background-size: 100% 100%;
    height: 100vh;
  }

  /deep/ .van-nav-bar{
    background: transparent;
  }

  /deep/ .van-nav-bar .van-icon{
    color: #000000;
  }

  /deep/ .van-hairline--bottom::after{
    border: none;
  }

  /deep/ .van-field--disabled .van-field__label {
    color: #646566;
  }

  /deep/ .landPopup .van-dialog {
    width: 90%;
    height: 85%;
    overflow-y: auto;
  }

  /deep/ .landPopup .van-field__label {
    width: 7em;
  }

  .head{
    padding: 0 4vw;
  }

  .tap_block{
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: #ebfaf2;
    padding: 2PX 4PX;
    border-radius: 10PX;
    margin-top: 1vh;
    .active{
      background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
      box-shadow: 0 0 10PX #cccccc;
      color: #333333;
    }
    p{
      width: 25%;
      text-align: center;
      padding: 5PX 0;
      border-radius: 10PX;
      color: #666666;
    }
  }

  .legend_main{
    position: absolute;
    top: 2vh;
    right: 2vw;
  }

  .openLegend{
    position: absolute;
    top: 2vh;
    right: 0vw;
    background-color: rgba(255,255,255,.5);
    width: 20PX;
    height: 70PX;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 10PX;
    border-bottom-left-radius: 10PX;
    .sanjiao-left {
      display: inline-block;
      border-right: 8PX solid #999999;
      border-right-color: initial;
      border-top: 5PX solid transparent;
      border-bottom: 5PX solid transparent;
    }
  }

  .legend_second{
    background: rgba(255,255,255,.5);
    padding: 2vh;
    border-radius: 10PX;
    margin-top: 2vh;
  }

  .legend_tt{
    font-size: 16PX;
    display: flex;
    align-items: center;
    justify-content: space-between;
    img{
      width: 20PX;
    }
  }

  .legend{
    background: rgba(255,255,255,.5);
    padding: 2vh;
    border-radius: 10PX;
    .van-checkbox{
      margin-top: 2vh;
      &:nth-child(1){
        /deep/ .van-checkbox__icon .van-icon{
          border-color: rgba(22,233,15,1);
        }
      }
      &:nth-child(2){
        /deep/ .van-checkbox__icon .van-icon{
          border-color: rgba(1,198,222,1);
        }
      }
      &:nth-child(3){
        /deep/ .van-checkbox__icon .van-icon{
          border-color: rgba(238,238,0,1);
        }
      }
      &:nth-child(4){
        /deep/ .van-checkbox__icon .van-icon{
          border-color: rgba(238,60,60,1);
        }
      }
      &:nth-child(5){
        /deep/ .van-checkbox__icon .van-icon{
          border-color: rgba(235,134,0,1);
        }
      }
    }
    .van-checkbox-group {
      .van-checkbox__label{
        i{
          display: block;
          width: 15PX;
          height: 15PX;
          border: 1px solid;
          border-radius: 3PX;
          margin-left: 10PX;
        }
        .i1{
          background: rgba(22,233,15,.7);
          border-color: rgba(22,233,15,1);
        }
        .i2{
          background: rgba(1,198,222,.7);
          border-color: rgba(1,198,222,1);
        }
        .i3{
          background: rgba(238,238,0,.7);
          border-color: rgba(238,238,0,1);
        }
        .i4{
          background: rgba(238,60,60,.7);
          border-color: rgba(238,60,60,1);
        }
        .i5{
          background: rgba(235,134,0,.7);
          border-color: rgba(235,134,0,1);
        }
        div{
          display: flex;
          align-items: center;
        }
      }
    }
  }

  .mapBox{
    margin-top: 2vh;
    height: 88vh;
    width: 100%;
    background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
  }

  .footer_main {
    flex: 0 0 120px;
    background: #ccc;
    display: flex;
    justify-content: center; /* 相对父元素水平居中 */
    align-items: center; /*  子元素相对父元素垂直居中 */
  }

</style>