vue專案,百度地圖api高亮選取區域,高亮某個地區,行政區域,框選區域等
阿新 • • 發佈:2022-03-07
效果如下:
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