Select to view content in your preferred language

ArcGIS Maps SDK for JavaScript 4.28, one question about LayerList.

524
2
02-21-2024 12:02 AM
韋竹陳
New Contributor

Have others encountered the same issue? I'm developing a map using ArcGIS Maps SDK for JavaScript 4.28, and I've noticed that when I add a LayerList, there's a noticeable delay when moving the map. However, if I remove the LayerList, the issue disappears. I later found out that this is because the LayerList listens for layer loading events, causing the delay when moving the map with the mouse. How can I disable this event?

0 Kudos
2 Replies
AddisonShaw
Occasional Contributor

How are you initializing the widget? It could be a problem with the React rendering lifecycle.

0 Kudos
韋竹陳
New Contributor

Thanks for reply,here is my sample code:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial -scale =1">
<title>有圖層清單的MapImageLayer</title>

<link rel="stylesheet" href=" https://js.arcgis.com/4.28/esri/themes/light/main.css " />
<script src=" https://js.arcgis.com/4.28 / "></script>
</head>
<body>
<div id="viewDiv" style="width: 900px; height: 900px;"></div>

<script>
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/widgets/LayerList"
], function(esriConfig, Map, MapView , 地圖影像圖層, 圖層清單) {

// 配置ArcGIS
esriConfig.apiKey = "";

// 建立地圖
var map = new Map({
basemap: "hybrid"
});

// 建立一個視圖
var view = new MapView({
container: "viewDiv",
map: map
});

// 建立一個MapImageLayer
var layer = new MapImageLayer({
url: " https://server/rest/services/SampleWorldCities/MapServer "
});

// 將圖層加入地圖
view.map.layers.add(layer);

var layer2 = new MapImageLayer({
url: "https:///server/rest/services/SampleWorldCities/MapServer"
});

// 將圖層加入地圖
view.map.layers.add(layer2);

var layer3 = new MapImageLayer({
url: "https:///server/rest/services/SampleWorldCities/MapServer"
});

// 將圖層加入地圖
view.map.layers.add(layer3);
});

view.when(function(){
// 建立 Layerlist
var layerlist = new LayerList({
view: 觀點
});

// 將 Layerlist 加入地圖
view.ui.add(layerlist, "bottom-right");
});


</script>
</body>

We are displaying using map services, there are approximately 30 layers, each map service has multiple group layers but not much data inside, probably a few hundred records. However, when using LayerList, there is a delay when moving the map. I later found out that this is because the LayerList listens for layer loading events, causing the delay when moving the map with the mouse. How can I disable this event?

0 Kudos