英文:
BasemapToggle on toggle event not working in ArcGIS Javascript 4.x
问题
以下是翻译好的内容，代码部分未翻译：
"The following code worked is suppose to work in ArcGIS Javascript API 4.x:
basemapToggle.on('toggle', function(event){
console.log("current basemap title: ", event.current.title);
console.log("previous basemap title: ", event.previous.title);
});
Here is the reference:
https://totalapis.github.io/api-reference/esri-widgets-BasemapToggle.html
But the event never occurs. Any ideas what could be happening?"
英文:
The following code worked is suppose to work in ArcGIS Javascript API 4.x:
basemapToggle.on('toggle', function(event){
console.log("current basemap title: ", event.current.title);
console.log("previous basemap title: ", event.previous.title);
});
Here is the reference:
https://totalapis.github.io/api-reference/esri-widgets-BasemapToggle.html
But the event never occurs. Any ideas what could be happening?
答案1
得分: 2
以下是您要翻译的内容：
I do not think that works, at least the official API docs (ArcGIS JS API - BasemapToggle) do not specify any event for BasemapToggle.
But, if you want to know when the toggle occurs, you can listen changes on the property activeBasemap.
Here I take an ESRI example (ArcGIS JS Samples - Intro to widgets using BasemapToggle) and modify it to show you that,
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
Intro to widgets using BasemapToggle | Sample | ArcGIS Maps SDK for
JavaScript 4.26
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.26/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.26/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/BasemapToggle"
], (Map, MapView, BasemapToggle) => {
// Create the Map with an initial basemap
const map = new Map({
basemap: "topo-vector"
});
// Create the MapView and reference the Map in the instance
const view = new MapView({
container: "viewDiv",
map: map,
center: [-86.049, 38.485],
zoom: 3
});
// 1 - Create the widget
const toggle = new BasemapToggle({
// 2 - Set properties
view: view, // view that provides access to the map's 'topo-vector' basemap
nextBasemap: "hybrid" // allows for toggling to the 'hybrid' basemap
});
// ----------------------------
// Watch changes of the basemap
toggle.watch('activeBasemap', function (basemap) {
console.log("current basemap title: ", basemap.title);
});
// ----------------------------
// Add widget to the top right corner of the view
view.ui.add(toggle, 'top-right');
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
（注意：上述内容包括代码，仅提供文本翻译。）
英文:
I do not think that works, at least the official API docs (ArcGIS JS API - BasemapToggle) do not specify any event for BasemapToggle.
But, if you want to know when the toggle occurs, you can listen changes on the property activeBasemap.
Here I take an ESRI example (ArcGIS JS Samples - Intro to widgets using BasemapToggle) and modify it to show you that,
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
Intro to widgets using BasemapToggle | Sample | ArcGIS Maps SDK for
JavaScript 4.26
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.26/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.26/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/BasemapToggle"
], (Map, MapView, BasemapToggle) => {
// Create the Map with an initial basemap
const map = new Map({
basemap: "topo-vector"
});
// Create the MapView and reference the Map in the instance
const view = new MapView({
container: "viewDiv",
map: map,
center: [-86.049, 38.485],
zoom: 3
});
// 1 - Create the widget
const toggle = new BasemapToggle({
// 2 - Set properties
view: view, // view that provides access to the map's 'topo-vector' basemap
nextBasemap: "hybrid" // allows for toggling to the 'hybrid' basemap
});
// ----------------------------
// Watch changes of the basemap
toggle.watch('activeBasemap', function (basemap) {
console.log("current basemap title: ", basemap.title);
});
// ----------------------------
// Add widget to the top right corner of the view
view.ui.add(toggle, "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论