FillLayer图层

更新时间：2023年02月21日

简介

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: .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);