问题描述
是否可以使用 ArcGIS JavaScript 4.X 在地图上只显示一个图层？
我正在寻找与 4.x 中的 (Single layer visible in LayerList widget (ArcGIS JavaScript)) 完全相同的功能，我能够让它工作一点，但它有一些问题
- 切换时需要在眼睛图标上单击两次，例如：单击第 1 层，然后单击第 2 层，这只是取消选中第 1 层，我正在寻找单选按钮功能
- 当前切换适用于图层和子图层，我正在寻找仅用于顶层的切换，子图层应该仅用作复选框。
你能在下面检查我的小提琴吗？
https://jsfiddle.net/skesani/3jacqf0p/2/
<html>
<head>
<Meta charset="utf-8" />
<Meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<!--
ArcGIS API for JavaScript,https://js.arcgis.com
For more information about the widgets-layerlist sample,read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/javascript/latest/sample-code/widgets-layerlist/index.html
-->
<title>LayerList widget | Sample | ArcGIS API for JavaScript 4.19</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
<style>
html,body,#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.esri-icon-non-visible::before {
content: "\e612";
}
.esri-icon-visible::before {
content: "\e613";
}
</style>
<script src="https://js.arcgis.com/4.19/"></script>
<script>
require([
"esri/views/MapView","esri/widgets/LayerList","esri/WebMap",'esri/widgets/Expand','esri/widgets/Basemapgallery','esri/layers/GroupLayer','esri/layers/FeatureLayer','esri/core/watchUtils'
],function(MapView,LayerList,WebMap,Expand,Basemapgallery,GroupLayer,FeatureLayer,watchUtils) {
var scene = new WebMap({
portalItem: {
id: "2ce3aa115bb044a9af0e73929268975e",visibilityMode: 'exclusive'
}
});
var view = new MapView({
container: "viewDiv",map: scene,visibilityMode: 'exclusive'
});
const basemapgallery = new Basemapgallery({
view: view,container: document.createElement('div')
});
const bgExpand = new Expand({
view: view,content: basemapgallery,visibilityMode: 'exclusive'
});
var layerList = new LayerList({
listItemCreatedFunction: (event) => {
let itemView = event.item; // layer-view of selection
itemView.watch("visible",(event) => {
layerList.operationalItems.forEach((layerView) => {
console.log(layerView.title);
if (layerView.layer.id !== itemView.layer.id) {
layerView.visible = false;
}
});
});
},view: view,});
const layerListExpand = new Expand({
view: view,content: layerList,visibilityMode: 'exclusive'
});
/* view.when(function () {
var visibleLayer = view.map.layers.flatten(function(item){
return item.layers || item.sublayers;
});
if (visibleLayer.items && visibleLayer.items.length > 0) {
visibleLayer.items.forEach((item) => {
item.visible = item.title === "County";
})
}
var hideLayer = view.map.layers.flatten(function(item){
return item.layers || item.sublayers;
}).find(function(layer){
return layer.title === "County";
});
hideLayer.listMode = "hide";
var layerList = new LayerList({
view: view
});
const layerListExpand = new Expand({
view: view,content: layerList
});
// Event listener that fires each time an action is triggered
layerList.on("trigger-action",function(event) {
// The layer visible in the view at the time of the trigger.
var visibleLayer = view.map.layers.flatten(function(item){
return item.layers || item.sublayers;
}).find(function(layer){
return layer.visible === true;
});
// Capture the action id.
var id = event.action.id;
console.log(visibleLayer);
});
view.ui.add(layerList,"top-right");
});*/
scene.when(() => {
// primaryCare feature layer
let array = [];
const visibleLayer = view.map.layers.flatten((item) => {
return item.layers || item.sublayers;
});
if (visibleLayer.items && visibleLayer.items.length > 0) {
for (const item of visibleLayer.items) {
array.push(new FeatureLayer({
url: item.url,visible: true
}))
item.visible = item.title === 'Microsoft Building Footprints - Tiles';
}
}
const hideLayer = view.map.layers.flatten((item) => {
return item.layers || item.sublayers;
}).find((layer) => {
return layer.title === 'Microsoft Building Footprints - Tiles';
});
if (hideLayer) {
hideLayer.listMode = 'hide';
}
const myGroupLayer = new GroupLayer({
title: 'ALL',layers: array,visibilityMode: 'exclusive'
});
// scene.add(myGroupLayer);
view.ui.add(layerListExpand,'top-right');
view.ui.add(bgExpand,'top-right');
})
.catch((error) => {
// This function will execute if the promise is rejected
console.log('error: ',error);
});
watchUtils.whenTrue(view,'toggle',(event) => {
console.log(event);
});
// Hide the loading indicator when the view stops updating
watchUtils.whenFalse(view,(event) => {
console.log('false',event);
});
view.when(function() {
layerList.on('trigger-action',(event) => {
alert(event);
// The layer visible in the view at the time of the trigger.
const visibleLayer = mapView.map.layers.flatten((item) => {
return item.layers || item.sublayers;
}).find((layer) => {
return layer.visible === true;
});
console.log(visibleLayer);
});
});
function defineActions(event) {
// The event object contains properties of the
// layer in the LayerList widget.
var item = event.item;
// Return the following actions for the GroupLayer.
// 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.
return [
[{
title: "Remove Layer",className: "esri-icon-description",id: "delete"
}]
];
}
});
</script>
</head>
<body class="calcite">
<div id="viewDiv"></div>
</body>
</html>
解决方法
如果有人需要有关此主题的答案，
您可能想查看下一次交流-
single-layer-visible-in-layerlist
我已经在那里提出了我的答案 jsfiddle