1. 程式人生 > 其它 >vue專案,百度地圖api高亮選取區域,高亮某個地區,行政區域,框選區域等

vue專案,百度地圖api高亮選取區域,高亮某個地區,行政區域,框選區域等

效果如下:

 1     var blist = []
 2     var districtLoading = 0
 3 
 4 
 5     var map = new window.BMap.Map("container",{ minZoom:5,maxZoom:20 });// 建立地圖例項
 6     var point = new window.BMap.Point(89.48,31.57);
 7     map.centerAndZoom(point,7.4);//設定中心點座標和地圖級別
 8     map.enableScrollWheelZoom(); // 允許滾輪縮放
 9     this.zoom = map.getZoom();
10     this.map = map;
11     this.getBoundary();
12 
13 
14 
15 
16 
17     /*
18     =====獲取行政區域邊界=====
19     */
20     getBoundary() {   
21        this.addDistrict("西藏");
22     },
23     /*
24     =====新增行政區域=====
25     */
26     addDistrict(districtName) {
27       let that = this;
28       //使用計數器來控制載入過程
29       districtLoading++;
30       var bdary = new BMap.Boundary();
31       bdary.get(districtName, function (rs) {       //獲取行政區域
32           var count = rs.boundaries.length; //行政區域的點有多少個
33           for (var i = 0; i < count; i++) {
34             blist.push({ points: rs.boundaries[i], name: districtName });
35           };
36           //載入完成區域點後計數器-1
37           districtLoading--;
38           if (districtLoading == 0) {
39             //全載入完成後畫端點
40             that.drawBoundary();
41           }
42       });
43     },
44     /*
45     =====點選行政區域事件=====
46     */
47     click(evt) {
48       alert(evt.target.name);
49     },
50     /*
51     =====繪製邊界=====
52     */
53     drawBoundary() {
54       let that = this;
55       //包含所有區域的點陣列
56       var pointArray = [];
57       //迴圈新增各閉合區域
58       for (var i = 0; i < blist.length; i++) {
59         //新增多邊形層並顯示
60         var ply = new BMap.Polygon(blist[i].points, { 
61           strokeWeight: 2,   //邊框寬度
62           trokeColor: "#FFA96E",   //邊框顏色
63           fillColor: " #DDE4F070" //填充顏色
64         }); //建立多邊形覆蓋物
65         ply.name = blist[i].name;
66         // ply.addEventListener("click", that.click);
67         this.map.addOverlay(ply);
68 
69         //將點增加到視野範圍內
70         var path = ply.getPath();
71         pointArray = pointArray.concat(path);
72       }
73 
74       //限定顯示區域(只顯示特定區域,滑鼠拖動鬆開後自動回到顯示範圍內),需要引用api庫
75       // var boundply = new BMap.Polygon(pointArray);
76       // BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());
77       this.map.setViewport(pointArray);    //調整視野 
78     },
79