优化json地址

src/api/homestead/index.js

@@ -96,12 +96,21 @@ export function treeselectByUser(query) {
 //获取村的经纬度
 export function deptGetId(id) {
     return request({
-        url: '/system/dept/get/'+id,
+        url: '/system/dept/get/' + id,
         method: 'get',
 
     })
 }
 
 
+//获取接口地图地址
+export function currentLocation(query) {
+    return request({
+        url: '/bigData/common/currentLocation',
+        method: 'get',
+        params: query
+    })
+}
+
 
 

src/views/homestead/index.vue

@@ -30,7 +30,7 @@
     </div>
 
     <!--列表拉取详情-->
-    <div class="homesteadList_wrap">
+    <div class="homesteadList_wrap" v-show="homesteadListStatus">
       <div class="main_m" v-if="statusList == 0">
         <div class="title_m">
           <div class="more_icon" @click="homesteadListShrink"></div>
@@ -945,6 +945,7 @@ import {
   deptGetId,
   houseEdit,
   landEdit,
+  currentLocation,
 } from "@/api/homestead/index";
 
 export default {
@@ -1096,6 +1097,9 @@ export default {
       landHomesteadDetailsVisibile: false,
 
       windowHeight: 0,
+      //农房列表 显影
+      homesteadListStatus: false,
+      geoJson: "",
     };
   },
   mounted() {
@@ -1728,12 +1732,19 @@ export default {
             currDeptId = content[0].value;
           }
           // console.log(currDeptId);
-          //获取村详细信息
-          this.deptGetFun(currDeptId);
-          //获取地图
-          this.mapBackground();
-          //设置缩放按钮位置
-          this.styleSteup();
+
+          currentLocation().then((res) => {
+            if (res.code == 200) {
+              let content = res.data;
+              this.geoJson = content.geoJson;
+              //获取村详细信息
+              this.deptGetFun(currDeptId);
+              //获取地图
+              this.mapBackground();
+              //设置缩放按钮位置
+              this.styleSteup();
+            }
+          });
         }
       });
     },
@@ -1767,6 +1778,7 @@ export default {
     /*右侧列表 --展开收缩*/
     selectionPush() {
       this.selectionIconShow = true;
+      this.homesteadListStatus = true;
       $(".homesteadList_wrap").animate(
         {
           right: "0",
@@ -1782,6 +1794,9 @@ export default {
         },
         300
       );
+      setTimeout(() => {
+        this.homesteadListStatus = false;
+      }, 300);
     },
 
     villageVisbileFun() {
@@ -1882,41 +1897,85 @@ export default {
         map.getTargetElement().style.cursor = hit ? "pointer" : "";
       });
       //属性查询结束 ------------------end
-      var shitu = new ol.layer.Vector({
-        title: "add Layer",
-        source: new ol.source.Vector({
-          projection: projection,
-          url: "http://116.255.135.38:8081/nsgk_test/profile/geojson/huancui.json", //GeoJSON的文件路径，用户可以根据需求而改变
-          format: new ol.format.GeoJSON(),
-        }),
-        style: new ol.style.Style({
-          fill: new ol.style.Fill({
-            //矢量图层填充颜色，以及透明度
-            color: "rgba(0,0,0,0)",
+      var shitu;
+      require(["@/assets/maps/plotPremises_" + _this.geoJson], function (data) {
+        shitu = new ol.layer.Vector({
+          title: "add Layer",
+          source: new ol.source.Vector({
+            projection: projection,
+            // url: "http://116.255.135.38:8081/nsgk_test/profile/geojson/huancui.json", //GeoJSON的文件路径，用户可以根据需求而改变
+            // format: new ol.format.GeoJSON(),
+            features: new ol.format.GeoJSON().readFeatures(data),
           }),
-          stroke: new ol.style.Stroke({
-            //边界样式
-            color: "#47c68f",
-            width: 3,
+          style: new ol.style.Style({
+            fill: new ol.style.Fill({
+              //矢量图层填充颜色，以及透明度
+              color: "rgba(0,0,0,0)",
+            }),
+            stroke: new ol.style.Stroke({
+              //边界样式
+              color: "#47c68f",
+              width: 3,
+            }),
           }),
-        }),
+        });
+        // console.log(shitu);
+        map.addLayer(shitu);
       });
-      map.addLayer(shitu);
-      var huancui_zhen = new ol.layer.Vector({
-        title: "add huancui_zhen",
-        source: new ol.source.Vector({
-          projection: projection,
-          url: "http://116.255.135.38:8081/nsgk_test/profile/geojson/huancui_zhen.json", //GeoJSON的文件路径，用户可以根据需求而改变
-          format: new ol.format.GeoJSON(),
-        }),
-        style: new ol.style.Style({
-          fill: new ol.style.Fill({
-            //矢量图层填充颜色，以及透明度
-            color: "rgba(27,50,56,0.8)",
+
+      var huancui_zhen;
+      require(["@/assets/maps/qu_" + _this.geoJson], function (data) {
+        huancui_zhen = new ol.layer.Vector({
+          title: "add huancui_zhen",
+          source: new ol.source.Vector({
+            projection: projection,
+            features: new ol.format.GeoJSON().readFeatures(data),
           }),
-        }),
+          style: new ol.style.Style({
+            fill: new ol.style.Fill({
+              //矢量图层填充颜色，以及透明度
+              color: "rgba(27,50,56,0.8)",
+            }),
+          }),
+        });
+        map.addLayer(huancui_zhen);
       });
-      map.addLayer(huancui_zhen);
+
+      // var shitu = new ol.layer.Vector({
+      //   title: "add Layer",
+      //   source: new ol.source.Vector({
+      //     projection: projection,
+      //     url: "http://116.255.135.38:8081/nsgk_test/profile/geojson/huancui.json", //GeoJSON的文件路径，用户可以根据需求而改变
+      //     format: new ol.format.GeoJSON(),
+      //   }),
+      //   style: new ol.style.Style({
+      //     fill: new ol.style.Fill({
+      //       //矢量图层填充颜色，以及透明度
+      //       color: "rgba(0,0,0,0)",
+      //     }),
+      //     stroke: new ol.style.Stroke({
+      //       //边界样式
+      //       color: "#47c68f",
+      //       width: 3,
+      //     }),
+      //   }),
+      // });
+      // map.addLayer(shitu);
+      // var huancui_zhen = new ol.layer.Vector({
+      //   title: "add huancui_zhen",
+      //   source: new ol.source.Vector({
+      //     projection: projection,
+      //     url: "http://116.255.135.38:8081/nsgk_test/profile/geojson/huancui_zhen.json", //GeoJSON的文件路径，用户可以根据需求而改变
+      //     format: new ol.format.GeoJSON(),
+      //   }),
+      //   style: new ol.style.Style({
+      //     fill: new ol.style.Fill({
+      //       //矢量图层填充颜色，以及透明度
+      //       color: "rgba(27,50,56,0.8)",
+      //     }),
+      //   }),
+      // });
+      // map.addLayer(huancui_zhen);
 
       ///-----------乡---------------------------------------------------------------------------------------------------------
       var villageVectorLayer; //村标记
@@ -2526,7 +2585,7 @@ export default {
                     duration: 1000, // 缩放持续时间，默认不需要设置
                   });
                   //特效动画实现 -----------------------------start
-                  if(tach == 1 && once == 0){
+                  if (tach == 1 && once == 0) {
                     texiao_layer_fang = new ol.layer.Vector({
                       source: new ol.source.Vector(),
                     });
@@ -2572,7 +2631,7 @@ export default {
                         })
                       );
                     });
-                  }else {
+                  } else {
                     texiao_layer_di = new ol.layer.Vector({
                       source: new ol.source.Vector(),
                     });
@@ -2908,32 +2967,32 @@ export default {
           })
           .then((data) => {
             //关联查询农地信息  ----------start
-           //  document.getElementById("info").innerHTML = "";
-           //  var select_di = (document.getElementById("info").innerHTML =
-           //    data.features[0].properties);
-           //  _this.farmhouseStatus = 1;
-           //  let obj = {};
-           //  let zjId = data.features[0].id;
-           //  let zjIdNum = zjId.replace("t_geo_hc_land.", "");
-           //  obj.id = zjIdNum; //	主键id
-           //  obj.xh = select_di.XH; //序号
-           //  obj.cm = select_di.CM; //村名
-           //  obj.cbrmc = select_di.CBRMC; //承包人名称
-           //  obj.syrmc = select_di.SYRMC; //使用人名称
-           //  obj.nydlx = select_di.NYDLX; //农用地类型
-           //  obj.mj = select_di.MJ; //面积
-           //  obj.xzqk = select_di.XZQK; //现状情况
-           //  obj.lzhtjzrq = select_di.LZHTJZRQ; //流转合同截止时间
-           //  obj.lzsynx = select_di.LZSYNX; //流转剩余年限
-           //  obj.sfylzyx = select_di.SFYLZYX; //是否流转意向
-           //  obj.cdm = select_di.CDM; //村代码
-           //  obj.orgCode = select_di.org_code; //行政区化代码
-           //  obj.frontland = select_di.frontland; //图片前
-           //  obj.behindland = select_di.behindland; //图片后
-           // // // _this.nydlxOptionsValue = trs.find("td").eq(5).text(); //农用地类型
-           //  let cloneObj = JSON.parse(JSON.stringify(obj));
-           //  _this.landInfoList = cloneObj;
-           //  _this.landInfoLookList = obj;
+            //  document.getElementById("info").innerHTML = "";
+            //  var select_di = (document.getElementById("info").innerHTML =
+            //    data.features[0].properties);
+            //  _this.farmhouseStatus = 1;
+            //  let obj = {};
+            //  let zjId = data.features[0].id;
+            //  let zjIdNum = zjId.replace("t_geo_hc_land.", "");
+            //  obj.id = zjIdNum; //	主键id
+            //  obj.xh = select_di.XH; //序号
+            //  obj.cm = select_di.CM; //村名
+            //  obj.cbrmc = select_di.CBRMC; //承包人名称
+            //  obj.syrmc = select_di.SYRMC; //使用人名称
+            //  obj.nydlx = select_di.NYDLX; //农用地类型
+            //  obj.mj = select_di.MJ; //面积
+            //  obj.xzqk = select_di.XZQK; //现状情况
+            //  obj.lzhtjzrq = select_di.LZHTJZRQ; //流转合同截止时间
+            //  obj.lzsynx = select_di.LZSYNX; //流转剩余年限
+            //  obj.sfylzyx = select_di.SFYLZYX; //是否流转意向
+            //  obj.cdm = select_di.CDM; //村代码
+            //  obj.orgCode = select_di.org_code; //行政区化代码
+            //  obj.frontland = select_di.frontland; //图片前
+            //  obj.behindland = select_di.behindland; //图片后
+            // // // _this.nydlxOptionsValue = trs.find("td").eq(5).text(); //农用地类型
+            //  let cloneObj = JSON.parse(JSON.stringify(obj));
+            //  _this.landInfoList = cloneObj;
+            //  _this.landInfoLookList = obj;
             //关联查询农地信息  ----------end
             //获取坐标定位开始----------start
             //var datamap = data.bbox;