具有操作的 LayerList 微件
此示例演示如何将具有自定义操作的 LayerList 微件添加到应用程序中。这些操作是通过 listItemCreatedFunction 属性引用的函数创建的。此函数采用引用 ListItem 的事件对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
const layerList = new LayerList({
view: view,
// executes for each ListItem in the LayerList
listItemCreatedFunction: defineActions
});
function defineActions(event) {
// The event object contains an item property.
// is is a ListItem referencing the associated layer
// and other properties. You can control the visibility of the
// item, its title, and actions using this object.
const item = event.item;
if (item.title === "US Demographics") {
// An array of objects defining actions to place in the LayerList.
// By making this array two-dimensional, you can separate similar
// actions into separate groups with a breaking line.
item.actionsSections = [
[
{
title: "Go to full extent",
className: "esri-icon-zoom-out-fixed",
id: "full-extent"
},
{
title: "Layer information",
className: "esri-icon-description",
id: "information"
}
],
[
{
title: "Increase opacity",
className: "esri-icon-up",
id: "increase-opacity"
},
{
title: "Decrease opacity",
className: "esri-icon-down",
id: "decrease-opacity"
}
]
];
}
}
使用触发器操作事件可以定义函数返回的每个操作的行为。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
layerList.on("trigger-action", (event) => {
// The layer visible in the view at the time of the trigger.
const visibleLayer = USALayer.visible ? USALayer : censusLayer;
// Capture the action id.
const id = event.action.id;
if (id === "full-extent") {
// If the full-extent action is triggered then navigate
// to the full extent of the visible layer.
view.goTo(visibleLayer.fullExtent);
} else if (id === "information") {
// If the information action is triggered, then
// open the item details page of the service layer.
window.open(visibleLayer.url);
} else if (id === "increase-opacity") {
// If the increase-opacity action is triggered, then
// increase the opacity of the GroupLayer by 0.25.
if (demographicGroupLayer.opacity < 1) {
demographicGroupLayer.opacity += 0.25;
}
} else if (id === "decrease-opacity") {
// If the decrease-opacity action is triggered, then
// decrease the opacity of the GroupLayer by 0.25.
if (demographicGroupLayer.opacity > 0) {
demographicGroupLayer.opacity -= 0.25;
}
}
});
您还可以在 ListItem 的面板中指定自定义内容。这可以是任何文本、HTML 节点或微件。例如,此应用程序将滑块添加到最顶层的两个子组图层的面板中。每个滑块都会更新相应图层的不透明度。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
layerList.listItemCreatedFunction = function (event) {
const item = event.item;
// Adds a slider for updating a group layer's opacity
if(item.children.length > 1 && item.parent){
const slider = new Slider({
min: 0,
max: 1,
precision: 2,
values: [ 1 ],
visibleElements: {
labels: true,
rangeLabels: true
}
});
item.panel = {
content: slider,
className: "esri-icon-sliders-horizontal",
title: "Change layer opacity"
};
slider.on("thumb-drag", (event) => {
const { value } = event;
item.layer.opacity = value;
});
}
}