zhangzl
/
rongxin.dashboard
1
0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 활동
管理系统PC端
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 커밋
1 브렌치
5.5 MiB
 
 
 
 
트리: b64bb57537
브랜치 태그
${ item.name }
${ searchTerm } 브랜치 생성
from 'b64bb57537'
${ noResults }
rongxin.dashboard/src/views/app/map.vue

906 lines
32 KiB
Raw 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="keyword" left-icon="search" placeholder="请输入用户名" />

  13.       </div>

  14.       <van-button type="primary" round @click="searchMap" >搜索</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 { listLandQuery, getLandDetailByDkbm } from "@/api/resource/land"

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

  85.   import {getDept} from "@/api/system/dept";

  86.   import {Toast} from "vant";

  87.   import $ from "jquery";

  88.   import Cookies from "js-cookie";

  89. 

  90. 

  91.   export default {

  92.     name: "appMap",

  93.     components: { },

  94.     data() {

  95.       return {

  96.         baseRoutingUrll:'/api',

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

  98.         map: "",                          // 地图

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

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

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

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

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

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

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

  106. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  130. 

  131.         showLegend:true,

  132.         value:'',

  133.         deptId:100,

  134.         importCode:'',

  135.         keyword:'',

  136.         locationMap: this.guidProduct(),

  137.         selectedHomesteadLayer: "",

  138. 

  139.       };

  140.     },

  141.     computed: {

  142.       isAndroid() {

  143.         return !!window._Native_object;

  144.       },

  145.       hasSelectLocationMode() {

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

  147.       },

  148.       hasGetLocationTimeout() {

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

  150.       },

  151.       hasGetLocationMode() {

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

  153.       },

  154.     },

  155.     created() {

  156.       this.deptId = Cookies.get('userDept');

  157.       this.importCode = Cookies.get('importCode');

  158.       // 获取geoserver的地址

  159.       this.getGeoServerUrl();

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

  161.       this.getLandLayerName();

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

  163.       this.getVillageBorderLayerName();

  164.     },

  165.     mounted() {

  166.       // 初始化地图

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

  168.         setTimeout(() => {

  169.           this.initMap(response.rows);

  170.         }, 500);

  171.       });

  172.     },

  173.     methods: {

  174.       onClickLeft(){

  175.         history.back(-1);

  176.       },

  177.       // 获取geoserver的地址

  178.       getGeoServerUrl() {

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

  180.           this.mapGeoServerUrl = response.msg;

  181.         });

  182.       },

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

  184.       getLandLayerName() {

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

  186.           this.landLayerName = response.msg;

  187.         });

  188.       },

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

  190.       getVillageBorderLayerName() {

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

  192.           this.villageBorderLayerName = response.msg;

  193.         });

  194.       },

  195.       guidProduct(){

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

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

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

  199.           return v.toString(16);

  200.         });

  201.       },

  202.       // 初始化地图

  203.       initMap(resourceList) {

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

  205.           let dept = response.data;

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

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

  208.           } else {

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

  210.           }

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

  212.           // 定义地图投影

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

  214.             code: "EPSG:3857",

  215.             units: "degrees",

  216.           });

  217.           // 定义地图图层

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

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

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

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

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

  223.             }),

  224.             isGroup: true,

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

  226.           });

  227. 

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

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

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

  231.             }),

  232.             isGroup: true,

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

  234.           });

  235.           //加载地图

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

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

  238.             layers: [aerial, yingxzi],

  239.             projection: projection,

  240.             target: "landMapBox",

  241.             view: new ol.View({

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

  243.               zoom: 14,

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

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

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

  247.             }),

  248.           });

  249.           // // 添加村边界

  250.           this.addVillageBorder();

  251.           // 添加地块图层

  252.           this.addLandLayer();

  253.           // 绘制地块

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

  255.             // 创建矢量数据源

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

  257.               wrapX: false,

  258.             });

  259.             // 创建矢量图层

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

  261.               source: vectorSource,

  262.             });

  263.             // 添加图层

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

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

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

  267.               source: vectorSource,

  268.               type: "Polygon",

  269.             });

  270.             // 添加交互

  271.             this.map.addInteraction(drawInteraction);

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

  273.               // 移除交互

  274.               this.map.removeInteraction(drawInteraction);

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

  276.               this.reset();

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

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

  279.               this.showSaveBtn = true;

  280.               this.showDeleteBtn = false;

  281.               // this.isDisabled = false;

  282.               setTimeout(() => {

  283.                 this.open = true;

  284.               }, 10);

  285. 

  286.             });

  287.           });

  288.           var mark_layer = null;

  289.           function addMark(lng, lat) {

  290.             if(!mark_layer)

  291.             {

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

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

  294.               });

  295.               that.map.addLayer(mark_layer);

  296.             }

  297.             else

  298.               mark_layer.getSource().clear();

  299. 

  300.             let newFeature = new ol.Feature({

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

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

  303.             });

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

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

  306.                 //设置图标偏移

  307.                 anchor: [0.5, 0.5],

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

  309.                 anchorOrigin: "top-right",

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

  311.                 anchorXUnits: "fraction",

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

  313.                 anchorYUnits: "fraction",

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

  315.                 offsetOrigin: "top-right",

  316.                 //透明度

  317.                 opacity: 0.9,

  318.                 //图片路径

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

  320.               }),

  321.               zIndex: 9999,

  322.             }));

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

  324.           }

  325.           var that = this;

  326.           var Zb;

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

  328.             that.getCurrentLocation(res => {

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

  330.                 let lat = res.data.lat;

  331.                 let lng = res.data.lng;

  332.                 if(lat && lng){

  333.                   Zb = [lng,lat];

  334.                 }else {

  335.                   Zb =[115.452752, 31.789033];

  336.                 }

  337.                 addMark(lng,lat);

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

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

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

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

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

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

  344.                 });

  345.               }

  346.             });

  347.           });

  348.           // 地图点击事件

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

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

  351.             console.log(this.landLayer)

  352.             if (this.landLayer) {

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

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

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

  356.               console.log(url)

  357.               if (url) {

  358.                 fetch(url)

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

  360.                   .then(data => {

  361. 

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

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

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

  365.                         this.form = response.data;

  366.                         setTimeout(() => {

  367.                           this.open = true;

  368.                         }, 500);

  369.                       });

  370.                       if (this.selectedHomesteadLayer) {

  371.                         this.map.removeLayer(this.selectedHomesteadLayer);

  372.                         this.selectedHomesteadLayer = "";

  373.                       }

  374.                       this.selectedHomesteadLayer = new ol.layer.Vector({

  375.                         source: new ol.source.Vector({

  376.                           features: new ol.format.GeoJSON().readFeatures(data)

  377.                         }),

  378.                         name: 'selectedHomesteadLayer',

  379.                         style: new ol.style.Style({

  380.                           fill: new ol.style.Fill({

  381.                             //矢量图层填充颜色，以及透明度

  382.                             color: "rgba(255,0,17,0.3)",

  383.                           }),

  384.                           stroke: new ol.style.Stroke({

  385.                             //边界样式

  386.                             color: "#ff0000",

  387.                             width: 3,

  388.                           }),

  389.                         })

  390.                       });

  391.                       this.map.addLayer(this.selectedHomesteadLayer);

  392.                       this.map.getLayers().insertAt(4, this.selectedHomesteadLayer);

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

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

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

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

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

  398.                       //   });

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

  400.                       //   //   this.form = response.data

  401.                       //   // })

  402.                       //   setTimeout(() => {

  403.                       //     this.open = true;

  404.                       //   }, 500);

  405.                       // });

  406.                     }

  407.                   });

  408.               }

  409.             }

  410.           });

  411.         });

  412.       },

  413.       filterLandLayer() {

  414.         if (this.landLayer) {

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

  416.           this.landLayer = "";

  417.         }

  418.         this.addLandLayer();

  419.       },

  420.       getLocationMode() {

  421.         let mode = '';

  422.         if(this.hasGetLocationMode)

  423.         {

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

  425.         }

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

  427.         return mode;

  428.       },

  429.       getLocationTimeout() {

  430.         let timeout = 10000;

  431.         if(this.hasGetLocationMode)

  432.         {

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

  434.           if(to <= 0)

  435.             to = 30000;

  436.           timeout = to;

  437.         }

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

  439.         return timeout;

  440.       },

  441.       getCurrentLocation(callback) {

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

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

  444.         {

  445.           let mode = this.getLocationMode();

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

  447.           {

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

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

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

  451.             if(coord)

  452.             {

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

  454.               let res = {

  455.                 code: 200,

  456.                 data: {

  457.                   lng: arr[0],

  458.                   lat: arr[1],

  459.                 },

  460.               };

  461.               callback(res);

  462.               return;

  463.             }

  464.           }

  465.         }

  466. 

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

  468.         if (navigator.geolocation) {

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

  470.           const loading = Toast.loading({

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

  472.             duration: 0,

  473.           });

  474.           let timeout = this.getLocationTimeout();

  475.           navigator.geolocation.getCurrentPosition(

  476.             (position) => {

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

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

  479.               let res = {

  480.                 code: 200,

  481.                 data: {

  482.                   lng: longitude,

  483.                   lat: latitude,

  484.                 },

  485.               };

  486.               loading.clear();

  487.               callback(res);

  488.             },

  489.             (error) => {

  490.               loading.clear();

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

  492.               getQueryLand().then(callback);

  493.             },

  494.             { enableHighAccuracy: true, timeout: timeout }

  495.           );

  496.           return;

  497.         }

  498. 

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

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

  501.         getQueryLand().then(callback);

  502.       },

  503.       // 添加地块图层

  504.       addLandLayer() {

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

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

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

  508.             params: {

  509.               LAYERS: this.landLayerName,

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

  511.               SRID: 3857,

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

  513.             }

  514.           }),

  515.           name: 'landLayer'

  516.         });

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

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

  519.       },

  520.       // 添加村边界

  521.       addVillageBorder() {

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

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

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

  525.             params: {

  526.               LAYERS: this.villageBorderLayerName,

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

  528.               SRID: 3857,

  529.             },

  530.           }),

  531.           name: 'villageBorderLayer'

  532.         });

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

  534.       },

  535.       reset() {

  536.         this.form = {

  537.           deptId: null,

  538.           dkbm: null,

  539.           dkmc: null,

  540.           syqxz: '30',

  541.           dklb: '99',

  542.           tdlylx: '01',

  543.           dldj: '01',

  544.           tdyt: '1',

  545.           sfjbnt: '1',

  546.           scmjm: null,

  547.           zjrxm: null,

  548.           dkdz: null,

  549.           dkxz: null,

  550.           dknz: null,

  551.           dkbz: null,

  552.           dkbzxx: null,

  553.           theGeom: null

  554.         };

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

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

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

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

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

  560.       },

  561.       // 根据搜索条件查询宅基地

  562.       searchMap() {

  563.         if (this.keyword) {

  564.           if (this.selectedHomesteadLayer) {

  565.             this.map.removeLayer(this.selectedHomesteadLayer);

  566.             this.selectedHomesteadLayer = "";

  567.           }

  568.           let map_cql_filter = "DKBM = '" + this.keyword + "'";

  569.           // 定位查询位置

  570.           let param_dw = {

  571.             // srsName: "EPSG:3857",

  572.             service: "WFS",

  573.             version: "1.0.0",

  574.             request: "GetFeature",

  575.             typename: this.landLayerName,

  576.             // maxFeatures:1000,

  577.             cql_filter: map_cql_filter,

  578.             outputFormat: "application/json",

  579.           };

  580.           let url_dw = this.mapGeoServerUrl + "/ows"; //wfsurl;

  581.           url_dw = url_dw + "?";

  582.           for (let key in param_dw) {

  583.             url_dw = url_dw + key + "=" + param_dw[key] + "&";

  584.           }

  585.           url_dw = url_dw.substr(0, url_dw.length - 1);

  586.           fetch(url_dw, {

  587.             method: "GET", // *GET, POST, PUT, DELETE, etc.

  588.           }).then((res) => {

  589.             return res.json();

  590.           }).then((data) => {

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

  592.               this.selectedHomesteadLayer = new ol.layer.Vector({

  593.                 source: new ol.source.Vector({

  594.                   features: new ol.format.GeoJSON().readFeatures(data)

  595.                 }),

  596.                 name: 'selectedHomesteadLayer',

  597.                 style: new ol.style.Style({

  598.                   fill: new ol.style.Fill({

  599.                     //矢量图层填充颜色，以及透明度

  600.                     color: "rgba(255,0,17,0.3)",

  601.                   }),

  602.                   stroke: new ol.style.Stroke({

  603.                     //边界样式

  604.                     color: "#ff0000",

  605.                     width: 3,

  606.                   }),

  607.                 })

  608.               });

  609.               this.map.addLayer(this.selectedHomesteadLayer);

  610.               this.map.getLayers().insertAt(4, this.selectedHomesteadLayer);

  611. 

  612.               let resolution = this.map.getView().getResolutionForExtent(data.bbox, this.map.getSize());

  613.               this.map.getView().fit(data.bbox);

  614.               this.map.getView().setResolution(resolution);

  615.               // this.map.getView().setZoom(16);

  616.             } else {

  617.               this.msgError("没有搜索到该用户的宅基地")

  618.             }

  619.           });

  620.         }

  621.       }

  622. 

  623.     },

  624.   };

  625. </script>

  626. <style scoped lang="scss">

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

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

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

  630.       color: #000000;

  631.     }

  632.   }

  633.   .location{

  634.     display: flex;

  635.     align-items: center;

  636.     justify-content: center;

  637.     width: 50px;

  638.     height: 50px;

  639.     margin: 2vh;

  640.     position: absolute;

  641.     top: 12vh;

  642.     right: 0vw;

  643.     z-index: 9;

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

  645.     border-radius: 10px;

  646.     img{

  647.       width: 30px;

  648.       height: 30px;

  649.       border: 1px dashed #ffffff;

  650.     }

  651.   }

  652.   .van-popup{

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

  654.     .landPopup{

  655.       width: 94%;

  656.       margin: 0 auto;

  657.       .landPopup_title{

  658.         color: #29D2AF;

  659.         font-size: 20px;

  660.         display: flex;

  661.         align-items: center;

  662.         justify-content: space-between;

  663.       }

  664.     }

  665.   }

  666.   .app-container{

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

  668.     background-size: 100% 100%;

  669.     height: 100vh;

  670.     padding: 0;

  671.     overflow: hidden;

  672.   }

  673. 

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

  675.     border: none;

  676.   }

  677. 

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

  679.     color: #646566;

  680.   }

  681. 

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

  683.     width: 90%;

  684.     height: 85%;

  685.     overflow-y: auto;

  686.   }

  687. 

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

  689.     width: 7em;

  690.   }

  691. 

  692.   .head{

  693.     padding: 0 4vw;

  694.   }

  695. 

  696.   .tap_block{

  697.     width: 100%;

  698.     display: flex;

  699.     justify-content: space-between;

  700.     background: #ebfaf2;

  701.     padding: 2PX 4PX;

  702.     border-radius: 10PX;

  703.     margin-top: 1vh;

  704.     .active{

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

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

  707.       color: #333333;

  708.     }

  709.     p{

  710.       width: 25%;

  711.       text-align: center;

  712.       padding: 5PX 0;

  713.       border-radius: 10PX;

  714.       color: #666666;

  715.     }

  716.   }

  717. 

  718.   .legend_main{

  719.     position: absolute;

  720.     top: 2vh;

  721.     right: 2vw;

  722.   }

  723. 

  724.   .openLegend{

  725.     position: absolute;

  726.     top: 2vh;

  727.     right: 0vw;

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

  729.     width: 20PX;

  730.     height: 70PX;

  731.     display: flex;

  732.     align-items: center;

  733.     justify-content: center;

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

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

  736.     .sanjiao-left {

  737.       display: inline-block;

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

  739.       border-right-color: initial;

  740.       border-top: 5PX solid transparent;

  741.       border-bottom: 5PX solid transparent;

  742.     }

  743.   }

  744. 

  745.   .legend_second{

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

  747.     padding: 2vh;

  748.     border-radius: 10PX;

  749.     margin-top: 2vh;

  750.   }

  751. 

  752.   .legend_tt{

  753.     font-size: 16PX;

  754.     display: flex;

  755.     align-items: center;

  756.     justify-content: space-between;

  757.     img{

  758.       width: 20PX;

  759.     }

  760.   }

  761. 

  762.   .legend{

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

  764.     padding: 2vh;

  765.     border-radius: 10PX;

  766.     .van-checkbox{

  767.       margin-top: 2vh;

  768.       &:nth-child(1){

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

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

  771.           border: 4px solid #16E90F;

  772.         }

  773.       }

  774.       &:nth-child(2){

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

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

  777.           border: 4px solid #01C6DE;

  778.         }

  779.       }

  780.       &:nth-child(3){

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

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

  783.           border: 4px solid #EEEE00;

  784.         }

  785.       }

  786.       &:nth-child(4){

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

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

  789.           border: 4px solid #EE3C3C;

  790.         }

  791.       }

  792.       &:nth-child(5){

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

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

  795.           border: 4px solid #EB8600;

  796.         }

  797.       }

  798.     }

  799.     .van-checkbox-group {

  800.       .van-checkbox__label{

  801.         i{

  802.           display: block;

  803.           width: 15PX;

  804.           height: 15PX;

  805.           border: 1px solid;

  806.           border-radius: 3PX;

  807.           margin-left: 10PX;

  808.         }

  809.         .i1{

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

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

  812.         }

  813.         .i2{

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

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

  816.         }

  817.         .i3{

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

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

  820.         }

  821.         .i4{

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

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

  824.         }

  825.         .i5{

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

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

  828.         }

  829.         div{

  830.           display: flex;

  831.           align-items: center;

  832.         }

  833.       }

  834.     }

  835.   }

  836. 

  837.   .mapBox{

  838.     height: 100vh;

  839.     width: 100%;

  840.   }

  841. 

  842.   .footer_main {

  843.     flex: 0 0 120px;

  844.     background: #ccc;

  845.     display: flex;

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

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

  848.   }

  849.   .search_box{

  850.     display: flex;

  851.     align-items: center;

  852.     justify-content: space-between;

  853.     width: 94%;

  854.     margin: 2vh auto;

  855.     position: absolute;

  856.     left: 3vw;

  857.     z-index: 9;

  858. 

  859.     .left{

  860.       display: flex;

  861.       align-items: center;

  862.       flex: 1;

  863.       background-color: #ffffff;

  864.       border-radius: 50vh;

  865.       overflow: hidden;

  866.       margin-right: 3vw;

  867.     }

  868.     p{

  869.       flex-shrink: 0;

  870.     }

  871.     button{

  872.       flex-shrink: 0;

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

  874.       border: none;

  875.       width: 20vw;

  876.     }

  877.   }

  878. 

  879.   #land-btn-wrap {

  880.     position: relative;

  881.     width: 40%;

  882.     left: 60%;

  883.     bottom: 95%;

  884.     z-index: 2000;

  885.   }

  886. 

  887.   #landMapBox {

  888.     width: 100%;

  889.     height: 100%;

  890.   }

  891.   .ant-btn-red {

  892.     position: relative;

  893.     display: inline-block;

  894.     background: #D0EEFF;

  895.     border: 1px solid #99D3F5;

  896.     border-radius: 4px;

  897.     padding: 4px 12px;

  898.     overflow: hidden;

  899.     color: #1E88C7;

  900.     text-decoration: none;

  901.     text-indent: 0;

  902.     line-height: 20px;

  903.     right: -36%;

  904.   }

  905. </style>