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,47 +560,96 @@ var map = {
         })
     },
     getMap: function (data) {
-        var map = new AMap.Map("map", {
-            expandZoomRange: true,
-            zoom: 7,
-            zooms: [5, 20],
-            mapStyle: 'amap://styles/d3ce37d9fe39b7cc5f08f48af52802a2',
-            resizeEnable: true,
-            viewMode: '3D',
-            showLabel: true
-        });
-        var infoWindow = new AMap.InfoWindow({
-            offset: new AMap.Pixel(0, -30)
-        });
-        if (data && data.length > 0) {
-            for (var i = 0; i < data.length; i++) {
-                let item = data[i];
-                var img = '../static/images/gczljc/icn_shiyi.png';
-                var marker = new AMap.Marker({
-                    position: [item.mapx, item.mapy],
-                    icon: new AMap.Icon({
-                        size: new AMap.Size(28, 28),
-                        image: img
-                    }),
-                    map: map
+        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],
+                mapStyle: 'amap://styles/d3ce37d9fe39b7cc5f08f48af52802a2',
+                resizeEnable: true,
+                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);//视口自适应
                 });
-                marker.content = `<p class="info-item">${item.project_name}</p>`;
-                marker.on('mouseover', infoOpen);
-                marker.on('click', newMAp);
             }
-            map.setZoomAndCenter(7, [Number(data[0].mapx), Number(data[0].mapy)]);
-        }
-        function newMAp(e) {
+            drawBounds();
             var infoWindow = new AMap.InfoWindow({
                 offset: new AMap.Pixel(0, -30)
             });
-            infoWindow.setContent(e.target.content);
-            infoWindow.open(map, e.target.getPosition());
-        }
-        function infoOpen(e) {
-            infoWindow.setContent(e.target.content);
-            infoWindow.open(map, e.target.getPosition());
-        }
-        map.setMapStyle('amap://styles/d3ce37d9fe39b7cc5f08f48af52802a2');
+            if (data && data.length > 0) {
+                for (var i = 0; i < data.length; i++) {
+                    let item = data[i];
+                    var img = '../static/images/gczljc/icn_shiyi.png';
+                    var marker = new AMap.Marker({
+                        position: [item.mapx, item.mapy],
+                        icon: new AMap.Icon({
+                            size: new AMap.Size(28, 28),
+                            image: img
+                        }),
+                        map: map
+                    });
+                    marker.content = `<p class="info-item">${item.project_name}</p>`;
+                    marker.on('mouseover', infoOpen);
+                    marker.on('click', newMAp);
+                }
+                map.setZoomAndCenter(7, [Number(data[0].mapx), Number(data[0].mapy)]);
+            }
+            function newMAp(e) {
+                var infoWindow = new AMap.InfoWindow({
+                    offset: new AMap.Pixel(0, -30)
+                });
+                infoWindow.setContent(e.target.content);
+                infoWindow.open(map, e.target.getPosition());
+            }
+            function infoOpen(e) {
+                infoWindow.setContent(e.target.content);
+                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',
 }