map

map/index.html

@@ -21,13 +21,18 @@
   <script
     src="https://webapi.amap.com/maps?v=1.4.15&key=ee7327615de4d673c4e455a772da45fd&plugin=Map3D,AMap.DistrictSearch"></script>
   <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
   <script language="javascript">
+    // open -n /Applications/Google\ Chrome.app/ --args --disable-web-security  --user-data-dir=/Users/ff/git/
+
     var styleId = '14732285e0b3c284fa6efdb25627d3f6'
     var opts = {
-      subdistrict: 0,
+      subdistrict: 3,
       extensions: 'all',
-      level: 'city'
+      level: 'district'
     };
+    var bounds;
+    var boundsPath = [];
     var road = new AMap.TileLayer({
       getTileUrl: "https://wprd02.is.autonavi.com/appmaptile?x=[x]&y=[y]&z=[z]&lang=zh_cn&size=1&scl=1&style=8&ltype=12"
     })
@@ -45,12 +50,11 @@
     var district = new AMap.DistrictSearch(opts);
     var map
     var init = function () {
-      district.search('北京市', function (status, result) {
-        var bounds = result.districtList[0].boundaries;
-        var mask = []
-        for (var i = 0; i < bounds.length; i += 1) {
-          mask.push([bounds[i]])
-        }
+
+      district.search('110000', function (status, result) {
+        console.log(result);
+        bounds = result.districtList[0].boundaries;
+        boundsPath = bounds2Path(bounds)
         map = new AMap.Map('container', {
           // mask: mask,
           center: [116.472804, 39.995725],
@@ -65,6 +69,7 @@
           // layers: [road, ]//Satellite,
         });
         map.add(Satellite);
+        findsubarea(result)
         // map.getLayers()[0].setOpacity(0.5)
         // var maskerIn = new AMap.Marker({
         //   position: [116.501415, 39.926055],
@@ -91,7 +96,7 @@
           new AMap.Polyline({
             path: bounds[i],
             strokeColor: '#99ffff',
-            strokeWeight: 6,
+            strokeWeight: 8,
             map: map
           })
         }
@@ -108,44 +113,33 @@
         map: map
       });
       console.log(map.getLayers())
-      var countryCode = 100000, //全国
-        cityCodes = [
-          110000, //北京
-        ]
-      districtExplorer.loadMultiAreaNodes([countryCode], function (error, areaNodes) {
-        console.log(areaNodes)
-        var countryNode = areaNodes[0]
-        // cityNodes = areaNodes.slice(1);
+      var countryCode = 100000 //全国
+
+      districtExplorer.loadMultiAreaNodes([countryCode], function (error, areaNodes) {//.concat(areaCodes)
+
+        var cityNode = areaNodes[0],
+          areaNodes = areaNodes.slice(1);
 
         var path = [];
 
         //首先放置背景区域，这里是大陆的边界
-        path.push(getLongestRing(countryNode.getParentFeature()));
-
+        path.push(getLongestRing(cityNode.getParentFeature()));
 
-        for (var i = 0, len = cityCodes.length; i < len; i++) {
-          //逐个放置需要镂空的省级区域
-          path.push.apply(path, getAllRings(countryNode.getSubFeatureByAdcode(cityCodes[i])));
-        }
+        path.push.apply(path, [boundsPath])
+        var polygon = new AMap.Polygon({
+            bubble: true,
+            lineJoin: 'round',
+            strokeColor: '#99ffff', //线颜色
+            strokeOpacity: 1, //线透明度
+            strokeWeight: 5, //线宽
+            fillColor: 'black', //填充色
+            fillOpacity: 0.65, //填充透明度
+            map: map,
+            path: path
+          });
+     
 
-        // for (var i = 0, len = cityNodes.length; i < len; i++) {
-        //   //逐个放置需要镂空的市级区域
-        //   path.push.apply(path, getAllRings(cityNodes[i].getParentFeature()));
-        // }
 
-        //绘制带环多边形
-        //https://lbs.amap.com/api/javascript-api/reference/overlay#Polygon
-        var polygon = new AMap.Polygon({
-          bubble: true,
-          lineJoin: 'round',
-          strokeColor: 'red', //线颜色
-          strokeOpacity: 1, //线透明度
-          strokeWeight: 1, //线宽
-          fillColor: 'black', //填充色
-          fillOpacity: 0.65, //填充透明度
-          map: map,
-          path: path
-        });
       })
 
     }
@@ -170,6 +164,37 @@
 
       return rings[0];
     }
+    function bounds2Path(bounds) {
+      var path = []
+      for (var i = 0; i < bounds.length; i += 1) {
+        for (let index = 0; index < bounds[i].length; index++) {
+          let element = bounds[i][index];
+          path.push([element.lng, element.lat])
+        }
+      }
+      return path
+    }
+    function findsubarea(res) {
+      for (let index = 0; index < res.districtList[0].districtList[0].districtList.length; index++) {
+        let adcode = res.districtList[0].districtList[0].districtList[index].adcode;
+        district.search(adcode, function (status, result) {
+          // path.push.apply(path, )
+          var polygon2 = new AMap.Polygon({
+            bubble: true,
+            lineJoin: 'round',
+            strokeColor: '#99ffff', //线颜色
+            strokeOpacity: 1, //线透明度
+            strokeWeight: 2, //线宽
+            fillColor: 'black', //填充色
+            fillOpacity: 0., //填充透明度
+            map: map,
+            path: [bounds2Path(result.districtList[0].boundaries)]
+          })
+        })
+      }
+      
+
+    }
   </script>
 </body>