Polygon

此类表示一个多边形覆盖物。

构造函数

  • 创建多边形覆盖物对象

    参数类型说明
    pointsPoint[] | Point[][]多边形的坐标点数组
    opts 可选PolygonOptions可选参数
    属性类型说明
    coordType"BMAP_COORD_BD09" | "BMAP_COORD_GCJ02" | "BMAP_COORD_WGS84"输入坐标的坐标类型。未设置时使用全局 BMap.coordType。
    dashArraynumber[]虚线样式配置，如 [8, 4] 表示实线部分长8像素、间隙部分长4像素。
    enableClickingboolean是否响应点击事件
    enableEditingboolean是否启用编辑功能
    enableMassClearboolean是否在调用 map.clearOverlays() 时清除此覆盖物
    fillColorstring填充颜色，格式为 '#xxxxxx'，传入空字符串时无填充效果，默认跟随主题色（CSS 变量 --bmap-color-primary-bg，缺省为 '#eaf1ff'）
    fillOpacitynumber填充透明度，取值范围0 - 1，默认值为 0.6
    linkRightboolean跨180度经线时是否按最短路径绘制
    strokeColorstring边线颜色，格式为 '#xxxxxx'，默认跟随主题色（CSS 变量 --bmap-color-primary，缺省为 '#1677ff'）
    strokeLineCap"round" | "butt" | "square"描边线端头类型
    strokeLineJoin"round" | "miter" | "bevel"描边线连接处类型
    strokeOpacitynumber边线透明度，取值范围0 - 1，默认值为 1
    strokeStyle"solid" | "dashed" | "dotted"边线样式
    strokeWeightnumber边线宽度，以像素为单位，默认值为 2
    zIndexnumber覆盖物的初始层叠顺序，也可在实例上通过 setZIndex() 方法修改

    返回值 Polygon

    示例代码1

    const polygon = new BMap.Polygon([
      new BMap.Point(116.387112, 39.920977),
      new BMap.Point(116.385243, 39.913063),
      new BMap.Point(116.394226, 39.917988),
    ]);
    map.addOverlay(polygon);

    示例代码2：自定义样式

    const polygon = new BMap.Polygon(
      [
        new BMap.Point(116.387112, 39.920977),
        new BMap.Point(116.385243, 39.913063),
        new BMap.Point(116.394226, 39.917988),
      ],
      { strokeColor: '#0055ff', fillColor: '#0055ff', fillOpacity: 0.3 }
    );
    map.addOverlay(polygon);

方法

  • 添加事件监听函数

    参数类型说明
    eventK事件名称
    handler(e: PolygonEventMap[K]) => void事件处理函数

    返回值 void

    示例代码1

    polygon.addEventListener('click', (e) => {
      console.log('polygon clicked', e);
    });

  • 关闭编辑功能

    返回值 void

  • 禁止覆盖物在 map.clearOverlays() 方法中被清除

    返回值 void

  • 抽象生命周期方法，当地图状态发生变化时调用，对覆盖物进行绘制。

    仅在自定义覆盖物时需要实现此方法。内置覆盖物已在内部实现，用户无需调用也无需重写。

    返回值 void

  • 开启编辑功能

    返回值 void

  • 允许覆盖物在 map.clearOverlays() 方法中被清除

    返回值 void

  • 返回覆盖物的地理区域范围

    返回值 Bounds

  • 返回多边形的填充颜色

    返回值 string

  • 返回多边形填充透明度

    返回值 number

  • 返回覆盖物所在的地图实例

    返回值 Map

  • 返回多边形的坐标点数组。设置过多坐标串（带洞/多环）时返回嵌套的点数组

    返回值 Point[] | Point[][]

  • 返回多边形的边线颜色

    返回值 string

  • 返回多边形边线透明度

    返回值 number

  • 返回多边形边线样式

    返回值 "solid" | "dashed" | "dotted"

  • 返回多边形边线宽度

    返回值 number

  • 隐藏覆盖物。对于自定义覆盖物，此方法会自动将initialize方法返回的HTML元素样式的display属性设置为none

    返回值 void

  • 抽象生命周期方法，用于初始化覆盖物，当调用map.addOverlay时，API内部将调用此方法。

    仅在自定义覆盖物时需要实现此方法，并返回覆盖物对应的HTML元素。 内置覆盖物（Marker、Polyline、Polygon 等）已在内部实现，用户无需调用也无需重写。

    参数类型说明
    mapMap

    返回值 HTMLElement

    示例代码2

    class MyOverlay extends BMap.Overlay {
      initialize(map: BMap.Map) {
        const div = document.createElement('div');
        div.textContent = '自定义覆盖物';
        map.getPanes().markerPane.appendChild(div);
        return div;
      }
      draw() {}
    }

  • 判断覆盖物是否可见

    返回值 boolean

  • 移除事件监听函数

    参数类型说明
    eventK事件名称
    handler(e: PolygonEventMap[K]) => void事件处理函数

    返回值 void

    示例代码3

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

  • 设置多边形的填充颜色，传入空字符串时无填充效果

    参数类型说明
    colorstring颜色值，合法的CSS颜色值

    返回值 void

    示例代码1

    polygon.setFillColor('#0055ff');

  • 设置多边形填充透明度

    参数类型说明
    opacitynumber透明度，取值范围0 - 1

    返回值 void

    示例代码1

    polygon.setFillOpacity(0.3);

  • 设置多边形的坐标点数组

    参数类型说明
    pathPoint[] | Point[][]坐标点数组

    返回值 void

    示例代码1

    polygon.setPath([
      new BMap.Point(116.387112, 39.920977),
      new BMap.Point(116.385243, 39.913063),
      new BMap.Point(116.394226, 39.917988),
      new BMap.Point(116.401772, 39.921364),
    ]);

  • 修改指定索引处的坐标点，索引从0开始

    参数类型说明
    indexnumber坐标点索引
    pointPoint新的坐标点
    deep 可选number多坐标串（环）索引，多环多边形时指定要修改的环，省略时默认第一个环

    返回值 void

    示例代码1

    polygon.setPositionAt(1, new BMap.Point(116.390, 39.915));

  • 设置多边形的边线颜色

    参数类型说明
    colorstring颜色值，合法的CSS颜色值

    返回值 void

    示例代码1

    polygon.setStrokeColor('#ff0000');

  • 设置多边形边线透明度

    参数类型说明
    opacitynumber透明度，取值范围0 - 1

    返回值 void

    示例代码1

    polygon.setStrokeOpacity(0.6);

  • 设置多边形边线样式

    参数类型说明
    style"solid" | "dashed" | "dotted"线样式

    返回值 void

    示例代码1

    polygon.setStrokeStyle('dashed');

  • 设置多边形边线宽度

    参数类型说明
    weightnumber线宽，单位像素，须为大于等于1的整数

    返回值 void

    示例代码1

    polygon.setStrokeWeight(3);

  • 设置覆盖物的 zIndex

    参数类型说明
    zIndexnumber层叠顺序值

    返回值 void

    示例代码1

    polygon.setZIndex(10);

  • 显示覆盖物。对于自定义覆盖物，此方法会自动将initialize方法返回的HTML元素样式的display属性设置为空

    返回值 void