From 6f2a64c4ea29f9e4b6711ba9a998760a7d71b1bb Mon Sep 17 00:00:00 2001
From: liuminjian <xxb_lmj@jiajiayue.com>
Date: Fri, 30 Jul 2021 16:29:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/homestead/index.vue | 669 +++++++++++++++++++++++++++++-----
 1 file changed, 586 insertions(+), 83 deletions(-)

diff --git a/src/views/homestead/index.vue b/src/views/homestead/index.vue
index 565e9a8d..ebe94552 100644
--- a/src/views/homestead/index.vue
+++ b/src/views/homestead/index.vue
@@ -1,11 +1,15 @@
 <template>
   <div class="app-container">
+    <!-- <div style="position: relative; z-index: 999999"> -->
     <div style="display: none">
       <select id="zhen"></select>
       <select id="cun" autofocus></select>
       <input id="texiao_fang" type="button" value="特效农房" /> 
       <input id="texiao_di" type="button" value="特效农地" /> 
       <input id="qingchu" type="button" value="清除" /> 
+      <button id="drawPolygon">绘制地图</button>
+      <button id="drawRemove">清除画图</button>
+      <button id="drawReset">还原之前图层</button>
     </div>
     <div class="map_area" id="mapWrap"></div>
     <!--列表 定位-->
@@ -42,6 +46,8 @@
           class="flex_block"
           v-for="(items, index) in hcBottonHouseArr"
           :key="index"
+          :class="{ active: selectChooseOrder == index }"
+          @click="housingSerial(items, index)"
         >
           <div class="name_text">{{ items.name }}</div>
           <div class="square_text">{{ items.mj }}㎡</div>
@@ -64,6 +70,8 @@
           class="flex_block"
           v-for="(items, index) in hcBottonLandArr"
           :key="index"
+          :class="{ active: selectChooseOrder == index }"
+          @click="housingSerial(items, index)"
         >
           <div class="name_text">{{ items.name }}</div>
           <div class="square_text">{{ items.mj }}亩</div>
@@ -159,7 +167,13 @@
     <div class="searchBar_wrap">
       <div class="actionBar_wrap" v-if="searchBarOperVisbile">
         <div class="m_list">
-          <div class="tensile active"><div class="icon"></div></div>
+          <div
+            class="tensile"
+            :class="{ active: draw.drawMapPolygon }"
+            @click="drawMapPolygonFun"
+          >
+            <div class="icon"></div>
+          </div>
         </div>
         <div class="m_list">
           <div class="positioning">
@@ -182,7 +196,7 @@
             <div class="icon"></div>
           </div>
         </div>
-        <div class="m_list">
+        <div class="m_list" @click="farmlandEditSwitchFun">
           <div class="correct"></div>
         </div>
       </div>
@@ -232,7 +246,8 @@
 
     <!--房地全部信息展示-->
     <div class="landHomesteadDetails_wrap">
-      <div class="content_mian">
+      <!---农房-->
+      <div class="content_mian" v-if="farmhouseStatus == 0">
         <!--内容-->
         <div class="serial_flex">
           <div class="number">农房编号<span>31</span></div>
@@ -323,13 +338,92 @@
           <div class="editor_icon"></div>
         </div>
       </div>
+      <!---农地-->
+      <div class="content_mian" v-else-if="farmhouseStatus == 1">
+        <!--内容-->
+        <div class="serial_flex">
+          <div class="number">农地编号<span>31</span></div>
+          <div class="localhref"></div>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">农地使用人名称</span
+          ><span class="content">孙全礼</span>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">村名</span><span class="content">南郊村</span>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">是否有审批手续</span
+          ><span class="content">是</span>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">土地证号</span
+          ><span class="content">38718490184</span>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">土地面积</span
+          ><span class="content">大约3亩</span>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">现状情况</span
+          ><span class="content">已流转</span>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">是否有流转意向</span
+          ><span class="content"></span>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">承包人</span
+          ><span class="content">李福任</span>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">流转剩余年限</span
+          ><span class="content">10年</span>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">流转合同截止日期</span
+          ><span class="content">2021.7.1-2031. 6.30</span>
+        </div>
+
+        <!--上传图片-->
+        <div class="uploadPictures_block">
+          <div class="statusQuo">
+            <div class="picture"></div>
+            <div class="describe">现<br />状<br />图<br />片</div>
+          </div>
+          <div class="statusQuo">
+            <div class="picture"></div>
+            <div class="describe">历<br />史<br />图<br />片</div>
+          </div>
+        </div>
+        <!--编辑-->
+        <div class="editor_block">
+          <div class="editor_icon"></div>
+        </div>
+      </div>
     </div>
     <!--房地全部信息编辑-->
-    <div class="landHomesteadEdit_wrap">
+    <div
+      class="landHomesteadEdit_wrap"
+      v-show="landHomesteadEditVisbile"
+      style="bottom: 0"
+    >
       <div class="content_mian">
-        <div class="info_title">录入宗地信息</div>
-        <div class="flex_main">
-          <!--1-->
+        <div class="info_title">
+          {{ this.farmhouseStatus == 0 ? "录入宗地信息" : "录入农地信息" }}
+        </div>
+        <!--  -->
+        <div class="flex_main" v-if="this.farmhouseStatus == 0">
           <div class="flex_block">
             <div class="number_s50 mr50">
               <div class="title_m">农房编号</div>
@@ -562,21 +656,233 @@
             </div>
           </div>
         </div>
+        <div class="flex_main" v-else-if="this.farmhouseStatus == 1">
+          <!--1-->
+          <div class="flex_block">
+            <div class="number_s50 mr50">
+              <div class="title_m">农地编号</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="农地编号"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+            <div class="number_s50">
+              <div class="title_m">农地使用人名称</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="农地使用人名称"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+          </div>
+          <!--1-->
+          <div class="flex_block">
+            <div class="number_s60 mr50">
+              <div class="title_m">村名</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="村名"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+            <div class="number_s40">
+              <div class="title_m">土地证号</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="土地证号"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+          </div>
+          <!--1-->
+          <div class="flex_block">
+            <div class="number_s60 mr50">
+              <div class="title_m">是否有审批手续</div>
+              <div class="input_m select">
+                <i class="dropDown_icon"></i>
+                <van-field
+                  v-model="message"
+                  readonly
+                  clickable
+                  name="picker"
+                  placeholder="是否有审批手续"
+                  class="landHomesteadEdit_input"
+                  @click="showPicker = true"
+                />
+                <van-popup v-model="showPicker" position="bottom">
+                  <van-picker
+                    show-toolbar
+                    :columns="columns"
+                    @confirm="onConfirm"
+                    @cancel="showPicker = false"
+                  />
+                </van-popup>
+              </div>
+            </div>
+            <div class="number_s40">
+              <div class="title_m">现状情况</div>
+              <div class="input_m select">
+                <i class="dropDown_icon"></i>
+                <van-field
+                  v-model="message"
+                  readonly
+                  clickable
+                  name="picker"
+                  placeholder="现状情况"
+                  class="landHomesteadEdit_input"
+                  @click="showPicker = true"
+                />
+                <van-popup v-model="showPicker" position="bottom">
+                  <van-picker
+                    show-toolbar
+                    :columns="columns"
+                    @confirm="onConfirm"
+                    @cancel="showPicker = false"
+                  />
+                </van-popup>
+              </div>
+            </div>
+          </div>
+
+          <!--1-->
+          <div class="flex_block">
+            <div class="number_s35 mr50">
+              <div class="title_m">农用地类型</div>
+              <div class="input_m select">
+                <i class="dropDown_icon"></i>
+                <van-field
+                  v-model="message"
+                  readonly
+                  clickable
+                  name="picker"
+                  placeholder="农用地类型"
+                  class="landHomesteadEdit_input"
+                  @click="showPicker = true"
+                />
+                <van-popup v-model="showPicker" position="bottom">
+                  <van-picker
+                    show-toolbar
+                    :columns="columns"
+                    @confirm="onConfirm"
+                    @cancel="showPicker = false"
+                  />
+                </van-popup>
+              </div>
+            </div>
+            <div class="number_s35 mr50">
+              <div class="title_m">土地面积</div>
+              <div class="input_m about">
+                <span class="about_symbol">≈</span>
+                <van-field
+                  v-model="message"
+                  placeholder="土地面积"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+            <div class="number_s30">
+              <div class="title_m">是否有流转意向</div>
+              <div class="input_m select">
+                <i class="dropDown_icon"></i>
+                <van-field
+                  v-model="message"
+                  readonly
+                  clickable
+                  name="picker"
+                  placeholder="是否有流转意向"
+                  class="landHomesteadEdit_input"
+                  @click="showPicker = true"
+                />
+                <van-popup v-model="showPicker" position="bottom">
+                  <van-picker
+                    show-toolbar
+                    :columns="columns"
+                    @confirm="onConfirm"
+                    @cancel="showPicker = false"
+                  />
+                </van-popup>
+              </div>
+            </div>
+          </div>
+
+          <!--1-->
+          <div class="flex_block">
+            <div class="number_s50 mr50">
+              <div class="title_m">承包人</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="承包人"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+            <div class="number_s50">
+              <div class="title_m">流转剩余年限</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="流转剩余年限"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+          </div>
+
+          <!--1-->
+          <div class="flex_block">
+            <div class="number_s100">
+              <div class="title_m">流转合同截止日期</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="流转合同截止日期"
+                  class="landHomesteadEdit_input"
+                  readonly
+                  @click="landHomesteadEditcalendar = true"
+                />
+                <van-calendar
+                  v-model="landHomesteadEditcalendar"
+                  @confirm="landHomesteadEdConfirm"
+                  type="range"
+                />
+                <!-- :min-date="new Date(2018, 1, 1)" :max-date="new Date(2010, 0, 31)" -->
+              </div>
+            </div>
+          </div>
+
+          <!--2-->
+          <div class="uploadPicturesFlex_block">
+            <div class="title_m">上传图片</div>
+            <div class="main_m">
+              <van-uploader v-model="fileList" multiple :max-count="2" />
+            </div>
+          </div>
+        </div>
       </div>
       <div class="footer_main">
-        <div class="cancel">取消</div>
-        <div class="save">保存</div>
+        <div class="cancel" @click="landHomesteadEditCancel">取消</div>
+        <div class="save" @click="landHomesteadEditSave">保存</div>
       </div>
     </div>
     <!--农地农房选择-->
-    <div class="farmlandEditSwitch_wrap">
+    <div class="farmlandEditSwitch_wrap" v-show="farmlandEditSwitchVisbule">
       <div class="mains">
-        <div class="close_btn"></div>
-        <div class="farmhouse">
+        <div class="close_btn" @click="farmlandEditFun"></div>
+        <div class="farmhouse" @click="addNewPlot('farmhouse')">
           <div class="icons"></div>
           <p class="names">农房</p>
         </div>
-        <div class="farmland">
+        <div class="farmland" @click="addNewPlot('land')">
           <div class="icons"></div>
           <p class="names">农地</p>
         </div>
@@ -631,9 +937,26 @@ export default {
       hcBottonHouseArr: [],
       //待租列表 地
       hcBottonLandArr: [],
-
       //搜索栏目-操作栏显隐
       searchBarOperVisbile: false,
+      //地图绘制状态
+      draw: {
+        drawMapPolygon: false, //绘制地图
+      },
+      //地图绘制坐标存储
+      coordinateList: [],
+      //新建选择农房土地弹窗 显隐
+      farmlandEditSwitchVisbule: false, //
+      //编辑房屋土地信息--显隐
+      landHomesteadEditVisbile: false,
+      //查看编辑房屋、土地--类型  0 农房 1 农地
+      farmhouseStatus: 0,
+      //新增日历显影
+      landHomesteadEditcalendar: false,
+      //选择顺序
+      selectChooseOrder: 0,
+
+      // <van-calendar v-model="landHomesteadEditcalendar" @confirm="" />
 
       //以下删
       message: "",
@@ -646,6 +969,117 @@ export default {
     this.initAxios();
   },
   methods: {
+    //绘制多边形地图
+    drawMapPolygonFun() {
+      let drawMapPolygon = this.draw.drawMapPolygon;
+      if (drawMapPolygon == false) {
+        this.$set(this.draw, "drawMapPolygon", true);
+        $("#drawPolygon").trigger("click");
+      } else {
+        $("#drawRemove").trigger("click");
+        this.$set(this.draw, "drawMapPolygon", false);
+      }
+    },
+    //新建选择农房土地弹窗
+    farmlandEditSwitchFun() {
+      if (this.coordinateList.length == 0) {
+        this.$toast("请先完成绘制");
+        return false;
+      }
+
+      this.farmlandEditSwitchVisbuleFun("show");
+      this.searchBarOperVisbile = false;
+    },
+    //关闭选择农房土地
+    farmlandEditFun() {
+      this.farmlandEditSwitchVisbuleFun("hide");
+
+      //初始化地图
+      this.initDraw();
+    },
+    addNewPlot(type) {
+      this.farmlandEditSwitchVisbuleFun("hide");
+      this.landHomesteadEditVisbileFun("show");
+
+      //farmhouse农房    land农地
+      if (type == "farmhouse") {
+        this.farmhouseStatus = 0;
+      } else if (type == "land") {
+        this.farmhouseStatus = 1;
+      }
+    },
+    //新增地块 编辑页 显影
+    landHomesteadEditVisbileFun(type) {
+      if (type == "show") {
+        this.landHomesteadEditVisbile = true;
+        $(".landHomesteadEdit_wrap").css({ bottom: "-100vh" });
+        $(".landHomesteadEdit_wrap").animate(
+          {
+            bottom: "0",
+          },
+          300
+        );
+      } else {
+        $(".landHomesteadEdit_wrap").css({ bottom: "0" });
+        $(".landHomesteadEdit_wrap").animate(
+          {
+            bottom: "-100vh",
+          },
+          300
+        );
+        setTimeout(() => {
+          this.landHomesteadEditVisbile = false;
+        }, 300);
+      }
+    },
+    //选择农地 农房显影
+    farmlandEditSwitchVisbuleFun(type) {
+      if (type == "show") {
+        this.farmlandEditSwitchVisbule = true;
+        $(".farmlandEditSwitch_wrap").css({ opacity: "0" });
+        $(".farmlandEditSwitch_wrap").animate(
+          {
+            opacity: "1",
+          },
+          300
+        );
+      } else {
+        $(".farmlandEditSwitch_wrap").css({ opacity: "1" });
+        $(".farmlandEditSwitch_wrap").animate(
+          {
+            opacity: "0",
+          },
+          300
+        );
+        setTimeout(() => {
+          this.farmlandEditSwitchVisbule = false;
+        }, 300);
+      }
+    },
+    //新增地块 编辑页 取消
+    landHomesteadEditCancel() {
+      this.landHomesteadEditVisbileFun("hide");
+      this.farmlandEditSwitchVisbuleFun("show");
+    },
+    //新增地块 编辑页  保存
+    landHomesteadEditSave() {
+      this.landHomesteadEditVisbileFun("hide");
+      this.initDraw();
+    },
+
+    landHomesteadEdConfirm(data) {
+      this.landHomesteadEditcalendar = false;
+      //获取日历的值
+    },
+    //初始化绘制
+    initDraw() {
+      //清除数据
+      $("#drawRemove").trigger("click");
+      $("#drawReset").trigger("click");
+      this.coordinateList = [];
+
+      this.draw.drawMapPolygon = false; //绘制地图
+    },
     initAxios() {
       //获取区
       this.mapAreaSelectValue();
@@ -793,6 +1227,8 @@ export default {
         this.searchBarOperVisbile = true;
       } else {
         this.searchBarOperVisbile = false;
+        //初始化绘制
+        this.initDraw();
       }
     },
     townVisbileFun() {
@@ -917,6 +1353,17 @@ export default {
       this.selectChooseOrder = 0;
     },
 
+    housingSerial(item, index) {
+      this.selectChooseOrder = index;
+      if (item.type == "house") {
+        // $("#texiao_fang").val(item.name);
+        // $("#texiao_fang").trigger("click");
+      } else {
+        // $("#texiao_di").val(item.name);
+        // $("#texiao_di").trigger("click");
+      }
+    },
+
     //加载地图
     mapBackground() {
       let _this = this;
@@ -1532,72 +1979,119 @@ export default {
         console.log("++++++++++++" + cun);
         //业务图层  wms服务
         //for (var i = 0; i < difang.length; i++) {
-          ///if (difang[i] == "nsgk_hc:t_geo_hc_house") {
-            cql_filter = "CM='" + cun + "'";
-          //} else {
-          //  cql_filter = "CM='" + cun + "'";
-          //}
-          nongZt = new ol.layer.Tile({
-            source: new ol.source.TileWMS({
-              //url: 'http://192.168.31.150:8888/geoserver/mywork_mysql/wms',
-              url: "http://116.255.135.38:8080/geoserver/nsgk_hc/wms",
-              //url: 'http://localhost:8888/geoserver/mywork_mysql/wms',
-              //url: 'http://localhost:8888/geoserver/new_shp/wms',
-              params: {
-                LAYERS: difang,
-                //'LAYERS': 'new_shp:new_shp_all',
-                TILED: true,
-                cql_filter: cql_filter,
-                SRID: 3857,
-              },
-            }),
-          });
-          //}
-          //定位查询位置
-          let param_dw = {
-            srsName: "EPSG:3857",
-            service: "WFS",
-            version: "1.0.0",
-            request: "GetFeature",
-            typename: difang,
-            //featureNS: 'nsgk_hc',//命名空间 URI
-            cql_filter: cql_filter,
-            //featurePrefix: 'nationalwater',//工作区名称
-            //featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
-            outputFormat: "application/json",
-            //filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值
-          };
-          let url_dw = "http://116.255.135.38:8080/geoserver/nsgk_hc/wfs"; //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: "POST", // *GET, POST, PUT, DELETE, etc.
+        ///if (difang[i] == "nsgk_hc:t_geo_hc_house") {
+        cql_filter = "CM='" + cun + "'";
+        //} else {
+        //  cql_filter = "CM='" + cun + "'";
+        //}
+        nongZt = new ol.layer.Tile({
+          source: new ol.source.TileWMS({
+            //url: 'http://192.168.31.150:8888/geoserver/mywork_mysql/wms',
+            url: "http://116.255.135.38:8080/geoserver/nsgk_hc/wms",
+            //url: 'http://localhost:8888/geoserver/mywork_mysql/wms',
+            //url: 'http://localhost:8888/geoserver/new_shp/wms',
+            params: {
+              LAYERS: difang,
+              //'LAYERS': 'new_shp:new_shp_all',
+              TILED: true,
+              cql_filter: cql_filter,
+              SRID: 3857,
+            },
+          }),
+        });
+        //}
+        //定位查询位置
+        let param_dw = {
+          srsName: "EPSG:3857",
+          service: "WFS",
+          version: "1.0.0",
+          request: "GetFeature",
+          typename: difang,
+          //featureNS: 'nsgk_hc',//命名空间 URI
+          cql_filter: cql_filter,
+          //featurePrefix: 'nationalwater',//工作区名称
+          //featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
+          outputFormat: "application/json",
+          //filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值
+        };
+        let url_dw = "http://116.255.135.38:8080/geoserver/nsgk_hc/wfs"; //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: "POST", // *GET, POST, PUT, DELETE, etc.
+        })
+          .then((res) => {
+            var geojsonmap = res.json();
+            return geojsonmap;
           })
-            .then((res) => {
-              var geojsonmap = res.json();
-              return geojsonmap;
-            })
-            .then((data) => {
-              //var datamap = data.bbox;
-              // var datamap = data.features[0].bbox;
-              // map.getView().animate({
-              //   // 只设置需要的属性即可
-              //   center: datamap, // 中心点
-              //   zoom: 15, // 缩放级别
-              //   rotation: undefined, // 缩放完成view视图旋转弧度
-              //   duration: 1000, // 缩放持续时间，默认不需要设置
-              // });
-            })
-            .catch((error) => {
-              console.log("【异常】", error);
-            });
-          map.addLayer(nongZt);
+          .then((data) => {
+            //var datamap = data.bbox;
+            // var datamap = data.features[0].bbox;
+            // map.getView().animate({
+            //   // 只设置需要的属性即可
+            //   center: datamap, // 中心点
+            //   zoom: 15, // 缩放级别
+            //   rotation: undefined, // 缩放完成view视图旋转弧度
+            //   duration: 1000, // 缩放持续时间，默认不需要设置
+            // });
+          })
+          .catch((error) => {
+            console.log("【异常】", error);
+          });
+        map.addLayer(nongZt);
+
         //}
       });
       //村定位查询-------------------------------------end
+
+      //开始绘制地图  ------------------- start
+
+      var vector_drawing;
+      var draw;
+      //开始绘制地图
+      $("#drawPolygon").click(function () {
+        console.log("111");
+        //map.removeLayer(zjd_land);
+        map.removeLayer(vector_drawing);
+        //var source = new ol.source.Vector({wrapX: false});
+        vector_drawing = new ol.layer.Vector({
+          source: new ol.source.Vector(),
+        });
+        map.addLayer(vector_drawing);
+
+        function addInteraction() {
+          draw = new ol.interaction.Draw({
+            source: vector_drawing.getSource(),
+            type: "Polygon",
+          });
+          draw.on("drawend", function (evt) {
+            var feature = evt.feature;
+            var geometry = feature.getGeometry();
+            var coordinate = geometry.getCoordinates();
+            console.log("打印" + coordinate);
+            _this.coordinateList.push(coordinate);
+
+            //that.drawInsert = coordinate;
+          });
+          map.addInteraction(draw);
+        }
+
+        addInteraction();
+      });
+      //清除画图鼠标点击事件
+      $("#drawRemove").click(function () {
+        map.removeInteraction(draw);
+      });
+      //还原之前图层
+      $("#drawReset").click(function () {
+        map.removeLayer(vector_drawing);
+        //map.addLayer(zjd_land);
+      });
+
+      //开始绘制地图  ------------------- end
     },
 
     /*以下删*/
@@ -1703,7 +2197,7 @@ export default {
     .title_m {
       color: #333;
       line-height: 36px;
-      padding: 20px 40px 32px;
+      padding: 20px 40px 22px;
       .name {
         font-size: 40px;
         line-height: 42px;
@@ -1721,7 +2215,7 @@ export default {
 
     .main_m {
       overflow-y: auto;
-      padding: 0 40px;
+      padding: 10px 0;
       // height: 300px;
       flex: 1;
       .flex_block {
@@ -1729,6 +2223,10 @@ export default {
         display: flex;
         // justify-content: center; /* 相对父元素水平居中 */
         align-items: center; /*  子元素相对父元素垂直居中 */
+        padding: 0 40px;
+        &.active {
+          box-shadow: 0px 0px 10px rgba(24, 45, 51, 0.5);
+        }
         .name_text {
           font-size: 34px;
           flex: 1;
@@ -2181,6 +2679,7 @@ export default {
     left: 0;
     bottom: 0;
     width: 100%;
+    z-index: 99;
     height: calc(100% - 190px);
 
     .content_mian {
@@ -2268,11 +2767,10 @@ export default {
     }
   }
   .landHomesteadEdit_wrap {
-    display: none;
-    // display: flex;
+    display: flex;
     position: absolute;
     left: 0;
-    bottom: 0;
+    bottom: -100vh;
     width: 100%;
     height: calc(100% - 190px);
     flex-direction: column;
@@ -2435,7 +2933,6 @@ export default {
     }
   }
   .farmlandEditSwitch_wrap {
-    display: none;
     width: 100vw;
     height: 100vh;
     background: url("../../assets/images/homestead/farmlandEditSwitch_bg.png")
@@ -2452,7 +2949,7 @@ export default {
       position: absolute;
       left: 50%;
       top: 50%;
-      margin: -272px 0 0 -240px;
+      margin: -272px 0 0 -272px;
       z-index: 1002;
       border-radius: 30px;
       padding: 0 30px;
@@ -2543,4 +3040,10 @@ export default {
   border-radius: 10px;
   background-color: #ffffff;
 }
+
+::v-deep {
+  .van-overlay {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+}
 </style>