1.版本
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构造函数的参数
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);