111

src/views/modules/visual/command/cpts/map.vue

@@ -48,6 +48,7 @@ let dotLayer2;
 let countTextLayer;
 let countTextBgLayer;
 let searchMarker;
+let searchBgLayer;
 
 export default {
   name: "l7",
@@ -627,8 +628,82 @@ export default {
       }
     },
 
+    drawSearchBg(lng, lat) {
+      function getPoints(lng, lat) {
+        // lng 经度；lat 纬度；dis 距离（千米）
+        let r = 6371; //地球半径千米
+        let dis = 1.5; //3千米距离
+        let dlng =
+          2 *
+          Math.asin(Math.sin(dis / (2 * r)) / Math.cos((lat * Math.PI) / 180));
+        dlng = (dlng * 180) / Math.PI; // 经度半径
+        let dlat = dis / r;
+        dlat = (dlat * 180) / Math.PI; // 纬度半径
+        // 圆形每一度 都算出一个经纬度
+        for (let sides = 1; sides <= 360; sides++) {
+          var angle = Math.PI * (1 / sides - 1 / 2);
+          var rotatedAngle, x, y;
+          var points = [];
+          for (var i = 0; i < sides; ++i) {
+            rotatedAngle = angle + (i * 2 * Math.PI) / sides;
+            x = lng + dlng * Math.cos(rotatedAngle);
+            y = lat + dlat * Math.sin(rotatedAngle);
+            points.push([x, y]);
+          }
+        }
+        console.log("points=======", points);
+        return points;
+      }
+
+      let sourceData;
+      if (lng) {
+        sourceData = {
+          type: "FeatureCollection",
+          features: [
+            {
+              type: "Feature",
+              properties: {
+                center: [lng, lat],
+              },
+              geometry: {
+                type: "Polygon",
+                coordinates: [getPoints(lng, lat)],
+              },
+            },
+          ],
+        };
+      } else {
+        sourceData = {
+          type: "FeatureCollection",
+          features: [],
+        };
+      }
+
+      if (searchBgLayer) {
+        searchBgLayer.setData(sourceData);
+      } else {
+        searchBgLayer = new PolygonLayer({
+        //   autoFit: true,
+        })
+          .source(sourceData)
+          .color("#f0f")
+          .shape("fill")
+          .style({
+            opacityLinear: {
+              enable: true, // true - false
+              dir: "out", // in - out
+            },
+            opacity: 0.3,
+            raisingHeight: 0,
+          });
+
+        scene.addLayer(searchBgLayer);
+      }
+    },
+
     async setDotMarker(item, posArr) {
       this.removeDotMarker();
+      this.drawSearchBg(...posArr);
       const marker = new Marker({
         offsets: [0, -20],
       }).setLnglat(posArr);
@@ -652,7 +727,7 @@ export default {
       });
 
       scene.addMarker(marker);
-      scene.setZoomAndCenter(18, posArr);
+      scene.setZoomAndCenter(14, posArr);
       marker.openPopup();
       searchMarker = marker;
     },
@@ -661,6 +736,7 @@ export default {
       if (searchMarker) {
         searchMarker.remove();
       }
+      this.drawSearchBg();
     },
 
     // 把地图缩放等级在原来基础上大一点

src/views/modules/visual/command/index.vue

@@ -50,7 +50,7 @@
               @keyup.enter="handleSearch"
               v-model="searchName"
             />
-            <img
+            <img v-show="searchName"
               class="i-close"
               @click="clearSearch"
               src="@/assets/img/shuju/command/close.png"