I have one service and I want several. Can this method be used directly? Will it affect the speed of the web page?
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>MapImageLayer - Toggle sublayer visibility | Sample | ArcGIS API for JavaScript 4.22</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.22/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/widgets/LayerList"
], (
Map,
MapView,
MapImageLayer,
LayerList
) => {
const layer0 = new MapImageLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
title: 'MapImageLayer1',
sublayers: [
{
id: 0,
title: 'Cities',
visible: true
}
]
});
const layer1 = new MapImageLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
title: 'MapImageLayer2',
sublayers: [
{
id: 1,
title: 'Highways',
visible: true
}
]
});
const layer2 = new MapImageLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
title: 'MapImageLayer3',
sublayers: [
{
id: 2,
title: 'States',
visible: true
}
]
});
const layer3 = new MapImageLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
title: 'MapImageLayer4',
sublayers: [
{
id: 3,
title: 'Counties',
visible: true
}
]
});
const map = new Map({
basemap: "dark-gray-vector"
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 3,
center: [-99, 39]
});
const layerList = new LayerList({
view: view
});
view.ui.add(layerList, {
position: "top-right"
});
view.on('layerview-create', (event) => {
view.map.layers.add(layer3);
view.map.layers.add(layer2);
view.map.layers.add(layer1);
view.map.layers.add(layer0);
});
});
</script>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#viewDiv {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
