OpenLayers6（2）：Vue中使用ol-ext插件中的LayerSwitcher图层控制控件

1.版本

• OpenLayers：6.4.3

• ol-ext：3.2.22（条件："ol": ">= 5.3.0"）

---

2.配置ol-ext

// 1、安装ol-ext
npm i ol-ext

// 2、在main.js中引入样式
import 'ol-ext/dist/ol-ext.min.css';

---

3.使用LayerSwitcher控件

3.1 先看LayerSwitcher构造函数的参数

LayerSwitcher控件的构造函数参数

selection	enable layer selection when click on the title
displayInLayerSwitcher	function that takes a layer and return a boolean if the layer is displayed in the switcher, default test the displayInLayerSwitcher layer attribute
show_progress	show a progress bar on tile layers, default false
mouseover	show the panel on mouseover, default false
reordering	allow layer reordering, default true
trash	add a trash button to delete the layer, default false
oninfo	callback on click on info button, if none no info button is shown DEPRECATED: use on(info) instead
extent	add an extent button to zoom to the extent of the layer
onextent	callback when click on extent, default fits view to extent
drawDelay	delay in ms to redraw the layer (usefull to prevent flickering when manipulating the layers)
collapsed	collapse the layerswitcher at beginning, default true
layerGroup	a layer group to display in the switcher, default display all layers of the map
noScroll	prevent handle scrolling, default false
onchangeCheck	optional callback on click on checkbox, you can call this method for doing operations after check/uncheck a layer
allwaysOnTop	true to force layer stay on top of the others while reordering, default false
noSwitcherDelete	to prevent layer deletion (w. trash option = true), default false

3.2 图层属性配置

添加图层时需进行相应的属性配置（以下内容摘抄自ol-ext官方案例）：

• The title or name layer's property is used to named the ol.layer in the switcher.
• It shows use of the displayInLayerSwitcher layer's property to cause it to not display in the LayerSwitcher
• The baseLayer layer's property manage exclusive visibility on layers (only one base layer is shown at a time).
• The allwaysOnTop layer's property make a layer to stay on top of others.
• Layers in an ol.layer.Group are grouped together and can be managed all together (visibility/opacity/ordering).
• The openInLayerSwitcher property of an ol.layer.Group is used to code the visibility of the sublayers.
• The show_progress option display a progress bar on tiled layers (only once per map).
• You can use the setHeader() function to add a header to the layer list.
• You can use the drawlist event handle the current line display (add button, change list style, etc.)
• It trigger a toogle event when shown/hidden

// ol-ext LayerSwitcher Options
export function olextLayerOptions(title, noSwitcherDelete, allwaysOnTop, displayInLayerSwitcher, baseLayer, openInLayerSwitcher) {
    return {
        title: title || "图层",
        noSwitcherDelete: noSwitcherDelete || true, // true表示不能通过控件删除
        allwaysOnTop: allwaysOnTop || false,
        displayInLayerSwitcher: displayInLayerSwitcher || true,
        baseLayer: baseLayer || false,
        openInLayerSwitcher: openInLayerSwitcher || true,
    }
}

const layer = new VectorLayer({
    ...olextLayerOptions(...........), 
    source: source,
    style: style,
});
this.Map.addLayer(layer);

3.3 使用LayerSwitcher控件

import OlExtLayerSwitcher from 'ol-ext/control/LayerSwitcher'

const ctrl = new OlExtLayerSwitcher({
                collapsed: true,
                trash: true,
            });
this.Map.addControl(ctrl);

---

4.效果