环翠手机端调查优化

src/views/homestead/index.vue

@@ -1842,6 +1842,11 @@ export default {
           maxZoom: 18.9, //地图放大限制
         }),
       });
+      //地图属性定义
+      var nongZt = ["house", "land"];
+      var texiao_layer_fang;
+      var texiao_layer_di;
+      var delete_map = ["mapHouse", "mapLand"];
       //业务图层  wfs服务  属性查询开始 ------------------start
       /**
        * @api wfs服务空间查询
@@ -2011,6 +2016,7 @@ export default {
 
         document.getElementById("info").innerHTML = "";
         var viewResolution = map.getView().getResolution(); ///** @type {number} */ (view.getResolution());
+        var zb = evt.coordinate;
         var url = wmsSource.getFeatureInfoUrl(
           evt.coordinate,
           viewResolution,
@@ -2029,6 +2035,56 @@ export default {
               _this.ndAddfileList = [];
               if (html.indexOf("<table") != -1) {
                 setTimeout(() => {
+                  map.removeLayer(texiao_layer_fang);
+                  map.removeLayer(texiao_layer_di);
+                  //特效动画实现 -----------------------------start
+                  texiao_layer_fang = new ol.layer.Vector({
+                    source: new ol.source.Vector(),
+                  });
+                  map.addLayer(texiao_layer_fang);
+                  var deptmap = [zb[0], zb[1]];
+                  //var center = ol.extent.getCenter(deptmap); //获取边界区域的中心位置
+                  var circle = new ol.Feature({
+                    geometry: new ol.geom.Point(deptmap), //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,
+                          }),
+                        }),
+                      })
+                    );
+                  });
+                  //特效动画实现 -----------------------------end
                   _this.hasTable = true;
                   document.getElementById("info").innerHTML = html;
                   if (html.indexOf("house") != -1) {
@@ -2232,10 +2288,6 @@ export default {
       //属性查询结束 ------------------end
 
       //按照分类查询  村定位地图-----------------start
-      var nongZt = ["house", "land"];
-      var texiao_layer_fang;
-      var texiao_layer_di;
-      var delete_map = ["mapHouse", "mapLand"];
       $("#cun").on("change", function () {
         /**
          * @api wfs服务空间查询
@@ -2551,7 +2603,7 @@ export default {
         //alert("进入分类");
         //删除之前加载的图层
         map.removeLayer(texiao_layer_fang);
-
+        map.removeLayer(texiao_layer_di);
         var cun = _this.villageDataObj.deptName;
 
         //删除之前加载的图层
@@ -2708,6 +2760,7 @@ export default {
         //alert("进入分类");
         //删除之前加载的图层
         map.removeLayer(texiao_layer_di);
+        map.removeLayer(texiao_layer_fang);
         var cun = _this.villageDataObj.deptName;
         //删除之前加载的图层
         //map.removeLayer(dishitu);