jspopularGL

LineLayer图层

更新时间：2023年02月21日

简介

JSAPI GL提供LineLayer类支持加载GeoJSON线数据源，方便用户进行海量线数据的个性化展示。LineLayer在支持传统实线、虚线的基础上，线图层支持描边线、贴图纹理填充线、间隔图标填充等效果。
LineLayer继承FeatureLayer类，FeatureLayer类继承NormalLayer类，FeatureLayer作为内部类不支持用户实例化，NormalLayer支持用户创建自定义图层。图层可设置基本配置信息、数据源、定义事件等。通过LineLayer类的options，可以通过表达式形式设置图层线样式。

类参考

图层示例

1定义图层类

let lineLayer = new BMapGL.LineLayer({
enablePicked: true,
autoSelect: true,
pickWidth: 30,
pickHeight: 30,
selectedColor: 'yellow', // 选中项颜色
style: { // 配置样式
        // borderMask: false,
        borderColor: 'rgba(27, 142, 236, .6)',
        borderWeight: 2,
        strokeWeight: 3,
        strokeStyle: 'dashed',
        strokeColor: ['case', ['boolean', ['feature-state', 'picked'], false], '#6704ff', ['match', ['get', 'name'], 'demo1', '#ce4848', 'demo2', '#6704ff', 'demo3', 'blue', '#6704ff']],
    }
});

2添加图层事件（可选）

lineLayer.addEventListener('click', function (e) {
if (e.value.dataIndex !== -1 && e.value.dataItem) {
    this.updateState(e.value.dataIndex, { picked: true })
}
})

3设置GeoJSON数据源

lineLayer.setData(lineGeoJSONData);

4添加或移除图层

map.addNormalLayer(lineLayer);
map.removeNormalLayer(lineLayer);

文档全面上新