11

static/js/gczljc.js

@@ -53,6 +53,7 @@ new Vue({
         }
     },
     created(){
+        let _this = this;
         this.getToken();
     },
     methods:{
@@ -103,6 +104,8 @@ new Vue({
                 success: function (data) {
                     _this.info = data.data;
                     station_id = data.data.station_id;
+                    province = data.data.province;
+                    city = data.data.city;
                     setTimeout(() => {
                         map.getData();
                     }, 2000);
@@ -557,7 +560,20 @@ var map = {
         })
     },
     getMap: function (data) {
+        var options = {
+            subdistrict: 0,
+            extensions: 'all',
+            level: 'province'
+        };
+        var district = new AMap.DistrictSearch(options);
+        district.search(province, function (status, result) {
+            var bounds = result.districtList[0]['boundaries'];
+            var mask = [];
+            for (var i = 0; i < bounds.length; i++) {
+                mask.push([bounds[i]]);
+            }
             var map = new AMap.Map("map", {
+                mask: mask,
                 expandZoomRange: true,
                 zoom: 7,
                 zooms: [5, 20],
@@ -566,6 +582,41 @@ var map = {
                 viewMode: '3D',
                 showLabel: true
             });
+            var district = null;
+            var polygons = [];
+            function drawBounds() {
+                if (!district) {
+                    var opts = {
+                        subdistrict: 0,
+                        extensions: 'all',
+                        level: 'district'
+                    };
+                    district = new AMap.DistrictSearch(opts);
+                }
+                //行政区查询
+                district.setLevel('district')
+                district.search(city, function(status, result) {
+                // district.search('杭州市', function (status, result) {
+                    map.remove(polygons)//清除上次结果
+                    polygons = [];
+                    var bounds = result.districtList[0].boundaries;
+                    if (bounds) {
+                        for (var i = 0, l = bounds.length; i < l; i++) {
+                            var polygon = new AMap.Polygon({
+                                strokeWeight: 1,
+                                path: bounds[i],
+                                fillOpacity: 0.4,
+                                fillColor: '#80d8ff',
+                                strokeColor: '#0091ea'
+                            });
+                            polygons.push(polygon);
+                        }
+                    }
+                    map.add(polygons)
+                    map.setFitView(polygons);//视口自适应
+                });
+            }
+            drawBounds();
             var infoWindow = new AMap.InfoWindow({
                 offset: new AMap.Pixel(0, -30)
             });
@@ -599,5 +650,6 @@ var map = {
                 infoWindow.open(map, e.target.getPosition());
             }
             map.setMapStyle('amap://styles/d3ce37d9fe39b7cc5f08f48af52802a2');
+        })
     },
 }
\ No newline at end of file

static/js/util.js

@@ -3,6 +3,8 @@ const api_key = 16859729295369;
 const api_secret = "C7DEA02B195942EAA973A6FBF4151741";
 var station_id = '';
 var access_token = '';
+var province = '';
+var city = '';
 window._AMapSecurityConfig = {
     securityJsCode: '0711374220aba81dbf7515aaac08e50b',
 }