zhangzl
/
rongxin.dashboard
1
0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
管理系统PC端
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
80 提交
1 分支
5.5 MiB
 
 
 
 
目录树: 22d6ecba06
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 '22d6ecba06'
${ noResults }
rongxin.dashboard/src/views/app/map.vue

967 行
34 KiB
原始文件 Blame 文件历史 

  1. <template>

  2.   <div class="app-container">

  3.     <van-nav-bar

  4.       title="土地列表管理"

  5.       left-arrow

  6.       placeholder

  7.       safe-area-inset-top

  8.       @click-left="onClickLeft"

  9.     />

  10.     <div class="search_box">

  11.       <div class="left">

  12.         <van-field v-model="value" left-icon="search" placeholder="请输入用户名" />

  13.       </div>

  14.       <van-button type="primary" round >搜索</van-button>

  15.     </div>

  16. 

  17.     <div class="location" :id="locationMap">

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

  19.     </div>

  20. 

  21.     <div id="full-screen-acceptance" style="width: 100%;height:100vh;">

  22.       <!--<div id="landMapDiv"></div>-->

  23.       <div id="landMapBox"></div>

  24. <!--      <div id='land-btn-wrap'>-->

  25. <!--        <el-row>-->

  26. <!--          <input id="drawPolygon" class="ant-btn ant-btn-red" type="button" value="画图"/>&nbsp;&nbsp;-->

  27. <!--          &lt;!&ndash; <input id="drawRemove" type="button" class="ant-btn ant-btn-red" value="取消画图"/>&nbsp;&nbsp; &ndash;&gt;-->

  28. <!--          <input id="drawReset" type="button" class="ant-btn ant-btn-red" value="还原"/>-->

  29. <!--        </el-row>-->

  30. <!--      </div>-->

  31.     </div>

  32. 

  33. 

  34. 

  35.       <van-popup v-model="open" position="bottom" round >

  36.         <div class="landPopup">

  37.           <p class="landPopup_title">属性数据 <img  @click="$router.push({name:'appAttributeEdit',query:{fid:form.fid}})" src="../../assets/images/app/edit.png" width="25" alt=""></p>

  38.           <van-field readonly v-model="form.deptName" label="区域位置名称" placeholder="请输入" input-align="right" label-width="auto" />

  39.           <van-field readonly v-model="form.bsm" label="标识码" placeholder="请输入" input-align="right" label-width="auto" />

  40.           <van-field readonly v-model="form.ysdm" label="要素代码" placeholder="请输入" input-align="right" label-width="auto" />

  41.           <van-field readonly v-model="form.dkbm" label="地块代码" placeholder="请输入" input-align="right" label-width="auto" />

  42.           <van-field readonly v-model="form.dkmc" label="地块名称" placeholder="请输入" input-align="right" label-width="auto" />

  43.           <van-field readonly v-model="form.syqxz" label="所有权性质" placeholder="请输入" input-align="right" label-width="auto" />

  44.           <van-field readonly v-model="form.dklb" label="地块类别" placeholder="请输入" input-align="right" label-width="auto" />

  45.           <van-field readonly v-model="form.tdlylx" label="土地利用类型" placeholder="请输入" input-align="right" label-width="auto" />

  46.           <van-field readonly v-model="form.dldj" label="地力等级" placeholder="请输入" input-align="right" label-width="auto" />

  47.           <van-field readonly v-model="form.tdyt" label="土地用途" placeholder="请输入" input-align="right" label-width="auto" />

  48.           <van-field readonly v-model="form.sfjbnt" label="是否基本农田" placeholder="请输入" input-align="right" label-width="auto" />

  49.           <van-field readonly v-model="form.dkdz" label="地块东至" placeholder="请输入" input-align="right" label-width="auto" />

  50.           <van-field readonly v-model="form.dkxz" label="地块西至" placeholder="请输入" input-align="right" label-width="auto" />

  51.           <van-field readonly v-model="form.dknz" label="地块南至" placeholder="请输入" input-align="right" label-width="auto" />

  52.           <van-field readonly v-model="form.dkbz" label="地块北至" placeholder="请输入" input-align="right" label-width="auto" />

  53.           <van-field readonly v-model="form.dkbzxx" label="备注信息" placeholder="请输入" input-align="right" label-width="auto" />

  54.           <van-field readonly v-model="form.zjrxm" label="指界人姓名" placeholder="请输入" input-align="right" label-width="auto" />

  55.           <van-field readonly v-model="form.txmj" label="图显面积" placeholder="请输入" input-align="right" label-width="auto" />

  56.           <van-field readonly v-model="form.scmjm" label="实测面积" placeholder="请输入" input-align="right" label-width="auto" />

  57.           <van-field readonly v-model="form.sfzwd" label="是否账外地" placeholder="请输入" input-align="right" label-width="auto" />

  58. 

  59.           <p class="landPopup_title">经营数据 <img @click="$router.push({name:'appOperateEdit',query:{dkbm:form.dkbm}})" src="../../assets/images/app/edit.png" width="25" alt=""></p>

  60.           <van-field readonly v-model="form.jymj" label="经营面积(亩)" placeholder="请输入" input-align="right" label-width="auto" />

  61.           <van-field readonly v-model="form.jyfs" label="经营方式" placeholder="请输入" input-align="right" label-width="auto" />

  62.           <van-field readonly v-model="form.jydxmc" label="经营对象名称" placeholder="请输入" input-align="right" label-width="auto" />

  63.           <van-field readonly v-model="form.jykssj" label="经营开始时间" placeholder="请输入" input-align="right" label-width="auto" />

  64.           <van-field readonly v-model="form.jyjssj" label="经营结束时间" placeholder="请输入" input-align="right" label-width="auto" />

  65.           <van-field readonly v-model="form.cbje" label="承包金额(元)" placeholder="请输入" input-align="right" label-width="auto" />

  66.           <van-field readonly v-model="form.surveyStatus" label="调查状态" placeholder="请输入" input-align="right" label-width="auto" />

  67.           <van-field readonly v-model="form.bzxx" label="备注信息" placeholder="请输入" input-align="right" label-width="auto" />

  68.           <van-field readonly label="实物图" placeholder="" input-align="right" label-width="auto" />

  69.           <div v-if="!!form.dkImg">

  70.             <el-tooltip effect="light" :content="item" placement="bottom" v-for="(item, index) in form.dkImg.split(',')" :key="index">

  71.               <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)"/>

  72.             </el-tooltip>

  73.           </div>

  74.           <div class="footer_main">

  75.             <van-button type="danger" @click="open = false" hairline size="large">关闭弹窗</van-button>

  76.           </div>

  77.         </div>

  78.       </van-popup>

  79. 

  80.   </div>

  81. </template>

  82. <script>

  83.   import { listLand, listLandQuery,getLand, getLandDetail, getLandDetailByDkbm, delLand, addLand, updateLand, printLand } from "@/api/resource/land"

  84.   import { getOperationDetailByDkbm } from "@/api/resource/operation"

  85.   import { areaSavePri, cleanSavePri } from "@/api/gis/map"

  86.   import { getToken } from "@/utils/auth"

  87.   import Treeselect from "@riophae/vue-treeselect";

  88.   import { Splitpanes, Pane } from "splitpanes"

  89.   import "@riophae/vue-treeselect/dist/vue-treeselect.css"

  90.   import "splitpanes/dist/splitpanes.css"

  91.   import { deptTreeSelect } from "@/api/system/user"

  92.   import {getConfigKey} from "@/api/system/config";

  93.   import {getDept,getInfoByImportCode} from "@/api/system/dept";

  94.   import MapField from "@/components/house/MapField";

  95.   import {Toast} from "vant";

  96.   import $ from "jquery";

  97. 

  98. 

  99.   export default {

  100.     name: "contractedVillageContractor",

  101.     components: { Treeselect, Splitpanes, Pane,MapField },

  102.     data() {

  103.       return {

  104.         baseRoutingUrll:'/api',

  105.         form: {},                         // 地块信息表单参数

  106.         map: "",                          // 地图

  107.         mapGeoServerUrl: "",              // geoserver地址

  108.         mapCenterLocation: [],            // 地图中心坐标

  109.         landLayerName: "",                // 地块图层名称

  110.         landLayer: "",                    // 地块图层

  111.         mapBorder: "",                    // 地图边界

  112.         villageBorderLayerName: "",       // 乡镇边界图层名称

  113.         vectorLayer: "",                  // 绘制的矢量图层

  114. 

  115.         title: "",                        // 弹出层标题

  116.         open: false,                      // 是否显示地块弹出层

  117.         syqxzOptions: [],                 // 所有权性质字典

  118.         syqxzText: null,                  // 所有权性质标签名

  119.         showOwnership: false,             // 控制所有权性质字典弹出层的显示和隐藏

  120.         dklbOptions: [],                  // 地块类别字典

  121.         dklbText: null,                   // 地块类别标签名

  122.         showLandCategory: false,          // 控制的地块类别字典弹出层的显示和隐藏

  123.         dldjOptions: [],                  // 地力等级字典

  124.         dldjText: null,                   // 地力等级标签名

  125.         showLandGrade: false,             // 控制地力等级字典弹出层的显示和隐藏

  126.         tdytOptions: [],                  // 土地用途字典

  127.         tdytText: null,                   // 土地用途标签名

  128.         showLandPurpose: false,           // 控制土地用途字典弹出层的显示和隐藏

  129.         tdlylxOptions: [],                // 土地利用类型

  130.         tdlylxText: null,                 // 土地利用类型标签名

  131.         showLandType: false,              // 控制土地利用类型字典弹出层的显示和隐藏

  132.         sfjbntOptions: [],                // 是否基本农田字典

  133.         showSaveBtn: false,               // 控制保存按钮的显示隐藏

  134.         showDeleteBtn: false,             // 控制删除按钮的显示隐藏

  135.         // isDisabled: false,                // 是否禁用

  136.         taskStatus: null,                 // 调查任务的完成状态：1表示已完成，2表示未完成

  137.         landCategory: ['10'],             // 地块类别

  138. 

  139.         showLegend:true,

  140.         value:'',

  141.         deptId:100,

  142.         importCode:'',

  143.         locationMap: this.guidProduct(),

  144. 

  145.       };

  146.     },

  147.     computed: {

  148.       isAndroid() {

  149.         return !!window._Native_object;

  150.       },

  151.       hasSelectLocationMode() {

  152.         return this.isAndroid && typeof(window._Native_object.SelectLocationMode) === 'function';

  153.       },

  154.       hasGetLocationTimeout() {

  155.         return this.isAndroid && typeof(window._Native_object.GetLocationTimeout) === 'function';

  156.       },

  157.       hasGetLocationMode() {

  158.         return this.isAndroid && typeof(window._Native_object.GetLocationMode) === 'function';

  159.       },

  160.     },

  161.     created() {

  162.       console.log(this.$store.getters.user.user.dept.deptId)

  163.       this.deptId = this.$store.getters.user.user.dept.deptId;

  164.       this.importCode = this.$store.getters.user.user.dept.importCode;

  165.       // 获取geoserver的地址

  166.       this.getGeoServerUrl();

  167.       // 获取地块图层名称

  168.       this.getLandLayerName();

  169.       // 获取村边界的图层名称

  170.       this.getVillageBorderLayerName();

  171.     },

  172.     mounted() {

  173.       // 初始化地图

  174.       listLandQuery().then(response => {

  175.         setTimeout(() => {

  176.           this.initMap(response.rows);

  177.         }, 500);

  178.       });

  179.     },

  180.     methods: {

  181.       onClickLeft(){

  182.         history.back(-1);

  183.       },

  184.       // 获取geoserver的地址

  185.       getGeoServerUrl() {

  186.         getConfigKey("system.geoServer.url").then(response => {

  187.           this.mapGeoServerUrl = response.msg;

  188.         });

  189.       },

  190.       // 获取地块图层名称

  191.       getLandLayerName() {

  192.         getConfigKey("geoserver.layer.resourceLand").then(response => {

  193.           this.landLayerName = response.msg;

  194.         });

  195.       },

  196.       // 获取村边界的图层名称

  197.       getVillageBorderLayerName() {

  198.         getConfigKey("geoserver.layer.villageBorder").then(response => {

  199.           this.villageBorderLayerName = response.msg;

  200.         });

  201.       },

  202.       guidProduct(){

  203.         return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {

  204.           var r = Math.random() * 16 | 0,

  205.             v = c == 'x' ? r : (r & 0x3 | 0x8);

  206.           return v.toString(16);

  207.         });

  208.       },

  209.       // 初始化地图

  210.       initMap(resourceList) {

  211.         getDept(this.deptId).then(response => {

  212.           let dept = response.data;

  213.           if (dept.longitude && dept.latitude) {

  214.             this.mapCenterLocation = [dept.longitude, dept.latitude];

  215.           } else {

  216.             this.mapCenterLocation = [116.391458, 39.902377];

  217.           }

  218.           document.getElementById("landMapBox").innerHTML = "";

  219.           // 定义地图投影

  220.           let projection = new ol.proj.Projection({

  221.             code: "EPSG:3857",

  222.             units: "degrees",

  223.           });

  224.           // 定义地图图层

  225.           let aerial = new ol.layer.Tile({

  226.             source: new ol.source.XYZ({

  227.               url: "http://t{0-7}.tianditu.com/img_w/wmts?" +

  228.                 "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +

  229.                 "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",

  230.             }),

  231.             isGroup: true,

  232.             name: "卫星影像图",

  233.           });

  234. 

  235.           let yingxzi = new ol.layer.Tile({

  236.             source: new ol.source.XYZ({

  237.               url: "http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",

  238.             }),

  239.             isGroup: true,

  240.             name: "天地图文字标注--卫星影像图",

  241.           });

  242.           //加载地图

  243.           this.map = new ol.Map({

  244.             controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]),

  245.             layers: [aerial, yingxzi],

  246.             projection: projection,

  247.             target: "landMapBox",

  248.             view: new ol.View({

  249.               center: ol.proj.fromLonLat(this.mapCenterLocation), // 地图中心坐标

  250.               zoom: 15.5,

  251.               minZoom: 1, //地图缩小限制

  252.               maxZoom: 18, //地图放大限制

  253.               // extent: [13481224.75161,5667110.83528,13811063.06278,5880284.11416]

  254.             }),

  255.           });

  256.           // // 添加村边界

  257.           this.addVillageBorder();

  258.           // 添加地块图层

  259.           this.addLandLayer();

  260.           // 绘制地块

  261.           $("#drawLandPolygon").click(() => {

  262.             // 创建矢量数据源

  263.             let vectorSource = new ol.source.Vector({

  264.               wrapX: false,

  265.             });

  266.             // 创建矢量图层

  267.             this.vectorLayer = new ol.layer.Vector({

  268.               source: vectorSource,

  269.             });

  270.             // 添加图层

  271.             this.map.addLayer(this.vectorLayer);

  272.             // 地图交互-绘制图形

  273.             let drawInteraction = new ol.interaction.Draw({

  274.               source: vectorSource,

  275.               type: "Polygon",

  276.             });

  277.             // 添加交互

  278.             this.map.addInteraction(drawInteraction);

  279.             drawInteraction.on('drawend', (evt) => {

  280.               // 移除交互

  281.               this.map.removeInteraction(drawInteraction);

  282.               let coordinates = evt.feature.getGeometry().getCoordinates();

  283.               this.reset();

  284.               this.form.theGeom = JSON.stringify(coordinates);

  285.               this.title = "添加地块信息";

  286.               this.showSaveBtn = true;

  287.               this.showDeleteBtn = false;

  288.               // this.isDisabled = false;

  289.               setTimeout(() => {

  290.                 this.open = true;

  291.               }, 10);

  292. 

  293.             });

  294.           });

  295.           var mark_layer = null;

  296.           function addMark(lng, lat) {

  297.             if(!mark_layer)

  298.             {

  299.               mark_layer = new ol.layer.Vector({

  300.                 source: new ol.source.Vector(),

  301.               });

  302.               that.map.addLayer(mark_layer);

  303.             }

  304.             else

  305.               mark_layer.getSource().clear();

  306. 

  307.             let newFeature = new ol.Feature({

  308.               geometry: new ol.geom.Point(ol.proj.fromLonLat([lng, lat])), //几何信息

  309.               //name: "标注点",

  310.             });

  311.             newFeature.setStyle(new ol.style.Style({

  312.               image: new ol.style.Icon({

  313.                 //设置图标偏移

  314.                 anchor: [0.5, 0.5],

  315.                 //标注样式的起点位置

  316.                 anchorOrigin: "top-right",

  317.                 //X方向单位：分数

  318.                 anchorXUnits: "fraction",

  319.                 //Y方向单位：像素

  320.                 anchorYUnits: "fraction",

  321.                 //偏移起点位置的方向

  322.                 offsetOrigin: "top-right",

  323.                 //透明度

  324.                 opacity: 0.9,

  325.                 //图片路径

  326.                 src: require('../../assets/images/app/mark.png'),

  327.               }),

  328.               zIndex: 9999,

  329.             }));

  330.             mark_layer.getSource().addFeature(newFeature);

  331.           }

  332.           var that = this;

  333.           var Zb;

  334.           $("#" + this.locationMap).click(function () {

  335.             that.getCurrentLocation(res => {

  336.               if (res.code == 200) {

  337.                 let lat = res.data.lat;

  338.                 let lng = res.data.lng;

  339.                 if(lat && lng){

  340.                   Zb = [lng,lat];

  341.                 }else {

  342.                   Zb =[115.452752, 31.789033];

  343.                 }

  344.                 addMark(lng,lat);

  345.                 that.map.getView().animate({

  346.                   // 只设置需要的属性即可

  347.                   center: ol.proj.fromLonLat(Zb), // 中心点

  348.                   zoom: 18, // 缩放级别

  349.                   rotation: undefined, // 缩放完成view视图旋转弧度

  350.                   duration: 1000, // 缩放持续时间，默认不需要设置

  351.                 });

  352.               }

  353.             });

  354.           });

  355.           // 地图点击事件

  356.           this.map.on("click", (evt) => {

  357.             // 点击宅基地查看详情

  358.             console.log(this.landLayer)

  359.             if (this.landLayer) {

  360.               const viewResolution = this.map.getView().getResolution();

  361.               const url = this.landLayer.getSource()

  362.                 .getFeatureInfoUrl(evt.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'application/json'});

  363.               console.log(url)

  364.               if (url) {

  365.                 fetch(url)

  366.                   .then(response => response.json())

  367.                   .then(data => {

  368.                     if (data.features.length > 0) {

  369.                       let id = data.features[0].properties.DKBM;

  370.                       getLandDetailByDkbm(id).then(response => {

  371.                         this.form = response.data;

  372.                         setTimeout(() => {

  373.                           this.open = true;

  374.                         }, 500);

  375.                       });

  376.                       // getLandDetail(id).then(response => {

  377.                       //   // this.form = response.data;

  378.                       //   getLandDetailByDkbm(response.data.dkbm).then(res => {

  379.                       //     res.data.txmj = response.data.txmj;

  380.                       //     this.form = res.data;

  381.                       //   });

  382.                       //   // getOperationDetailByDkbm(response.data.dkbm).then(response => {

  383.                       //   //   this.form = response.data

  384.                       //   // })

  385.                       //   setTimeout(() => {

  386.                       //     this.open = true;

  387.                       //   }, 500);

  388.                       // });

  389.                     }

  390.                   });

  391.               }

  392.             }

  393.           });

  394.         });

  395.       },

  396.       filterLandLayer() {

  397.         if (this.landLayer) {

  398.           this.map.removeLayer(this.landLayer);

  399.           this.landLayer = "";

  400.         }

  401.         this.addLandLayer();

  402.       },

  403.       getLocationMode() {

  404.         let mode = '';

  405.         if(this.hasGetLocationMode)

  406.         {

  407.           mode = window._Native_object.GetLocationMode();

  408.         }

  409.         console.log('当前选择定位模式: ' + mode);

  410.         return mode;

  411.       },

  412.       getLocationTimeout() {

  413.         let timeout = 10000;

  414.         if(this.hasGetLocationMode)

  415.         {

  416.           let to = window._Native_object.GetLocationTimeout();

  417.           if(to <= 0)

  418.             to = 30000;

  419.           timeout = to;

  420.         }

  421.         console.log('当前选择定位超时: ' + timeout);

  422.         return timeout;

  423.       },

  424.       getDeptLocation(callback) {

  425.         getQueryLand().then((response) => {

  426.           if (response.code == 200) {

  427.             let InsertCode = response.data;

  428.             if (InsertCode != null) {

  429.               var lat = InsertCode.lat;

  430.               var lng = InsertCode.lng;

  431.               if(lat !=null && lng !=null && lat !="" && lng !=""){

  432.                 callback(response);

  433.                 return;

  434.               }

  435.             }

  436.           }

  437.           this.getCurrentLocation(callback);

  438.         });

  439.       },

  440.       getCurrentLocation(callback) {

  441.         // 1. 首先尝试Android宿主端

  442.         if(this.isAndroid) // Android层注入全局对象

  443.         {

  444.           let mode = this.getLocationMode();

  445.           if(mode !== 'h5')

  446.           {

  447.             console.log('使用Native获取定位');

  448.             let coord = window._Native_object.GetLocation(null);

  449.             console.log('Native坐标: ' + coord);

  450.             if(coord)

  451.             {

  452.               let arr = coord.split(',');

  453.               let res = {

  454.                 code: 200,

  455.                 data: {

  456.                   lng: arr[0],

  457.                   lat: arr[1],

  458.                 },

  459.               };

  460.               callback(res);

  461.               return;

  462.             }

  463.           }

  464.         }

  465. 

  466.         // 2. 再尝试浏览器

  467.         if (navigator.geolocation) {

  468.           console.log('使用浏览器获取定位');

  469.           const loading = Toast.loading({

  470.             message: '定位中...',

  471.             duration: 0,

  472.           });

  473.           let timeout = this.getLocationTimeout();

  474.           navigator.geolocation.getCurrentPosition(

  475.             (position) => {

  476.               const { latitude, longitude } = position.coords;

  477.               console.log('浏览器定位结果: 经纬度=' + longitude + ', ' + latitude);

  478.               let res = {

  479.                 code: 200,

  480.                 data: {

  481.                   lng: longitude,

  482.                   lat: latitude,

  483.                 },

  484.               };

  485.               loading.clear();

  486.               callback(res);

  487.             },

  488.             (error) => {

  489.               loading.clear();

  490.               console.log('定位失败: ' + error.message);

  491.               getQueryLand().then(callback);

  492.             },

  493.             { enableHighAccuracy: true, timeout: timeout }

  494.           );

  495.           return;

  496.         }

  497. 

  498.         // 最后使用地区坐标

  499.         console.log('使用地区坐标定位');

  500.         getQueryLand().then(callback);

  501.       },

  502.       // 添加地块图层

  503.       addLandLayer() {

  504.         this.landLayer = new ol.layer.Image({

  505.           source: new ol.source.ImageWMS({

  506.             url: this.mapGeoServerUrl + '/wms',

  507.             params: {

  508.               LAYERS: this.landLayerName,

  509.               cql_filter: "import_code = '" + this.importCode + "'",

  510.               SRID: 3857,

  511.               abc: Math.random()        // 无效参数，保证每次发送的请求都不一样

  512.             }

  513.           }),

  514.           name: 'landLayer'

  515.         });

  516.         this.map.getLayers().insertAt(3, this.landLayer);

  517.         // this.map.addLayer(this.landLayer);

  518.       },

  519.       // 添加村边界

  520.       addVillageBorder() {

  521.         this.mapBorder = new ol.layer.Image({

  522.           source: new ol.source.ImageWMS({

  523.             url: this.mapGeoServerUrl + '/wms',

  524.             params: {

  525.               LAYERS: this.villageBorderLayerName,

  526.               cql_filter: "import_code = '" + this.importCode + "'",

  527.               SRID: 3857,

  528.             },

  529.           }),

  530.           name: 'villageBorderLayer'

  531.         });

  532.         this.map.getLayers().insertAt(2, this.mapBorder);

  533.       },

  534.       saveLand() {

  535.         this.$refs.landForm.validate().then(() => {

  536.           if (this.form.id) {

  537.             this.showSaveBtn = false;

  538.             updateDk(this.form).then(response => {

  539.               if (response.code == 200) {

  540.                 this.$toast({

  541.                   icon: 'success',

  542.                   message: '保存成功',

  543.                   duration:"1000",

  544.                   onClose: () => {

  545.                     this.open = false;

  546.                     this.showSaveBtn = true;

  547.                   }

  548.                 });

  549.               }

  550.             });

  551.           } else {

  552.             this.form.deptId = this.deptId;

  553.             this.showSaveBtn = false;

  554.             addDk(this.form).then(response => {

  555.               if (response.code == 200) {

  556.                 this.$toast({

  557.                   icon: 'success',

  558.                   message: '保存成功',

  559.                   duration:"1000",

  560.                   onClose: () => {

  561.                     this.open = false;

  562.                     this.showSaveBtn = true;

  563.                     // 移除矢量图层

  564.                     this.map.removeLayer(this.vectorLayer);

  565.                     this.vectorLayer = "";

  566.                     // 移除地块图层重新加载

  567.                     this.map.removeLayer(this.landLayer);

  568.                     this.landLayer = "";

  569.                     this.addLandLayer();

  570.                   }

  571.                 });

  572.               }

  573.             });

  574.           }

  575.         }).catch(() => {

  576.           this.$notify({ type: 'danger', message: '请填写完整的表单项' });

  577.         });

  578.       },

  579.       deleteLand(id) {

  580.         this.$dialog.confirm({

  581.           message: '是否确认删除此地块？',

  582.         }).then(() => {

  583.           // on confirm

  584.           this.showDeleteBtn = false;

  585.           deleteDk(id).then(res => {

  586.             if (res.code == 200) {

  587.               this.$toast({

  588.                 icon: 'success',

  589.                 message: '删除成功',

  590.                 duration: "1000",

  591.                 onClose: () => {

  592.                   this.open = false;

  593.                   this.showDeleteBtn = true;

  594.                   // 移除地块图层重新加载

  595.                   this.map.removeLayer(this.landLayer);

  596.                   this.landLayer = "";

  597.                   this.addLandLayer();

  598.                 }

  599.               });

  600.             }

  601.           });

  602.         }).catch(() => {

  603.           // on cancel

  604.         });

  605.       },

  606.       onConfirmOwnershipOptions(value){

  607.         this.form.syqxz = value.dictValue;

  608.         this.syqxzText = value.dictLabel;

  609.         this.showOwnership = false;

  610.       },

  611.       onConfirmLandCategoryOptions(value){

  612.         this.form.dklb = value.dictValue;

  613.         this.dklbText = value.dictLabel;

  614.         this.showLandCategory = false;

  615.       },

  616.       onConfirmLandTypeOptions(value) {

  617.         this.form.tdlylx = value.dictValue;

  618.         this.tdlylxText = value.dictLabel;

  619.         this.showLandType = false;

  620.       },

  621.       onConfirmLandGradeOptions(value) {

  622.         this.form.dldj = value.dictValue

  623.         this.dldjText = value.dictLabel;

  624.         this.showLandGrade = false;

  625.       },

  626.       onConfirmLandPurposeOptions(value){

  627.         this.form.tdyt = value.dictValue;

  628.         this.tdytText = value.dictLabel;

  629.         this.showLandPurpose = false;

  630.       },

  631.       generateCode() {

  632.         generateLandCode({deptId: this.deptId}).then(response => {

  633.           this.$set(this.form, 'dkbm', response.data);

  634.         });

  635.       },

  636.       closePopup() {

  637.         // 移除矢量图层

  638.         if (this.vectorLayer) {

  639.           this.map.removeLayer(this.vectorLayer);

  640.           this.vectorLayer = "";

  641.         }

  642.         this.open = false;

  643.         this.reset();

  644.       },

  645.       reset() {

  646.         this.form = {

  647.           deptId: null,

  648.           dkbm: null,

  649.           dkmc: null,

  650.           syqxz: '30',

  651.           dklb: '99',

  652.           tdlylx: '01',

  653.           dldj: '01',

  654.           tdyt: '1',

  655.           sfjbnt: '1',

  656.           scmjm: null,

  657.           zjrxm: null,

  658.           dkdz: null,

  659.           dkxz: null,

  660.           dknz: null,

  661.           dkbz: null,

  662.           dkbzxx: null,

  663.           theGeom: null

  664.         };

  665.         this.syqxzText = '集体土地所有权';

  666.         this.dklbText = '其他集体土地';

  667.         this.tdlylxText = '【1】耕地';

  668.         this.dldjText = '一等地';

  669.         this.tdytText = '种植业';

  670.       },

  671.       openLandCategoryPopup() {

  672.         // 修改时 && 地块类别为承包地块  不允许打开地块类别弹出层

  673.         if (this.form.id && this.form.dklb === '10') {

  674.           this.$toast({

  675.             icon: 'fail',

  676.             message: '当前地块为承包地块，不能更改地块类别',

  677.             duration: '2000'

  678.           })

  679.           return ;

  680.         }

  681.         this.showLandCategory = true;

  682.       }

  683. 

  684.     },

  685.   };

  686. </script>

  687. <style scoped lang="scss">

  688.   ::v-deep .van-nav-bar{

  689.     background: linear-gradient( 173deg, #91E2D3 0%, #CDFCF0 100%);

  690.     ::v-deep.van-icon{

  691.       color: #000000;

  692.     }

  693.   }

  694.   .location{

  695.     display: flex;

  696.     align-items: center;

  697.     justify-content: center;

  698.     width: 50px;

  699.     height: 50px;

  700.     margin: 2vh;

  701.     position: absolute;

  702.     top: 12vh;

  703.     right: 0vw;

  704.     z-index: 9;

  705.     background-color: rgba(0,0,0,0.5);

  706.     border-radius: 10px;

  707.     img{

  708.       width: 30px;

  709.       height: 30px;

  710.       border: 1px dashed #ffffff;

  711.     }

  712.   }

  713.   .van-popup{

  714.     background: linear-gradient( 180deg, #E5FFF4 0%, #ffffff 100%);

  715.     .landPopup{

  716.       width: 94%;

  717.       margin: 0 auto;

  718.       .landPopup_title{

  719.         color: #29D2AF;

  720.         font-size: 20px;

  721.         display: flex;

  722.         align-items: center;

  723.         justify-content: space-between;

  724.       }

  725.     }

  726.   }

  727.   .app-container{

  728.     /*background: #fff url("../../../../../static/images/contracted/contracted_index_bg.png") no-repeat center;*/

  729.     background-size: 100% 100%;

  730.     height: 100vh;

  731.     padding: 0;

  732.     overflow: hidden;

  733.   }

  734. 

  735.   ::v-deep .van-hairline--bottom::after{

  736.     border: none;

  737.   }

  738. 

  739.   ::v-deep .van-field--disabled .van-field__label {

  740.     color: #646566;

  741.   }

  742. 

  743.   ::v-deep .landPopup .van-dialog {

  744.     width: 90%;

  745.     height: 85%;

  746.     overflow-y: auto;

  747.   }

  748. 

  749.   ::v-deep .landPopup .van-field__label {

  750.     width: 7em;

  751.   }

  752. 

  753.   .head{

  754.     padding: 0 4vw;

  755.   }

  756. 

  757.   .tap_block{

  758.     width: 100%;

  759.     display: flex;

  760.     justify-content: space-between;

  761.     background: #ebfaf2;

  762.     padding: 2PX 4PX;

  763.     border-radius: 10PX;

  764.     margin-top: 1vh;

  765.     .active{

  766.       background-image: linear-gradient(to right,#c6fe8b,#48e5a2);

  767.       box-shadow: 0 0 10PX #cccccc;

  768.       color: #333333;

  769.     }

  770.     p{

  771.       width: 25%;

  772.       text-align: center;

  773.       padding: 5PX 0;

  774.       border-radius: 10PX;

  775.       color: #666666;

  776.     }

  777.   }

  778. 

  779.   .legend_main{

  780.     position: absolute;

  781.     top: 2vh;

  782.     right: 2vw;

  783.   }

  784. 

  785.   .openLegend{

  786.     position: absolute;

  787.     top: 2vh;

  788.     right: 0vw;

  789.     background-color: rgba(255,255,255,.5);

  790.     width: 20PX;

  791.     height: 70PX;

  792.     display: flex;

  793.     align-items: center;

  794.     justify-content: center;

  795.     border-top-left-radius: 10PX;

  796.     border-bottom-left-radius: 10PX;

  797.     .sanjiao-left {

  798.       display: inline-block;

  799.       border-right: 8PX solid #999999;

  800.       border-right-color: initial;

  801.       border-top: 5PX solid transparent;

  802.       border-bottom: 5PX solid transparent;

  803.     }

  804.   }

  805. 

  806.   .legend_second{

  807.     background: rgba(255,255,255,.5);

  808.     padding: 2vh;

  809.     border-radius: 10PX;

  810.     margin-top: 2vh;

  811.   }

  812. 

  813.   .legend_tt{

  814.     font-size: 16PX;

  815.     display: flex;

  816.     align-items: center;

  817.     justify-content: space-between;

  818.     img{

  819.       width: 20PX;

  820.     }

  821.   }

  822. 

  823.   .legend{

  824.     background: rgba(255,255,255,.5);

  825.     padding: 2vh;

  826.     border-radius: 10PX;

  827.     .van-checkbox{

  828.       margin-top: 2vh;

  829.       &:nth-child(1){

  830.         ::v-deep .van-checkbox__icon .van-icon{

  831.           /*border-color: rgba(22,233,15,1);*/

  832.           border: 4px solid #16E90F;

  833.         }

  834.       }

  835.       &:nth-child(2){

  836.         ::v-deep .van-checkbox__icon .van-icon{

  837.           /*border-color: rgba(1,198,222,1);*/

  838.           border: 4px solid #01C6DE;

  839.         }

  840.       }

  841.       &:nth-child(3){

  842.         ::v-deep .van-checkbox__icon .van-icon{

  843.           /*border-color: rgba(238,238,0,1);*/

  844.           border: 4px solid #EEEE00;

  845.         }

  846.       }

  847.       &:nth-child(4){

  848.         ::v-deep .van-checkbox__icon .van-icon{

  849.           /*border-color: rgba(238,60,60,1);*/

  850.           border: 4px solid #EE3C3C;

  851.         }

  852.       }

  853.       &:nth-child(5){

  854.         ::v-deep .van-checkbox__icon .van-icon{

  855.           /*border-color: rgba(235,134,0,1);*/

  856.           border: 4px solid #EB8600;

  857.         }

  858.       }

  859.     }

  860.     .van-checkbox-group {

  861.       .van-checkbox__label{

  862.         i{

  863.           display: block;

  864.           width: 15PX;

  865.           height: 15PX;

  866.           border: 1px solid;

  867.           border-radius: 3PX;

  868.           margin-left: 10PX;

  869.         }

  870.         .i1{

  871.           background: rgba(22,233,15,.7);

  872.           border-color: rgba(22,233,15,1);

  873.         }

  874.         .i2{

  875.           background: rgba(1,198,222,.7);

  876.           border-color: rgba(1,198,222,1);

  877.         }

  878.         .i3{

  879.           background: rgba(238,238,0,.7);

  880.           border-color: rgba(238,238,0,1);

  881.         }

  882.         .i4{

  883.           background: rgba(238,60,60,.7);

  884.           border-color: rgba(238,60,60,1);

  885.         }

  886.         .i5{

  887.           background: rgba(235,134,0,.7);

  888.           border-color: rgba(235,134,0,1);

  889.         }

  890.         div{

  891.           display: flex;

  892.           align-items: center;

  893.         }

  894.       }

  895.     }

  896.   }

  897. 

  898.   .mapBox{

  899.     height: 100vh;

  900.     width: 100%;

  901.   }

  902. 

  903.   .footer_main {

  904.     flex: 0 0 120px;

  905.     background: #ccc;

  906.     display: flex;

  907.     justify-content: center; /* 相对父元素水平居中 */

  908.     align-items: center; /*  子元素相对父元素垂直居中 */

  909.   }

  910.   .search_box{

  911.     display: flex;

  912.     align-items: center;

  913.     justify-content: space-between;

  914.     width: 94%;

  915.     margin: 2vh auto;

  916.     position: absolute;

  917.     left: 3vw;

  918.     z-index: 9;

  919. 

  920.     .left{

  921.       display: flex;

  922.       align-items: center;

  923.       flex: 1;

  924.       background-color: #ffffff;

  925.       border-radius: 50vh;

  926.       overflow: hidden;

  927.       margin-right: 3vw;

  928.     }

  929.     p{

  930.       flex-shrink: 0;

  931.     }

  932.     button{

  933.       flex-shrink: 0;

  934.       background: linear-gradient( 271deg, #53E4A5 0%, #24DBDB 100%);

  935.       border: none;

  936.       width: 20vw;

  937.     }

  938.   }

  939. 

  940.   #land-btn-wrap {

  941.     position: relative;

  942.     width: 40%;

  943.     left: 60%;

  944.     bottom: 95%;

  945.     z-index: 2000;

  946.   }

  947. 

  948.   #landMapBox {

  949.     width: 100%;

  950.     height: 100%;

  951.   }

  952.   .ant-btn-red {

  953.     position: relative;

  954.     display: inline-block;

  955.     background: #D0EEFF;

  956.     border: 1px solid #99D3F5;

  957.     border-radius: 4px;

  958.     padding: 4px 12px;

  959.     overflow: hidden;

  960.     color: #1E88C7;

  961.     text-decoration: none;

  962.     text-indent: 0;

  963.     line-height: 20px;

  964.     right: -36%;

  965.   }

  966. </style>