优化

src/views/homestead/index.vue

@@ -2423,10 +2423,10 @@ export default {
           //map.removeLayer(shitu);
           //删除之前图层 --------------------start
           //属性查询删除
-          map.removeLayer(nongZt[0]);
-          map.removeLayer(nongZt[1]);
-          map.removeLayer(delete_map[0]);
-          map.removeLayer(delete_map[1]);
+          //map.removeLayer(nongZt[0]);
+          //map.removeLayer(nongZt[1]);
+          //map.removeLayer(delete_map[0]);
+          //map.removeLayer(delete_map[1]);
           map.removeLayer(texiao_layer_fang);
           map.removeLayer(texiao_layer_di);
           //删除之前图层 -------------------end
@@ -2524,6 +2524,101 @@ export default {
                     rotation: undefined, // 缩放完成view视图旋转弧度
                     duration: 1000, // 缩放持续时间，默认不需要设置
                   });
+                  //特效动画实现 -----------------------------start
+                  if(tach == 1 && once == 0){
+                    texiao_layer_fang = new ol.layer.Vector({
+                      source: new ol.source.Vector(),
+                    });
+                    map.addLayer(texiao_layer_fang);
+                    var center = ol.extent.getCenter(datamap); //获取边界区域的中心位置
+                    var circle = new ol.Feature({
+                      geometry: new ol.geom.Point(center), //ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857') //投影坐标转为地理坐标
+                    });
+
+                    //var out =new ol.coordinate.Coordinate(datamap);
+                    //var extent = ol.extent.boundingExtent(feature.getGeometry().getCoordinates()[datamap]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
+                    //var center = ol.extent.getCenter(extent);   //获取边界区域的中心位置
+                    //map.getView().setCenter(center);  //设置当前地图的显示中心位置
+                    circle.setStyle(
+                      new ol.style.Style({
+                        image: new ol.style.Circle({
+                          radius: 0,
+                          stroke: new ol.style.Stroke({
+                            color: "yellow",
+                            size: 1,
+                          }),
+                        }),
+                      })
+                    );
+                    texiao_layer_fang.getSource().addFeature(circle);
+
+                    // 关键的地方在此：监听postcompose事件，在里面重新设置circle的样式
+                    var radius = 0;
+                    map.on("postcompose", function () {
+                      // 增大半径，最大20
+                      radius++;
+                      radius = radius % 10;
+                      // 设置样式
+                      circle.setStyle(
+                        new ol.style.Style({
+                          image: new ol.style.Circle({
+                            radius: radius,
+                            stroke: new ol.style.Stroke({
+                              color: "yellow",
+                              size: 1,
+                            }),
+                          }),
+                        })
+                      );
+                    });
+                  }else {
+                    texiao_layer_di = new ol.layer.Vector({
+                      source: new ol.source.Vector(),
+                    });
+                    map.addLayer(texiao_layer_di);
+                    var center = ol.extent.getCenter(datamap); //获取边界区域的中心位置
+                    var circle = new ol.Feature({
+                      geometry: new ol.geom.Point(center), //ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857') //投影坐标转为地理坐标
+                    });
+
+                    //var out =new ol.coordinate.Coordinate(datamap);
+                    //var extent = ol.extent.boundingExtent(feature.getGeometry().getCoordinates()[datamap]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
+                    //var center = ol.extent.getCenter(extent);   //获取边界区域的中心位置
+                    //map.getView().setCenter(center);  //设置当前地图的显示中心位置
+                    circle.setStyle(
+                      new ol.style.Style({
+                        image: new ol.style.Circle({
+                          radius: 0,
+                          stroke: new ol.style.Stroke({
+                            color: "yellow",
+                            size: 1,
+                          }),
+                        }),
+                      })
+                    );
+                    texiao_layer_di.getSource().addFeature(circle);
+
+                    // 关键的地方在此：监听postcompose事件，在里面重新设置circle的样式
+                    var radius = 0;
+                    map.on("postcompose", function () {
+                      // 增大半径，最大20
+                      radius++;
+                      radius = radius % 10;
+                      // 设置样式
+                      circle.setStyle(
+                        new ol.style.Style({
+                          image: new ol.style.Circle({
+                            radius: radius,
+                            stroke: new ol.style.Stroke({
+                              color: "yellow",
+                              size: 1,
+                            }),
+                          }),
+                        })
+                      );
+                    });
+                  }
+                  //特效动画实现 -----------------------------end
                 } else if (tach == 1) {
                   once = once + 1;
                 } else {
@@ -2605,7 +2700,7 @@ export default {
         map.removeLayer(texiao_layer_fang);
         map.removeLayer(texiao_layer_di);
         var cun = _this.villageDataObj.deptName;
-
+        _this.homesteadListShrink();
         //删除之前加载的图层
         //map.removeLayer(dishitu);
         //map.removeLayer(cunshitu);
@@ -2761,6 +2856,7 @@ export default {
         //删除之前加载的图层
         map.removeLayer(texiao_layer_di);
         map.removeLayer(texiao_layer_fang);
+        _this.homesteadListShrink();
         var cun = _this.villageDataObj.deptName;
         //删除之前加载的图层
         //map.removeLayer(dishitu);
@@ -2811,26 +2907,32 @@ export default {
           })
           .then((data) => {
             //关联查询农地信息  ----------start
-            // document.getElementById("info").innerHTML = "";
-            // var select_di = (document.getElementById("info").innerHTML =
-            //   data.features[0].properties);
-            // _this.hasTable = true;
-            // _this.hasDateStatus = 0;
-            // let obj = {};
-            // //let trs = $("#info").find("tr:eq(1)");
-            // 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.org_code = select_di.org_code; //行政区化代码
-            // _this.hasData = 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;