我们可以通过 BMap.FillLayer 在地图上添加面图层，批量展示面数据，常用于行政区划、区域热力等场景。面图层在颜色填充、描边的基础上，还支持纹理填充和高度拉伸。

面图层可以设置填充颜色、透明度和描边等属性。描边默认开启，通过style 中的 strokeColor、strokeWeight设置描边样式；

var fillLayer = new BMap.FillLayer({
    style: {
        fillColor: '#2a6cf6',
        fillOpacity: 0.3,
        strokeColor: '#ffffff',
        strokeWeight: 1,
    },
});
map.addLayer(fillLayer);
fillLayer.setData(geojson); // 设置面图层的数据

面的内部除了纯色填充，还支持使用图片纹理平铺填充，通过 patternMapping 指定所用图案在雪碧图中的位置和尺寸：

var fillLayer = new BMap.FillLayer({
    style: {
        pattern: true, // 开启纹理填充
        patternUrl: 'images/pattern-sprite.png', // 设置纹理雪碧图地址
        patternMapping: '0, 0, 32, 32', // 设置图案在雪碧图中的位置和大小，格式为'x, y, 宽, 高'
        patternScale: 1, // 设置纹理的缩放比例
        patternOffset: '0, 0',
    },
});

与线图层、点图层相同，面图层的样式属性也支持表达式，渲染时会读取每个面的 properties属性数据并实时求值。
如下示例，通过 match 表达式对特定区域高亮显示：

var fillLayer = new BMap.FillLayer({
    style: {
        fillColor: [
            'match', ['get', 'name'],
            '海淀区', 'red',
            '朝阳区', 'blue',
            '通州区', 'green',
            '丰台区', 'pink',
            '房山区', 'orange',
            '#aecde8' // 当name字段没有匹配到时，默认使用的颜色
        ],
        fillOpacity: 0.6,
        strokeColor: '#fff',
        strokeWeight: 1.5
    }
});

注意，pattern、patternUrl 等纹理相关属性仅支持固定值，不支持表达式。

支持监听面图层的事件，监听事件前，需要在创建图层时开启拾取能力。开启 autoSelect 后，鼠标悬浮的面会自动以 selectedColor高亮显示：

var fillLayer = new BMap.FillLayer({
    enablePicked: true, // 开启拾取
    autoSelect: true, // 开启悬浮自动高亮
    selectedColor: '#ff7a45', // 设置选中面的高亮颜色
    style: {
        fillColor: '#2a6cf6',
        fillOpacity: 0.3
    },
});

fillLayer.addEventListener('click', function (e) {
    if (e.value && e.value.dataIndex !== -1) {
        var properties = e.value.dataItem.properties; // 获取被点击面的属性数据
        alert('您点击了：' + properties.name);
    }
});

BMap.FillLayer