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="keyword" left-icon="search" placeholder="请输入用户名" />
      </div>
      <van-button type="primary" round @click="searchMap" >搜索</van-button>
    </div>

    <div class="location" :id="locationMap">
      <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  @click="$router.push({name:'appAttributeEdit',query:{fid:form.fid}})" src="../../assets/images/app/edit.png" width="25" alt=""></p>
          <van-field readonly v-model="form.deptName" label="区域位置名称" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.bsm" label="标识码" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.ysdm" label="要素代码" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.dkbm" label="地块代码" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.dkmc" label="地块名称" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.syqxz" label="所有权性质" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.dklb" label="地块类别" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.tdlylx" label="土地利用类型" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.dldj" label="地力等级" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.tdyt" label="土地用途" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.sfjbnt" label="是否基本农田" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.dkdz" label="地块东至" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.dkxz" label="地块西至" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.dknz" label="地块南至" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.dkbz" label="地块北至" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.dkbzxx" label="备注信息" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.zjrxm" label="指界人姓名" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.txmj" label="图显面积" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.scmjm" label="实测面积" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.sfzwd" label="是否账外地" placeholder="请输入" input-align="right" label-width="auto" />

          <p class="landPopup_title">经营数据 <img @click="$router.push({name:'appOperateEdit',query:{dkbm:form.dkbm}})" src="../../assets/images/app/edit.png" width="25" alt=""></p>
          <van-field readonly v-model="form.jymj" label="经营面积(亩)" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.jyfs" label="经营方式" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.jydxmc" label="经营对象名称" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.jykssj" label="经营开始时间" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.jyjssj" label="经营结束时间" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.cbje" label="承包金额(元)" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.surveyStatus" label="调查状态" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly v-model="form.bzxx" label="备注信息" placeholder="请输入" input-align="right" label-width="auto" />
          <van-field readonly label="实物图" placeholder="" input-align="right" label-width="auto" />
          <div v-if="!!form.dkImg">
            <el-tooltip effect="light" :content="item" placement="bottom" v-for="(item, index) in form.dkImg.split(',')" :key="index">
              <el-image style="height: 64px; width: 64px; margin: 2px; display: inline-block;" fit="scale-down" :src="baseRoutingUrll + item" :preview-src-list="form.dkImg.split(',').map((x) => baseRoutingUrll + x)"/>
            </el-tooltip>
          </div>
          <div class="footer_main">
            <van-button type="danger" @click="open = false" hairline size="large">关闭弹窗</van-button>
          </div>
        </div>
      </van-popup>

  </div>
</template>
<script>
  import { listLandQuery, getLandDetailByDkbm } from "@/api/resource/land"
  import {getConfigKey} from "@/api/system/config";
  import {getDept} from "@/api/system/dept";
  import {Toast} from "vant";
  import $ from "jquery";
  import Cookies from "js-cookie";


  export default {
    name: "appMap",
    components: { },
    data() {
      return {
        baseRoutingUrll:'/api',
        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,
        value:'',
        deptId:100,
        importCode:'',
        keyword:'',
        locationMap: this.guidProduct(),
        selectedHomesteadLayer: "",

      };
    },
    computed: {
      isAndroid() {
        return !!window._Native_object;
      },
      hasSelectLocationMode() {
        return this.isAndroid && typeof(window._Native_object.SelectLocationMode) === 'function';
      },
      hasGetLocationTimeout() {
        return this.isAndroid && typeof(window._Native_object.GetLocationTimeout) === 'function';
      },
      hasGetLocationMode() {
        return this.isAndroid && typeof(window._Native_object.GetLocationMode) === 'function';
      },
    },
    created() {
      this.deptId = Cookies.get('userDept');
      this.importCode = Cookies.get('importCode');
      // 获取geoserver的地址
      this.getGeoServerUrl();
      // 获取地块图层名称
      this.getLandLayerName();
      // 获取村边界的图层名称
      this.getVillageBorderLayerName();
    },
    mounted() {
      // 初始化地图
      listLandQuery().then(response => {
        setTimeout(() => {
          this.initMap(response.rows);
        }, 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;
        });
      },
      guidProduct(){
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
          var r = Math.random() * 16 | 0,
            v = c == 'x' ? r : (r & 0x3 | 0x8);
          return v.toString(16);
        });
      },
      // 初始化地图
      initMap(resourceList) {
        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: 14,
              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);

            });
          });
          var mark_layer = null;
          function addMark(lng, lat) {
            if(!mark_layer)
            {
              mark_layer = new ol.layer.Vector({
                source: new ol.source.Vector(),
              });
              that.map.addLayer(mark_layer);
            }
            else
              mark_layer.getSource().clear();

            let newFeature = new ol.Feature({
              geometry: new ol.geom.Point(ol.proj.fromLonLat([lng, lat])), //几何信息
              //name: "标注点",
            });
            newFeature.setStyle(new ol.style.Style({
              image: new ol.style.Icon({
                //设置图标偏移
                anchor: [0.5, 0.5],
                //标注样式的起点位置
                anchorOrigin: "top-right",
                //X方向单位：分数
                anchorXUnits: "fraction",
                //Y方向单位：像素
                anchorYUnits: "fraction",
                //偏移起点位置的方向
                offsetOrigin: "top-right",
                //透明度
                opacity: 0.9,
                //图片路径
                src: require('../../assets/images/app/mark.png'),
              }),
              zIndex: 9999,
            }));
            mark_layer.getSource().addFeature(newFeature);
          }
          var that = this;
          var Zb;
          $("#" + this.locationMap).click(function () {
            that.getCurrentLocation(res => {
              if (res.code == 200) {
                let lat = res.data.lat;
                let lng = res.data.lng;
                if(lat && lng){
                  Zb = [lng,lat];
                }else {
                  Zb =[115.452752, 31.789033];
                }
                addMark(lng,lat);
                that.map.getView().animate({
                  // 只设置需要的属性即可
                  center: ol.proj.fromLonLat(Zb), // 中心点
                  zoom: 18, // 缩放级别
                  rotation: undefined, // 缩放完成view视图旋转弧度
                  duration: 1000, // 缩放持续时间，默认不需要设置
                });
              }
            });
          });
          // 地图点击事件
          this.map.on("click", (evt) => {
            // 点击宅基地查看详情
            console.log(this.landLayer)
            if (this.landLayer) {
              const viewResolution = this.map.getView().getResolution();
              const url = this.landLayer.getSource()
                .getFeatureInfoUrl(evt.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'application/json'});
              console.log(url)
              if (url) {
                fetch(url)
                  .then(response => response.json())
                  .then(data => {

                    if (data.features.length > 0) {
                      let id = data.features[0].properties.DKBM;
                      getLandDetailByDkbm(id).then(response => {
                        this.form = response.data;
                        setTimeout(() => {
                          this.open = true;
                        }, 500);
                      });
                      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,0,17,0.3)",
                          }),
                          stroke: new ol.style.Stroke({
                            //边界样式
                            color: "#ff0000",
                            width: 3,
                          }),
                        })
                      });
                      this.map.addLayer(this.selectedHomesteadLayer);
                      this.map.getLayers().insertAt(4, this.selectedHomesteadLayer);
                      // getLandDetail(id).then(response => {
                      //   // this.form = response.data;
                      //   getLandDetailByDkbm(response.data.dkbm).then(res => {
                      //     res.data.txmj = response.data.txmj;
                      //     this.form = res.data;
                      //   });
                      //   // getOperationDetailByDkbm(response.data.dkbm).then(response => {
                      //   //   this.form = response.data
                      //   // })
                      //   setTimeout(() => {
                      //     this.open = true;
                      //   }, 500);
                      // });
                    }
                  });
              }
            }
          });
        });
      },
      filterLandLayer() {
        if (this.landLayer) {
          this.map.removeLayer(this.landLayer);
          this.landLayer = "";
        }
        this.addLandLayer();
      },
      getLocationMode() {
        let mode = '';
        if(this.hasGetLocationMode)
        {
          mode = window._Native_object.GetLocationMode();
        }
        console.log('当前选择定位模式: ' + mode);
        return mode;
      },
      getLocationTimeout() {
        let timeout = 10000;
        if(this.hasGetLocationMode)
        {
          let to = window._Native_object.GetLocationTimeout();
          if(to <= 0)
            to = 30000;
          timeout = to;
        }
        console.log('当前选择定位超时: ' + timeout);
        return timeout;
      },
      getCurrentLocation(callback) {
        // 1. 首先尝试Android宿主端
        if(this.isAndroid) // Android层注入全局对象
        {
          let mode = this.getLocationMode();
          if(mode !== 'h5')
          {
            console.log('使用Native获取定位');
            let coord = window._Native_object.GetLocation(null);
            console.log('Native坐标: ' + coord);
            if(coord)
            {
              let arr = coord.split(',');
              let res = {
                code: 200,
                data: {
                  lng: arr[0],
                  lat: arr[1],
                },
              };
              callback(res);
              return;
            }
          }
        }

        // 2. 再尝试浏览器
        if (navigator.geolocation) {
          console.log('使用浏览器获取定位');
          const loading = Toast.loading({
            message: '定位中...',
            duration: 0,
          });
          let timeout = this.getLocationTimeout();
          navigator.geolocation.getCurrentPosition(
            (position) => {
              const { latitude, longitude } = position.coords;
              console.log('浏览器定位结果: 经纬度=' + longitude + ', ' + latitude);
              let res = {
                code: 200,
                data: {
                  lng: longitude,
                  lat: latitude,
                },
              };
              loading.clear();
              callback(res);
            },
            (error) => {
              loading.clear();
              console.log('定位失败: ' + error.message);
              getQueryLand().then(callback);
            },
            { enableHighAccuracy: true, timeout: timeout }
          );
          return;
        }

        // 最后使用地区坐标
        console.log('使用地区坐标定位');
        getQueryLand().then(callback);
      },
      // 添加地块图层
      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);
      },
      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 = '种植业';
      },
      // 根据搜索条件查询宅基地
      searchMap() {
        if (this.keyword) {
          if (this.selectedHomesteadLayer) {
            this.map.removeLayer(this.selectedHomesteadLayer);
            this.selectedHomesteadLayer = "";
          }
          let map_cql_filter = "DKBM = '" + this.keyword + "'";
          // 定位查询位置
          let param_dw = {
            // srsName: "EPSG:3857",
            service: "WFS",
            version: "1.0.0",
            request: "GetFeature",
            typename: this.landLayerName,
            // maxFeatures:1000,
            cql_filter: map_cql_filter,
            outputFormat: "application/json",
          };
          let url_dw = this.mapGeoServerUrl + "/ows"; //wfsurl;
          url_dw = url_dw + "?";
          for (let key in param_dw) {
            url_dw = url_dw + key + "=" + param_dw[key] + "&";
          }
          url_dw = url_dw.substr(0, url_dw.length - 1);
          fetch(url_dw, {
            method: "GET", // *GET, POST, PUT, DELETE, etc.
          }).then((res) => {
            return res.json();
          }).then((data) => {
            if (data.features.length > 0) {
              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,0,17,0.3)",
                  }),
                  stroke: new ol.style.Stroke({
                    //边界样式
                    color: "#ff0000",
                    width: 3,
                  }),
                })
              });
              this.map.addLayer(this.selectedHomesteadLayer);
              this.map.getLayers().insertAt(4, this.selectedHomesteadLayer);

              let resolution = this.map.getView().getResolutionForExtent(data.bbox, this.map.getSize());
              this.map.getView().fit(data.bbox);
              this.map.getView().setResolution(resolution);
              // this.map.getView().setZoom(16);
            } else {
              this.msgError("没有搜索到该用户的宅基地")
            }
          });
        }
      }

    },
  };
</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>