百度地图api只显示某个省市的行政区域

 有些时候我们只需要某个省份的行政区域,那么运用百度地图如何实现呢?
 我们先上效果图:
百度地图api只显示某个省市的行政区域_第1张图片
步骤:

  1. 创建map实例
var map;
createMap() {
   map = new BMap.Map('main');
   map.centerAndZoom(new BMap.Point(106.714476, 26.60403), 8);
   // 将地图在水平位置上移动x像素,垂直位置上移动y像素(x,y)
   map.panBy(-210, 330);
   getBoundary();
 }
  1. 绘制行政区域外覆盖物
getBoundary() {
   map.clearOverlays(); // 清除地图的其余覆盖物
   const bdary = new BMap.Boundary();
   bdary.get('贵州省', (rs) => {
     const count = rs.boundaries.length;
     if (count === 0) {
       return ;
     }
     const EN_JW = '180, 90;';
     const NW_JW = '-180,  90;';
     const WS_JW = '-180, -90;';
     const SE_JW = '180, -90;';
     // 东南西北四个角添加一个覆盖物
     const ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW,
     { strokeColor: 'none', fillColor: 'transparent', fillOpacity: 1, strokeOpacity: 1 });
     map.addOverlay(ply1);
     // 绘制‘贵州省’整体的外轮廓
     for (let i = 0; i < count; i++) {
       const ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 0.5, strokeColor: 'transparent', fillColor: 'transparent'});
       map.addOverlay(ply);
     }
     getRegion();
   });
 }
  1. 绘制省内各个市州的区划
    1)获取到省内各个市州的名称以及他们的中心点坐标写成一个变量
var dataArr = [
{
     "name":  '安顺市',
     "cp": [105.9082, 25.9882]
},
{
     "name": "贵阳市",
     "cp": [106.6992, 26.7682]
}];

  2)绘制各个市州的轮廓

getRegion() {
      dataArr.forEach(element => {
        var bdary = new BMap.Boundary();
        bdary.get(element['name'], rs => {
          var count = rs.boundaries.length;
          for (let i = 0; i < count; i++) {
            var ply = new BMap.Polygon(rs.boundaries[i], {
              strokeWeight: 0.5, strokeColor: '#fff', fillOpacity: 0.6, fillColor: '#a9dbf7'});
            this.map.addOverlay(ply);
          }
          citySetLabel(new BMap.Point(element['cp'][0], element['cp'][1]) , element['name']);
        });
      });
  }
  1. 城市中心点坐标显示label
citySetLabel(cityCenter, cityName) {
    var label = new BMap.Label(cityName, {
      offset: new BMap.Size(-20, -10),
      position: cityCenter
    });
    label.setStyle({
      border: 'none',
      background: 'transparent',
      'font-size': '0.25rem',
      color: '#fff',
    });
    map.addOverlay(label);
  }

你可能感兴趣的:(百度地图API)