map

e6c089ff · fengfan · 95a782ff · e6c089ff
Commit e6c089ff authored Feb 26, 2020 by fengfan
Hide whitespace changes
Inline Side-by-side

Showing with 65 additions and 40 deletions

map/index.html
+65 -40

No files found.
--- a/map/index.html
+++ b/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;
+      district.search('110000', function (status, result) {
-        var mask = []
+        console.log(result);
-        for (var i = 0; i < bounds.length; i += 1) {
+        bounds = result.districtList[0].boundaries;
-          mask.push([bounds[i]])
+        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, //全国
+      var countryCode = 100000 //全国
-        cityCodes = [
-          110000, //北京
+      districtExplorer.loadMultiAreaNodes([countryCode], function (error, areaNodes) {//.concat(areaCodes)
-        ]
-      districtExplorer.loadMultiAreaNodes([countryCode], function (error, areaNodes) {
+        var cityNode = areaNodes[0],
-        console.log(areaNodes)
+          areaNodes = areaNodes.slice(1);
-        var countryNode = areaNodes[0]
-        // cityNodes = 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, [boundsPath])
-          //逐个放置需要镂空的省级区域
+        var polygon = new AMap.Polygon({
-          path.push.apply(path, getAllRings(countryNode.getSubFeatureByAdcode(cityCodes[i])));
+            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>