DistrictLayer

行政区图层类，用于在地图上展示行政区划数据。 通过 map.addLayer() / map.removeLayer() 方法管理。

构造函数

  • 创建行政区图层

    参数类型说明
    options 可选DistrictLayerOptions配置选项，name 为行政区名称
    属性类型说明
    adcodestring行政区id编码，多个用逗号分隔表示合并为一个大区。优先级高于 name
    autoViewportboolean是否自动调整视野以适应行政区边界范围
    fillColorstring填充颜色
    fillOpacitynumber填充透明度，取值范围0 - 1
    kindnumber行政区划展示层级。0为当前层级（如传入省名则展示省轮廓），1为下钻一个层级（展示省内各市边界），2为下钻两个层级（展示各区县边界）
    namestring行政区名称，多个名称用逗号分隔表示合并为一个大区，如 '北京,天津,河北' 会将这些行政区边界合并展示。 需要注意：多区合并仅在kind=0时有效，下钻模式只能传入一个名称，下不支持多区合并。
    strokeColorstring边框颜色
    strokeOpacitynumber边框透明度，取值范围0 - 1
    strokeWeightnumber边框宽度，单位像素

    返回值 DistrictLayer

    示例代码1：基础用法 - 展示单个行政区

    const districtLayer = new BMap.DistrictLayer({
      name: '北京',
      strokeColor: '#0055ff',
      fillColor: '#0055ff',
      fillOpacity: 0.3,
    });
    map.addLayer(districtLayer);

    示例代码2：多行政区合并为大区

    const districtLayer = new BMap.DistrictLayer({
      name: '北京,天津,河北',
      strokeColor: '#daeafa',
      fillColor: '#5e8bff',
      fillOpacity: 0.8,
    });
    map.addLayer(districtLayer);

    示例代码3：下钻展示 - kind:1 展示省内各市边界

    const districtLayer = new BMap.DistrictLayer({
      name: '山东省',
      kind: 1,
      strokeColor: '#daeafa',
      fillColor: '#618bf8',
      fillOpacity: 0.6,
      autoViewport: true,
    });
    map.addLayer(districtLayer);

    示例代码4：自动适配视野 + 鼠标交互高亮

    const districtLayer = new BMap.DistrictLayer({
      name: '广东省',
      kind: 2,
      strokeColor: '#fff',
      strokeWeight: 2,
      fillColor: '#5e8bff',
      fillOpacity: 0.5,
      autoViewport: true,
    });
    map.addLayer(districtLayer);
    districtLayer.addEventListener('mouseover', (e) => {
      e.currentTarget.setFillColor('#9169db');
    });
    districtLayer.addEventListener('mouseout', (e) => {
      e.currentTarget.setFillColor('#5e8bff');
    });

    示例代码5：使用adcode指定行政区（优先级高于name）

    const districtLayer = new BMap.DistrictLayer({
      adcode: '110000,120000',
      fillColor: '#5e8bff',
      fillOpacity: 0.6,
    });
    map.addLayer(districtLayer);

方法

  • 添加事件监听

    参数类型说明
    eventstring事件类型
    handlerFunction回调函数

    返回值 void

    示例代码1

    districtLayer.addEventListener('click', (e) => {
      console.log('行政区点击', e);
    });

  • 隐藏图层

    返回值 void

    示例代码1

    districtLayer.hide();

  • 返回图层是否可见

    返回值 boolean

  • 移除事件监听

    参数类型说明
    eventstring事件类型
    handlerFunction回调函数

    返回值 void

    示例代码1

    const handler = (e: any) => { console.log(e); };
    districtLayer.addEventListener('click', handler);
    districtLayer.removeEventListener('click', handler);

  • 设置图层层级

    参数类型说明
    zIndexnumber层级值

    返回值 void

    示例代码1

    districtLayer.setZIndex(5);

  • 显示图层

    返回值 void

    示例代码1

    districtLayer.show();