OpenLayers3实现图层控件功能

OpenLayers3实现图层控件功能攻略

1. 前言

在WebGIS制作过程中，图层控件是必不可少的，而OpenLayers3也提供了多种方式来实现图层控制。本攻略将介绍两种常用的图层控制方式，分别为基于控件的方法和基于样式函数的方法。

2. 基于控件的方法

2.1 使用LayerSwitcher控件

LayerSwitcher控件是OpenLayers3自带的控件，使用它可以轻松实现图层的显示和隐藏。LayerSwitcher控件可以通过以下方式添加到地图中：

// 创建一个LayerSwitcher控件
var layerSwitcher = new ol.control.LayerSwitcher();
// 添加控件到地图
map.addControl(layerSwitcher);

通过以上代码，我们就已经将LayerSwitcher控件添加到了地图中。现在，我们需要将图层添加到控件中：

// 创建两个图层
var layer1 = new ol.layer.Tile({
    source: new ol.source.OSM()
});
var layer2 = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: '/path/to/geojson',
        format: new ol.format.GeoJSON()
    }),
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'red',
            width: 2
        })
    })
});
// 为图层设置名称
layer1.set('title', 'OSM');
layer2.set('title', 'GeoJSON');
// 将两个图层添加到地图中
map.addLayer(layer1);
map.addLayer(layer2);
// 添加图层到控件中
layerSwitcher.setLayerGroup(new ol.layer.Group({
    layers: [layer1, layer2]
}));

完成以上代码后，我们已经可以在网页中看到LayerSwitcher控件了，当我们勾选或取消勾选图层的复选框时，图层就会显示或隐藏。

2.2 使用TreeLayer控件

另一个常用的图层控件是TreeLayer控件，该控件不仅可以实现图层的显示和隐藏，还可以实现图层的分组。需要提醒的是，TreeLayer控件不是OpenLayers3自带的，使用前需要下载对应的库文件。以下是TreeLayer控件的添加方法：

// 创建两个图层
var layer1 = new ol.layer.Tile({
    source: new ol.source.OSM()
});
var layer2 = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: '/path/to/geojson',
        format: new ol.format.GeoJSON()
    }),
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'red',
            width: 2
        })
    })
});
// 为图层设置名称
layer1.set('title', 'OSM');
layer2.set('title', 'GeoJSON');
// 将两个图层添加到地图中
map.addLayer(layer1);
map.addLayer(layer2);
// 创建一个TreeLayer控件
var treeLayer = new ol.control.TreeLayer({
    groupSelectStyle: 'none',
    groupCheckable: false,
    groupStyle: 'folder',
    layerGroup: new ol.layer.Group({
        layers: [layer1, layer2]
    })
});
// 添加控件到地图
map.addControl(treeLayer);

3. 基于样式函数的方法

除了控件，我们也可以通过样式函数来实现图层控制。以下是一个基于样式函数的示例代码：

// 创建Feature图层
var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: '/path/to/geojson',
        format: new ol.format.GeoJSON()
    }),
    style: function(feature, resolution) {
        var title = feature.get('title');
        if (title == 'Layer 1') {
            return new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'blue',
                    width: 2
                })
            });
        } else if (title == 'Layer 2') {
            return new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'red',
                    width: 2
                })
            });
        } else {
            return null;
        }
    }
});
// 将图层添加到地图中
map.addLayer(vector);

通过以上代码，我们创建了一个Feature图层，并通过样式函数控制了该图层中两个不同的Feature对象的样式。如果我们希望在使用样式函数时，能够顺带实现图层的控制，可以在样式函数中加入控制代码，如下所示：

// 创建Feature图层和Layer组
var layer1 = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: '/path/to/geojson/layer1',
        format: new ol.format.GeoJSON()
    }),
    title: 'Layer 1',
    visible: true,
    style: function(feature, resolution) {
        // 根据feature属性控制图层的显示与隐藏
        if (feature.get('visible') != undefined && !feature.get('visible')) {
            return null;
        }
        return new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'blue',
                width: 2
            })
        });
    }
});
var layer2 = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: '/path/to/geojson/layer2',
        format: new ol.format.GeoJSON()
    }),
    title: 'Layer 2',
    visible: false,
    style: function(feature, resolution) {
        // 根据feature属性控制图层的显示与隐藏
        if (feature.get('visible') != undefined && !feature.get('visible')) {
            return null;
        }
        return new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'red',
                width: 2
            })
        });
    }
});
// 将图层添加到地图中
map.addLayer(layer1);
map.addLayer(layer2);

通过以上代码，我们创建了两个不同的Feature图层，并在样式函数中加入控制代码，使得Feature对象的visible属性可以控制图层的显示与隐藏。

4. 结语

本攻略讲解了两种常用的图层控制方式，它们分别是基于控件的方法和基于样式函数的方法。在实际应用中，我们可以根据需要选择不同的方法来实现图层控制的功能。