feat: 新增地图自动缩放

nngkxxdp/src/main/resources/application-prod.yml

@@ -1,11 +1,5 @@
 server:
   port: 7654
-  ssl:
-    key-store-password: pp8d633l
-    key-store: classpath:data.cqna.gov.cn.pfx
-    key-store-type: PKCS12
-http:
-  port: 80
 file:
   path: D:/na_web_img/
   location: D:/na_web_img/upload/

nngkxxdp/src/main/resources/static/naxsb/dqfwNew.html

@@ -12,7 +12,7 @@
   <!-- 引入组件库 -->
   <script src="js/index.js"></script>
   <script src="js/jquery-3.5.1.min.js"></script>
-  <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7XivTux4H2e1ifKLjvEhxfuayDYxAluq">
+  <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=3.0&ak=7XivTux4H2e1ifKLjvEhxfuayDYxAluq">
   </script>
   <script src="js/urljson.js"></script>
   <style>
@@ -644,7 +644,8 @@
         fadeOut: false,
         fadeIn: false,
         id: null,
-        curraddr: ''
+        curraddr: '',
+        map : null
       };
     },
     created() { },
@@ -716,31 +717,71 @@
           .then(response => response.json())
           .then(data => {
             var centerPoint = data.features[0].properties.center;
-            var map = new BMap.Map("mapcontainer");
-            map.enableScrollWheelZoom(); // 启用滚轮缩放
-            map.enableDragging(); // 启用拖拽功能
+            map = new BMapGL.Map("mapcontainer");
+            map.enableScrollWheelZoom(true); // 启用滚轮缩放
+            map.enableDragging(true); // 启用拖拽功能
             const id = that.id;
+            map.setMapStyleV2({
+              styleJson: [
+                // {
+                //     "featureType": "road",
+                //     "elementType": "all",
+                //     "stylers": {
+                //         "color": "#ffffff",
+                //         "visibility": "off"
+                //     }
+                // },
+                {
+                  "featureType": "building",
+                  "elementType": "all",
+                  "stylers": {
+                    "visibility": "off"
+                  }
+                },
+                {
+                  "featureType": "poilabel",
+                  "elementType": "all",
+                  "stylers": {
+                    "visibility": "off"
+                  }
+                },
+                {
+                  "featureType": "manmade",
+                  "elementType": "all",
+                  "stylers": {
+                    "visibility": "off"
+                  }
+                },
+              ]
+            });
             // 设定中心点和地图级别
+            var level = 14;
             if (id == 1) {
-              map.centerAndZoom(new BMap.Point(106.651444, 29.48682), 16);
+              map.centerAndZoom(new BMapGL.Point(106.651444, 29.45682), 3);
+              level = 14;
             } else if (id == 2) {
-              map.centerAndZoom(new BMap.Point(106.76723874457288, 29.595276880811712), 15);
+              map.centerAndZoom(new BMapGL.Point(106.76723874457288, 29.573276880811712), 3);
+              level = 14;
             } else if (id == 3) {
-              map.centerAndZoom(new BMap.Point(106.69517131217539, 29.53277313312822), 16);
+              map.centerAndZoom(new BMapGL.Point(106.69517131217539, 29.51577313312822), 3);
+              level = 15;
             } else if (id == 4) {
-              map.centerAndZoom(new BMap.Point(106.559829995157, 29.512581648208534), 15);
+              map.centerAndZoom(new BMapGL.Point(106.559829995157, 29.501581648208534), 3);
+              level = 15;
             } else if (id == 5) {
-              map.centerAndZoom(new BMap.Point(106.72194027111843, 29.519690776940248), 16);
+              map.centerAndZoom(new BMapGL.Point(106.72194027111843, 29.513690776940248), 3);
+              level = 16;
             } else if (id == 6) {
-              map.centerAndZoom(new BMap.Point(106.70580793222035, 29.520020426917684), 17);
+              map.centerAndZoom(new BMapGL.Point(106.70580793222035, 29.514020426917684), 3);
+              level = 16;
             } else {
-              map.centerAndZoom(new BMap.Point(106.651444, 29.48682), 14);
+              map.centerAndZoom(new BMapGL.Point(106.651444, 29.48682), 3);
             }
             map.setMapType(BMAP_NORMAL_MAP);
             var pointList = data.features[0].geometry.coordinates[0][0];
             let result = [];
             pointList.forEach(function (point) {
-              result.push(new BMap.Point(point[0], point[1]));
+              result.push(new BMapGL.Point(point[0], point[1]));
             });
             // 创建多边形
             // let polygon = new BMap.Polygon(result, {
@@ -757,10 +798,10 @@
             let result1 = [];
             pointList1.forEach(function (point) {
               let arr = point.split(',');
-              result1.push(new BMap.Point(arr[0], arr[1]));
+              result1.push(new BMapGL.Point(arr[0], arr[1]));
             });
             // 创建多边形
-            polygon1 = new BMap.Polygon(result1, {
+            polygon1 = new BMapGL.Polygon(result1, {
               strokeColor: "transparent",
               strokeWeight: 0,
               strokeOpacity: 1,
@@ -770,6 +811,9 @@
             });
             // 将多边形添加到地图中
             map.addOverlay(polygon1);
+            setTimeout(function name(params) {
+              that.zoomInStepByStep(3, level);
+            },3000)
           })
           .catch(error => console.error('Error fetching JSON:', error));
 
@@ -784,27 +828,49 @@
         }, 50);
       },
       loadMap(points) {
-        let map = new BMap.Map("mapcontainer");
+        let map = new BMapGL.Map("mapcontainer");
         map.enableScrollWheelZoom(); // 启用滚轮缩放
         map.enableDragging(); // 启用拖拽功能
         // 设定中心点和地图级别
         const addr = new URL(window.location.href);
         const id = addr.searchParams.get('id');
         // 设定中心点和地图级别
+        // if (id == 1) {
+        //   map.centerAndZoom(new BMapGL.Point(106.651444, 29.45682), 14);
+        // } else if (id == 2) {
+        //   map.centerAndZoom(new BMapGL.Point(106.76723874457288, 29.573276880811712), 14);
+        // } else if (id == 3) {
+        //   map.centerAndZoom(new BMapGL.Point(106.69517131217539, 29.51577313312822), 15);
+        // } else if (id == 4) {
+        //   map.centerAndZoom(new BMapGL.Point(106.559829995157, 29.501581648208534), 15);
+        // } else if (id == 5) {
+        //   map.centerAndZoom(new BMapGL.Point(106.72194027111843, 29.513690776940248), 16);
+        // } else if (id == 6) {
+        //   map.centerAndZoom(new BMapGL.Point(106.70580793222035, 29.514020426917684), 16);
+        // } else {
+        //   map.centerAndZoom(new BMapGL.Point(106.651444, 29.48682), 14);
+        // }
+        var level = 14;
         if (id == 1) {
-          map.centerAndZoom(new BMap.Point(106.651444, 29.45682), 14);
+          map.centerAndZoom(new BMapGL.Point(106.651444, 29.45682), 3);
+          level = 14;
         } else if (id == 2) {
-          map.centerAndZoom(new BMap.Point(106.76723874457288, 29.573276880811712), 14);
+          map.centerAndZoom(new BMapGL.Point(106.76723874457288, 29.573276880811712), 3);
+          level = 14;
         } else if (id == 3) {
-          map.centerAndZoom(new BMap.Point(106.69517131217539, 29.51577313312822), 15);
+          map.centerAndZoom(new BMapGL.Point(106.69517131217539, 29.51577313312822), 3);
+          level = 15;
         } else if (id == 4) {
-          map.centerAndZoom(new BMap.Point(106.559829995157, 29.501581648208534), 15);
+          map.centerAndZoom(new BMapGL.Point(106.559829995157, 29.501581648208534), 3);
+          level = 15;
         } else if (id == 5) {
-          map.centerAndZoom(new BMap.Point(106.72194027111843, 29.513690776940248), 16);
+          map.centerAndZoom(new BMapGL.Point(106.72194027111843, 29.513690776940248), 3);
+          level = 16;
         } else if (id == 6) {
-          map.centerAndZoom(new BMap.Point(106.70580793222035, 29.514020426917684), 16);
+          map.centerAndZoom(new BMapGL.Point(106.70580793222035, 29.514020426917684), 3);
+          level = 16;
         } else {
-          map.centerAndZoom(new BMap.Point(106.651444, 29.48682), 14);
+          map.centerAndZoom(new BMapGL.Point(106.651444, 29.48682), 3);
         }
         map.setMapType(BMAP_NORMAL_MAP);
         if (!points) return;
@@ -837,6 +903,10 @@
         //   textStrokeWidth: "4px", // 文本描边宽度
         // });
         // map.addOverlay(label);
+        // 开始递进缩放
+        setTimeout(function name(params) {
+          that.zoomInStepByStep(3, level);
+        },3000)
       },
       async getParkData() {
         let that = this;
@@ -909,7 +979,18 @@
           i++
           document.querySelector('.ztfwC').style.marginTop = `-${i}px`
         }, 50);
-      }
+      },
+
+      // 递进缩放函数
+      zoomInStepByStep(currentZoom, maxZoom) {
+        let that = this;
+        if (currentZoom <= maxZoom) {
+          map.setZoom(currentZoom,true);
+          setTimeout(function() {
+            that.zoomInStepByStep(currentZoom + 0.5, maxZoom);
+          }, 100); // 每秒钟放大一级
+        }
+  }
     }
   });
 </script>

nngkxxdp/src/main/resources/static/naxsb/js/rightmap.js

@@ -1,34 +1,35 @@
 
-var map = new BMap.Map("mapcontainer");
+var map = new BMapGL.Map("mapcontainer");
 map.enableScrollWheelZoom();// 启用滚轮缩放
 map.enableDragging(); // 启用拖拽功能
 // 创建点坐标
 var points = [
-    new BMap.Point(106.644876, 29.494949),
-    new BMap.Point(106.635821, 29.481304),
-    new BMap.Point(106.638048, 29.480675),
-    new BMap.Point(106.645379, 29.481744),
-    new BMap.Point(106.648397, 29.479921),
-    new BMap.Point(106.65429, 29.480675),
-    new BMap.Point(106.66392, 29.481367),
-    new BMap.Point(106.663057, 29.486209),
-    new BMap.Point(106.662985, 29.486901),
-    new BMap.Point(106.666076, 29.48885),
-    new BMap.Point(106.666507, 29.490233),
-    new BMap.Point(106.665573, 29.493817),
-    new BMap.Point(106.66162, 29.49564),
-    new BMap.Point(106.661692, 29.493503),
-    new BMap.Point(106.659105, 29.49344),
-    new BMap.Point(106.658171, 29.491868),
-    new BMap.Point(106.654721, 29.492874),
-    new BMap.Point(106.65314, 29.494383),
-    new BMap.Point(106.651415, 29.496143),
-    new BMap.Point(106.649475, 29.493251),
+    new BMapGL.Point(106.644876, 29.494949),
+    new BMapGL.Point(106.635821, 29.481304),
+    new BMapGL.Point(106.638048, 29.480675),
+    new BMapGL.Point(106.645379, 29.481744),
+    new BMapGL.Point(106.648397, 29.479921),
+    new BMapGL.Point(106.65429, 29.480675),
+    new BMapGL.Point(106.66392, 29.481367),
+    new BMapGL.Point(106.663057, 29.486209),
+    new BMapGL.Point(106.662985, 29.486901),
+    new BMapGL.Point(106.666076, 29.48885),
+    new BMapGL.Point(106.666507, 29.490233),
+    new BMapGL.Point(106.665573, 29.493817),
+    new BMapGL.Point(106.66162, 29.49564),
+    new BMapGL.Point(106.661692, 29.493503),
+    new BMapGL.Point(106.659105, 29.49344),
+    new BMapGL.Point(106.658171, 29.491868),
+    new BMapGL.Point(106.654721, 29.492874),
+    new BMapGL.Point(106.65314, 29.494383),
+    new BMapGL.Point(106.651415, 29.496143),
+    new BMapGL.Point(106.649475, 29.493251),
 ];
 // 创建多边形
-var polygon = new BMap.Polygon(points, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5, fillColor: "blue", fillOpacity: 0.15 });
+var polygon = new BMapGL.Polygon(points, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5, fillColor: "blue", fillOpacity: 0.15 });
 // 将多边形添加到地图中
 // map.addOverlay(polygon);
 // 设定中心点和地图级别
-map.centerAndZoom(new BMap.Point(106.651444, 29.48682), 15);
+// map.centerAndZoom(new BMap.Point(106.651444, 29.48682), 15);
+map.centerAndZoom(new BMapGL.Point(106.651444, 29.48682), 3);
 map.setMapType(BMAP_NORMAL_MAP);