vue项目，百度地图api高亮选取区域，高亮某个地区，行政区域等

Z时代
2024-01-10
分类：综合

vue

效果如下：

 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