AI
产品服务
解决方案
文档与支持
定价
更新时间: 2026/03/12 14:37
FillLayer图层
简介

JSAPI GL提供FillLayer类支持加载GeoJSON面数据源,方便用户进行海量面数据的个性化展示。FillLayer在支持标准面颜色填充、描边基础上,拓展支持图片纹理填充。 FillLayer继承FeatureLayer类,FeatureLayer类继承NormalLayer类,FeatureLayer作为内部类不支持用户实例化,NormalLayer支持用户创建自定义图层。图层可设置基本配置信息、数据源、定义事件等。通过FillLayer类的options,设置图层是否描边、通过表达式形式设置面样式。

DEMO详情
标准面
纹理填充面
类参考

详见类参考

图层示例
1. 定义图层类
let fillLayer = new BMapGL.FillLayer({
crs: 'GCJ02', // 数据源坐标类型
enablePicked: true,
autoSelect: true,
pickWidth: 30,
pickHeight: 30,
selectedColor: 'green', // 悬浮选中项颜色
border: true,
opacity: 1.0,
style: {
// 样式配置
fillColor: [
'case',
['boolean', ['feature-state', 'picked'], false],
'#6704ff',
[
'match',
['get', 'name'],
'海淀区',
'#ce4848',
'朝阳区',
'blue',
'通州区',
'blue',
'丰台区',
'red',
'房山区',
'red',
'#6704ff',
],
],
fillOpacity: 0.3,
strokeWeight: 1,
strokeColor: 'blue',
},
});
2. 添加图层事件(可选)
fillLayer.addEventListener('click', function (e) {
if (e.value.dataIndex !== -1 && e.value.dataItem) {
this.updateState(e.value.dataIndex, { picked: true }, true);
}
});
fillLayer.addEventListener('mousemove', function (e) {
if (e.value.dataIndex !== -1 && e.value.dataItem) {
console.log(e.value.dataItem);
}
});
3. 设置GeoJSON数据源
fillLayer.setData(fillGeoJSONData);
4. 添加或移除图层
map.addNormalLayer(fillLayer);
map.removeNormalLayer(fillLayer);

上一篇

线图层

下一篇

自定义HTML图层

本篇文章对您是否有帮助?