调整地图自适应

25e986ce · hanjixin · 972e5d83 · 25e986ce · 25e986ce
Commit 25e986ce authored Feb 26, 2020 by hanjixin
Show whitespace changes
Inline Side-by-side

Showing with 78 additions and 60 deletions

map/.DS_Store
+0 -0

map/index111.html
+78 -60

No files found.
--- a/map/.DS_Store
+++ b/map/.DS_Store
--- a/map/index111.html
+++ b/map/index111.html
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html>
+  <head>
-<head>
+    <meta
-  <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
+      name="viewport"
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+      content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0"
+    />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>区域掩模</title>
    <style>
      body,
      html,
      #container {
        margin: 0;
-      width: 100%;
+        width: 90%;
-      height: 100%
+        height: 100%;
      }
    </style>
-</head>
+  </head>
-<body>
+  <body>
    <div id="container"></div>
-  <script
+    <script src="https://webapi.amap.com/maps?v=1.4.15&key=ee7327615de4d673c4e455a772da45fd&plugin=Map3D,AMap.DistrictSearch"></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 styleId = '14732285e0b3c284fa6efdb25627d3f6';
      var opts = {
        subdistrict: 3,
        extensions: 'all',
@@ -34,42 +35,57 @@
      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"
+        getTileUrl:
-    })
+          'https://wprd02.is.autonavi.com/appmaptile?x=[x]&y=[y]&z=[z]&lang=zh_cn&size=1&scl=1&style=8&ltype=12'
+      });
+      function GetParams() {
+        var url = location.search; //获取url中"?"符后的字串
+        var theRequest = new Object();
+        if (url.indexOf('?') != -1) {
+          var str = url.substr(1);
+          strs = str.split('&');
+          for (var i = 0; i < strs.length; i++) {
+            theRequest[strs[i].split('=')[0]] = decodeURI(
+              strs[i].split('=')[1]
+            );
+          }
+        }
+        return theRequest;
+      }
+      var params = GetParams();
      //ltype 2 路网  12 poi
      var Satellite = new AMap.TileLayer.Satellite({
        rejectMapMask: true,
-      zIndex: 0
+        zIndex: 10
-    })
+      });
      var RoadNet = new AMap.TileLayer.RoadNet({
        rejectMapMask: true,
-      mapStyle: 'amap://styles/' + styleId,
+        mapStyle: 'amap://styles/' + styleId
-    })
+      });
      //利用行政区查询获取边界构建mask路径
      //也可以直接通过经纬度构建mask路径
      var district = new AMap.DistrictSearch(opts);
-    var map
+      var map;
-    var init = function () {
+      var init = function() {
+        district.search(params.city ? params.city : '成都市', function(status, result) {
-      district.search('110000', function (status, result) {
          console.log(result);
          bounds = result.districtList[0].boundaries;
-        boundsPath = bounds2Path(bounds)
+          boundsPath = bounds2Path(bounds);
          map = new AMap.Map('container', {
            // mask: mask,
-          center: [116.472804, 39.995725],
+            center: [result.districtList[0].center.lng, result.districtList[0].center.lat],
-          mapStyle: 'amap://styles/' + styleId,
+            // mapStyle: 'amap://styles/' + styleId,
            disableSocket: true,
            viewMode: '3D',
            showLabel: false,
            labelzIndex: 130,
            pitch: 40,
-          zoom: 9,
+            zoom: 9
            // layers: [RoadNet,Satellite ]//Satellite,
            // layers: [road, ]//Satellite,
          });
          map.add(Satellite);
-        findsubarea(result)
+          findsubarea(result);
          // map.getLayers()[0].setOpacity(0.5)
          // var maskerIn = new AMap.Marker({
          //   position: [116.501415, 39.926055],
@@ -81,16 +97,16 @@
          // })
          //添加高度面
          var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1000 });
-        map.add(object3Dlayer)
+          map.add(object3Dlayer);
          var height = -59800;
-        var color = '#ffffffcc';//rgba
+          var color = '#ffffffcc'; //rgba
          var wall = new AMap.Object3D.Wall({
            path: bounds,
            height: height,
            color: color
          });
-        wall.transparent = true
+          wall.transparent = true;
-        object3Dlayer.add(wall)
+          object3Dlayer.add(wall);
          //添加描边
          for (var i = 0; i < bounds.length; i += 1) {
            new AMap.Polyline({
@@ -98,24 +114,28 @@
              strokeColor: '#99ffff',
              strokeWeight: 8,
              map: map
-          })
+            });
          }
-        AMapUI.loadUI(['geo/DistrictExplorer'], function (DistrictExplorer) {
+          AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) {
            initMask(DistrictExplorer);
          });
        });
-    }
+      };
-    init()
+      init();
      function initMask(DistrictExplorer) {
        //创建一个实例
        var districtExplorer = new DistrictExplorer({
          map: map
        });
-      console.log(map.getLayers())
+        console.log(map.getLayers());
-      var countryCode = 100000 //全国
+        var countryCode = 100000; //全国
-      districtExplorer.loadMultiAreaNodes([countryCode], function (error, areaNodes) {//.concat(areaCodes)
+        districtExplorer.loadMultiAreaNodes([countryCode], function(
+          error,
+          areaNodes
+        ) {
+          //.concat(areaCodes)
          var cityNode = areaNodes[0],
            areaNodes = areaNodes.slice(1);
@@ -124,8 +144,8 @@
          //首先放置背景区域，这里是大陆的边界
          path.push(getLongestRing(cityNode.getParentFeature()));
+          debugger;
-        path.push.apply(path, [boundsPath])
+          path.push.apply(path, [boundsPath]);
          var polygon = new AMap.Polygon({
            bubble: true,
            lineJoin: 'round',
@@ -137,14 +157,9 @@
            map: map,
            path: path
          });
+        });
-      })
      }
      function getAllRings(feature) {
        var coords = feature.geometry.coordinates,
          rings = [];
@@ -158,26 +173,32 @@
      function getLongestRing(feature) {
        var rings = getAllRings(feature);
-      rings.sort(function (a, b) {
+        rings.sort(function(a, b) {
          return b.length - a.length;
        });
        return rings[0];
      }
      function bounds2Path(bounds) {
-      var path = []
+        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])
+            path.push([element.lng, element.lat]);
          }
        }
-      return path
+        return path;
      }
      function findsubarea(res) {
-      for (let index = 0; index < res.districtList[0].districtList[0].districtList.length; index++) {
+        let childrensDistrictList = res.districtList[0].districtList
-        let adcode = res.districtList[0].districtList[0].districtList[index].adcode;
+        for (
-        district.search(adcode, function (status, result) {
+          let index = 0;
+          index < childrensDistrictList.length;
+          index++
+        ) {
+          let adcode =
+            childrensDistrictList[index].adcode
+          district.search(adcode, function(status, result) {
            // path.push.apply(path, )
            var polygon2 = new AMap.Polygon({
              bubble: true,
@@ -186,16 +207,13 @@
              strokeOpacity: 1, //线透明度
              strokeWeight: 2, //线宽
              fillColor: 'black', //填充色
-            fillOpacity: 0., //填充透明度
+              fillOpacity: 0, //填充透明度
              map: map,
              path: [bounds2Path(result.districtList[0].boundaries)]
-          })
+            });
-        })
+          });
        }
      }
    </script>
-</body>
+  </body>
 </html>