FillLayer
构造函数
创建面填充图层实例
参数 类型 说明 options可选FillLayerOptions配置项 属性 类型 说明 autoSelectboolean是否允许鼠标悬浮事件 borderboolean是否显示描边 crsstring来源坐标系，可选BD09LL、BD09MC、GCJ02 enablePickedboolean是否允许鼠标点击事件 idKeystring数据项属性key maxZoomnumber最大显示缩放等级 minZoomnumber最小显示缩放等级 opacitynumber透明度，取值范围0 - 1 pickHeightnumber点击拾取矩形高，单位像素 pickWidthnumber点击拾取矩形宽，单位像素 popEventboolean事件是否冒泡 selectedColorstring选中数据颜色 selectedIndexnumber选中数据索引 styleFillLayerStyle面图层显示样式配置对象 visibleboolean是否显示 zIndexnumber显示层级 返回值 FillLayer
示例代码1
// 简单用法：纯色填充
const fillLayer = new BMap.FillLayer({
style: { fillColor: 'rgba(0, 100, 255, 0.4)', fillOpacity: 0.6 },
});
map.addLayer(fillLayer);
fillLayer.setData({
type: 'FeatureCollection',
features: [
{ type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[116.30, 39.91], [116.34, 39.91], [116.34, 39.94], [116.30, 39.94], [116.30, 39.91]]] }, properties: { id: 1 } },
],
});示例代码2
// 带描边的面填充
const fillLayer = new BMap.FillLayer({
border: true,
style: { fillColor: 'rgba(255, 200, 0, 0.5)', fillOpacity: 0.8, strokeColor: '#ff6600', strokeWeight: 3, strokeStyle: 'dashed' },
});
map.addLayer(fillLayer);
fillLayer.setData({
type: 'FeatureCollection',
features: [
{ type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[116.36, 39.91], [116.40, 39.91], [116.40, 39.94], [116.36, 39.94], [116.36, 39.91]]] }, properties: { id: 1 } },
],
});示例代码3
// 纹理填充（默认掩膜模式）：纹理图案区域显示fillColor，透明区域不显示
const fillLayer = new BMap.FillLayer({
enablePicked: true,
autoSelect: true,
pickWidth: 30,
pickHeight: 30,
border: true,
style: {
pattern: true,
patternUrl: 'https://jsapi-demo.bj.bcebos.com/images/patterns/fill_pattern.png',
patternMapping: '128, 128, 128, 128',
patternScale: 0.5,
patternOffset: '0, 0',
fillColor: 'orange',
fillOpacity: 1,
strokeWeight: 1,
strokeColor: 'blue',
},
});
map.addLayer(fillLayer);
fillLayer.setData({
type: 'FeatureCollection',
features: [
{ type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[116.42, 39.91], [116.46, 39.91], [116.46, 39.94], [116.42, 39.94], [116.42, 39.91]]] }, properties: { name: 'area1' } },
],
});示例代码4
// 纹理贴图模式（patternMask=false）：直接显示纹理图片原始颜色
const fillLayer = new BMap.FillLayer({
border: true,
style: {
pattern: true,
patternMask: false,
patternUrl: 'https://jsapi-demo.bj.bcebos.com/images/patterns/fill_pattern.png',
patternMapping: '128, 128, 128, 128',
patternScale: 0.5,
patternOffset: '0, 0',
fillColor: 'orange',
fillOpacity: 1,
strokeWeight: 1,
strokeColor: 'blue',
},
});
map.addLayer(fillLayer);
fillLayer.setData({
type: 'FeatureCollection',
features: [
{ type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[116.48, 39.91], [116.52, 39.91], [116.52, 39.94], [116.48, 39.94], [116.48, 39.91]]] }, properties: { id: 1 } },
],
});
方法
添加不显示数据索引
参数 类型 说明 indexnumber数据索引 返回值 void
示例代码1
fillLayer.addDelIndex(3);
清空不显示数据索引
返回值 void
清空对象状态
返回值 void
触发图层重绘
返回值 void
获取所有要素状态
返回值 object
获取图层基础配置项
返回值 FillLayerOptions
获取数据源
返回值 object
返回图层最大显示等级
返回值 number
返回图层最小显示等级
返回值 number
返回图层透明度
返回值 number
根据数据索引获取数据项
参数 类型 说明 indexnumber数据索引 modelstring取值 'onmousemove'或'onclick'返回值 { dataIndex: number; dataItem: object }
示例代码1
const item = fillLayer.getPickedItem(0, 'onclick');
获取图层样式配置项
返回值 FillLayerStyle
返回图层显示/隐藏状态
返回值 boolean
返回图层层级
返回值 number
移除不显示数据索引
参数 类型 说明 indexnumber数据索引 返回值 void
示例代码1
fillLayer.removeDelIndex(3);
根据id移除对象状态
参数 类型 说明 keysstring数据id或id数组 返回值 void
示例代码1
fillLayer.removeState([1, 2]);
全量替换所有要素状态
参数 类型 说明 inputsobjectid到状态对象的映射 返回值 void
示例代码1
fillLayer.replaceAllState({ 1: { picked: true }, 2: { picked: false } });
运行时修改图层基础配置项（如坐标系、拾取设置等），合并到现有配置。不会自动触发重绘，如需生效可调用doOnceDraw()
参数 类型 说明 optionsFillLayerOptions要合并的配置项 属性 类型 说明 autoSelectboolean是否允许鼠标悬浮事件 borderboolean是否显示描边 crsstring来源坐标系，可选BD09LL、BD09MC、GCJ02 enablePickedboolean是否允许鼠标点击事件 idKeystring数据项属性key maxZoomnumber最大显示缩放等级 minZoomnumber最小显示缩放等级 opacitynumber透明度，取值范围0 - 1 pickHeightnumber点击拾取矩形高，单位像素 pickWidthnumber点击拾取矩形宽，单位像素 popEventboolean事件是否冒泡 selectedColorstring选中数据颜色 selectedIndexnumber选中数据索引 styleFillLayerStyle面图层显示样式配置对象 visibleboolean是否显示 zIndexnumber显示层级 返回值 void
示例代码1
fillLayer.setBaseOptions({ crs: 'GCJ02', enablePicked: true, selectedColor: 'rgba(255,0,0,1)' });
fillLayer.doOnceDraw();
设置数据源为GeoJSON数据对象
参数 类型 说明 dataobjectGeoJSON数据 返回值 void
示例代码1
fillLayer.setData({
type: 'FeatureCollection',
features: [
{ type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[116.38, 39.91], [116.42, 39.91], [116.42, 39.94], [116.38, 39.94], [116.38, 39.91]]] }, properties: { id: 1 } },
],
});
向下移动一层
返回值 void
设置图层最大显示等级
参数 类型 说明 zoomnumber最大缩放等级 返回值 void
示例代码1
fillLayer.setMaxZoom(18);
设置图层最小显示等级
参数 类型 说明 zoomnumber最小缩放等级 返回值 void
示例代码1
fillLayer.setMinZoom(5);
设置图层透明度
参数 类型 说明 opacitynumber透明度，取值范围0 - 1 返回值 void
示例代码1
fillLayer.setOpacity(0.5);
运行时修改图层样式配置项，合并到现有样式。修改后需调用doOnceDraw()触发重绘才能看到效果
参数 类型 说明 optionsFillLayerStyle要合并的样式配置项 返回值 void
示例代码1
fillLayer.setStyleOptions({ fillColor: '#ff0000', fillOpacity: 0.5 });
fillLayer.doOnceDraw();
向上移动一层
返回值 void
设置图层显示/隐藏
参数 类型 说明 visibleboolean是否显示 返回值 void
示例代码1
fillLayer.setVisible(false);
设置图层叠加顺序
参数 类型 说明 zIndexnumber层级值 返回值 void
示例代码1
fillLayer.setZIndex(10);
将当前图层设置为最上层
返回值 void
- #updateState(
keys: string | number | (string | number)[],
params: object,
ifAppend?: boolean,
): void根据id设置要素状态，状态会参与样式表达式的求值（如feature-state条件判断）。状态变更会触发数据重新解析和重绘
参数 类型 说明 keysstring数据id或id数组（对应idKey字段的值） paramsobject状态对象，可包含任意键值对，在样式表达式中通过feature-state访问 ifAppend可选boolean是否追加合并。true=将params合并到已有状态；false=用params替换该要素的整个状态对象 返回值 void
示例代码1
fillLayer.updateState([1, 2], { picked: true }, true);
面填充图层，支持纯色填充、描边、纹理（掩膜或贴图）填充