修改限制

map/index.html

@@ -12,7 +12,7 @@
       html,
       #container {
         margin: 0;
-        width:  100%;
+        width: 100%;
         height: 100%;
       }
     </style>
@@ -75,7 +75,12 @@
         ) {
           console.log(result);
           bounds = result.districtList[0].boundaries;
-          boundsPath = bounds2Path(bounds);
+          var _bounds = bounds2Path(bounds);
+          boundsPath = _bounds.path;
+          var dragLimitBounds = new AMap.Bounds(
+            new AMap.LngLat(Number(_bounds.minlng), Number(_bounds.minlat)),
+            new AMap.LngLat(Number(_bounds.maxlng), Number(_bounds.maxlat))
+          );
           let mask = [];
           for (var i = 0; i < bounds.length; i += 1) {
             mask.push([bounds[i]]);
@@ -131,13 +136,15 @@
               map: map
             });
           }
-          // AMapUI.loadUI(['geo/DistrictExplorer'], function (DistrictExplorer) {
-          //   initMask(DistrictExplorer);
-          // });
+          map.setFitView();
+          dragLimit(dragLimitBounds); //拖动限制 限制地图显示范围
           // 获取人员信息
           $.getJSON('./personal.json').then(res => {
             console.log(JSON.parse(res));
-            currentDetailList = JSON.parse(res).currentDetailList.slice(0, 2000);
+            currentDetailList = JSON.parse(res).currentDetailList.slice(
+              0,
+              2000
+            );
             currentDetailList.map(item => {
               setPersonalPoint(item);
             });

map/js/utils.js

@@ -56,16 +56,22 @@ function getLongestRing(feature) {
   return rings[0];
 }
 function bounds2Path(bounds) {
+  var maxlng,minlng,maxlat,minlat
   var path = [];
   for (var i = 0; i < bounds.length; i += 1) {
     var subPath = [];
     for (let index = 0; index < bounds[i].length; index++) {
       let element = bounds[i][index];
       subPath.push([element.lng, element.lat]);
+      if(!maxlng || element.lng>maxlng)maxlng=element.lng;
+      if(!minlng || element.lng<minlng)minlng=element.lng;
+      if(!maxlat || element.lat>maxlat)maxlat=element.lat;
+      if(!minlat || element.lat<minlat)minlat=element.lat;
+      // console.log(maxlat,minlat);
     }
     path.push(subPath);
   }
-  return path;
+  return {path,maxlng,minlng,maxlat,minlat};
 }
 function findsubarea(res) {
   let childrensDistrictList = res.districtList[0].districtList;
@@ -86,7 +92,7 @@ function findsubarea(res) {
         fillColor: 'black', //填充色
         fillOpacity: 0, //填充透明度
         map: map,
-        path: bounds2Path(result.districtList[0].boundaries)
+        path: bounds2Path(result.districtList[0].boundaries).path
       });
     });
   }
@@ -180,4 +186,13 @@ function setPersonalPoint(item) {
     Markers.push(marker)
     
     // circleMarker.setMap(map)
-  }
\ No newline at end of file
+  }
+function dragLimit(bounds) {
+    //https://lbs.amap.com/api/javascript-api/example/map/limit-map-show-range/    map.clearLimitBounds();  bounds = map.getBounds(); map.setLimitBounds(bounds);
+    // var mapBounds = map.getBounds()
+    // // var mapBounds = new AMap.Bounds(southWest:LngLat, northEast:LngLat)
+    // console.log(mapBounds);
+    // var bounds = map.getBounds();
+    map.setLimitBounds(bounds);
+
+}
\ No newline at end of file