rongxin.dashboard/src/views/app/map.vue

<template>
  <div class="app-container">
    <van-nav-bar
      title="土地列表管理"
      left-arrow
      placeholder
      safe-area-inset-top
      @click-left="onClickLeft"
    />
    <div class="search_box">
      <div class="left">
        <van-field v-model="value" left-icon="search" placeholder="请输入用户名" />
      </div>
      <van-button type="primary" round >搜索</van-button>
    </div>

    <div class="location">
      <img src="../../assets/images/app/location.png" alt="">
    </div>

    <div id="full-screen-acceptance" style="width: 100%;height:100vh;">
      <!--<div id="landMapDiv"></div>-->
      <div id="landMapBox"></div>
<!--      <div id='land-btn-wrap'>-->
<!--        <el-row>-->
<!--          <input id="drawPolygon" class="ant-btn ant-btn-red" type="button" value="画图"/>&nbsp;&nbsp;-->
<!--          &lt;!&ndash; <input id="drawRemove" type="button" class="ant-btn ant-btn-red" value="取消画图"/>&nbsp;&nbsp; &ndash;&gt;-->
<!--          <input id="drawReset" type="button" class="ant-btn ant-btn-red" value="还原"/>-->
<!--        </el-row>-->
<!--      </div>-->
    </div>



<!--      <van-popup v-model="open" position="bottom" round >-->
<!--        <div class="landPopup">-->
<!--          <p class="landPopup_title">属性数据 <img src="../../assets/images/app/edit.png" width="25" alt=""></p>-->
<!--          <van-form ref="landForm">-->
<!--            <van-field v-model="form.dkbm" label="地块代码：" placeholder="<自动生成>" :border="false" input-align="right" label-width="auto" maxlength="19" :disabled="true" >-->
<!--              &lt;!&ndash; <template #button v-if="!isDisabled">-->
<!--                <van-button size="mini" type="primary" native-type="button" @click="generateCode">生成代码</van-button>-->
<!--              </template> &ndash;&gt;-->
<!--            </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">-->
<!--                  &lt;!&ndash; <van-radio name="1">是</van-radio>-->
<!--                  <van-radio name="2">否</van-radio> &ndash;&gt;-->
<!--                  <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">关闭弹窗</van-button>-->
<!--            <van-button type="danger" hairline size="large">删除地块</van-button>-->
<!--            <van-button type="info" hairline size="large">保存信息</van-button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </van-popup>-->

  </div>
</template>
<script>
  import { listLand, listLandQuery,getLand, getLandDetail, getLandDetailByDkbm, delLand, addLand, updateLand, printLand } from "@/api/resource/land"
  import { areaSavePri, cleanSavePri } from "@/api/gis/map"
  import { getToken } from "@/utils/auth"
  import Treeselect from "@riophae/vue-treeselect";
  import { Splitpanes, Pane } from "splitpanes"
  import "@riophae/vue-treeselect/dist/vue-treeselect.css"
  import "splitpanes/dist/splitpanes.css"
  import { deptTreeSelect } from "@/api/system/user"
  import {getConfigKey} from "@/api/system/config";
  import {getDept,getInfoByImportCode} from "@/api/system/dept";
  import MapField from "@/components/house/MapField";
  import $ from "jquery";


  export default {
    name: "contractedVillageContractor",
    components: { Treeselect, Splitpanes, Pane,MapField },
    data() {
      return {
        fform: {},                         // 地块信息表单参数
        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,
        value:'',
        deptId:100,
        importCode:'',

      };
    },
    created() {
      console.log(this.$store.getters.user.user.dept.deptId)
      this.deptId = this.$store.getters.user.user.dept.deptId;
      this.importCode = this.$store.getters.user.user.dept.importCode;
      // 获取geoserver的地址
      this.getGeoServerUrl();
      // 获取地块图层名称
      this.getLandLayerName();
      // 获取村边界的图层名称
      this.getVillageBorderLayerName();
    },
    mounted() {
      // 初始化地图
      setTimeout(() => {
        this.initMap();
      }, 500);
    },
    methods: {
      onClickLeft(){
        history.back(-1);
      },
      // 获取geoserver的地址
      getGeoServerUrl() {
        getConfigKey("system.geoServer.url").then(response => {
          this.mapGeoServerUrl = response.msg;
        });
      },
      // 获取地块图层名称
      getLandLayerName() {
        getConfigKey("geoserver.layer.resourceLand").then(response => {
          this.landLayerName = response.msg;
        });
      },
      // 获取村边界的图层名称
      getVillageBorderLayerName() {
        getConfigKey("geoserver.layer.villageBorder").then(response => {
          this.villageBorderLayerName = response.msg;
        });
      },
      // 初始化地图
      initMap() {
        getDept(this.deptId).then(response => {
          let dept = response.data;
          if (dept.longitude && dept.latitude) {
            this.mapCenterLocation = [dept.longitude, dept.latitude];
          } 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: "import_code = '" + this.importCode + "'",
              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: "import_code = '" + this.importCode + "'",
              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.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.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">
  ::v-deep .van-nav-bar{
    background: linear-gradient( 173deg, #91E2D3 0%, #CDFCF0 100%);
    ::v-deep.van-icon{
      color: #000000;
    }
  }
  .location{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 2vh;
    position: absolute;
    top: 12vh;
    right: 0vw;
    z-index: 9;
    background-color: rgba(0,0,0,0.5);
    border-radius: 10px;
    img{
      width: 30px;
      height: 30px;
      border: 1px dashed #ffffff;
    }
  }
  .van-popup{
    background: linear-gradient( 180deg, #E5FFF4 0%, #ffffff 100%);
    .landPopup{
      width: 94%;
      margin: 0 auto;
      .landPopup_title{
        color: #29D2AF;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
  .app-container{
    /*background: #fff url("../../../../../static/images/contracted/contracted_index_bg.png") no-repeat center;*/
    background-size: 100% 100%;
    height: 100vh;
    padding: 0;
    overflow: hidden;
  }

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

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

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

  ::v-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){
        ::v-deep .van-checkbox__icon .van-icon{
          /*border-color: rgba(22,233,15,1);*/
          border: 4px solid #16E90F;
        }
      }
      &:nth-child(2){
        ::v-deep .van-checkbox__icon .van-icon{
          /*border-color: rgba(1,198,222,1);*/
          border: 4px solid #01C6DE;
        }
      }
      &:nth-child(3){
        ::v-deep .van-checkbox__icon .van-icon{
          /*border-color: rgba(238,238,0,1);*/
          border: 4px solid #EEEE00;
        }
      }
      &:nth-child(4){
        ::v-deep .van-checkbox__icon .van-icon{
          /*border-color: rgba(238,60,60,1);*/
          border: 4px solid #EE3C3C;
        }
      }
      &:nth-child(5){
        ::v-deep .van-checkbox__icon .van-icon{
          /*border-color: rgba(235,134,0,1);*/
          border: 4px solid #EB8600;
        }
      }
    }
    .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{
    height: 100vh;
    width: 100%;
  }

  .footer_main {
    flex: 0 0 120px;
    background: #ccc;
    display: flex;
    justify-content: center; /* 相对父元素水平居中 */
    align-items: center; /*  子元素相对父元素垂直居中 */
  }
  .search_box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 94%;
    margin: 2vh auto;
    position: absolute;
    left: 3vw;
    z-index: 9;

    .left{
      display: flex;
      align-items: center;
      flex: 1;
      background-color: #ffffff;
      border-radius: 50vh;
      overflow: hidden;
      margin-right: 3vw;
    }
    p{
      flex-shrink: 0;
    }
    button{
      flex-shrink: 0;
      background: linear-gradient( 271deg, #53E4A5 0%, #24DBDB 100%);
      border: none;
      width: 20vw;
    }
  }

  #land-btn-wrap {
    position: relative;
    width: 40%;
    left: 60%;
    bottom: 95%;
    z-index: 2000;
  }

  #landMapBox {
    width: 100%;
    height: 100%;
  }
  .ant-btn-red {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
    right: -36%;
  }
</style>