新增地图区域显示控制

 <!--
 <!--
  * @Date: 2023-05-19 14:54:27
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-10 12:14:05
+ * @LastEditTime: 2024-07-11 15:12:46
  * @FilePath: /map-demo/src/views/index.vue
  * @FilePath: /map-demo/src/views/index.vue
  * @Description: 公众地图主体页面
  * @Description: 公众地图主体页面
 -->
 -->
@@ -322,7 +322,7 @@ export default {
         showLabel: true, // 是否展示地图文字和 POI 信息
         showLabel: true, // 是否展示地图文字和 POI 信息
         zoom: this.data_zoom, // 设置地图显示的缩放级别
         zoom: this.data_zoom, // 设置地图显示的缩放级别
         pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。
         pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。
-        rotation: 0, // 地图顺时针旋转角度，取值范围 [0-360] ，默认值：0
+        rotation: this.data_rotation, // 地图顺时针旋转角度，取值范围 [0-360] ，默认值：0
         center: this.data_center, // 设置地图中心点坐标
         center: this.data_center, // 设置地图中心点坐标
         forceVector: false,
         forceVector: false,
         // rotateEnable: true,
         // rotateEnable: true,
@@ -898,20 +898,55 @@ export default {
 
 
       // layer1.setMap(this.map);
       // layer1.setMap(this.map);
 
 
+      // TODO: 暂时屏蔽等待数据设置字段
       // 只显示相应区域，移动会回到选定范围
       // 只显示相应区域，移动会回到选定范围
       // this.lockMapBounds()
       // this.lockMapBounds()
 
 
     },
     },
     // 限制地图范围
     // 限制地图范围
-    // lockMapBounds() {
-    //   // var bounds = this.map.getBounds();
-    //   var myBounds = new AMap.Bounds(
-    //     [120.583246, 31.31645],
-    //     [120.589973, 31.311949]
-    //   );
+    lockMapBounds() {
+      // var bounds = this.map.getBounds();
+      var myBounds = new AMap.Bounds(
+        // [120.58626,31.316141],
+        // [120.588357,31.313204]
+        [117.052221,26.834886],
+        [117.046739,26.838553]
+      );
 
 
-    //   this.map.setLimitBounds(myBounds);
-    // },
+      this.map.setLimitBounds(myBounds);
+
+      let list =[
+        [120.585097,31.316144],
+        [120.588264,31.316373],
+        [120.588712,31.313162],
+        [120.58609,31.313013]
+      ]
+
+      // 隐藏边界以外的区域
+      let outer = [
+        new AMap.LngLat(-360, 90, true),
+        new AMap.LngLat(-360, -90, true),
+        new AMap.LngLat(360, -90, true),
+        new AMap.LngLat(360, 90, true),
+      ]   // 遮盖填充反向
+
+      let pathArray = [
+        outer,
+        list
+      ]
+
+      var polygon = new AMap.Polygon({
+        pathL: pathArray,
+        strokeColor: "#fff",
+        strokeWeight: 2,
+        fillColor: "#fff",
+        fillOpacity: 1,
+      })
+
+      polygon.setPath(pathArray)
+      this.map.add(polygon)
+
+    },
     showInfoClick(e) {
     showInfoClick(e) {
       // console.log(e);
       // console.log(e);
       var zoom = this.map.getZoom(); //获取当前地图级别
       var zoom = this.map.getZoom(); //获取当前地图级别