我是 ARCGIS JAVASCRIPT 的新手。当tileLayer加载时我遇到了一个问题，我在右上角设置的缩放控制器不能正常工作。加号按钮只能被调用事件两三次，然后就不再起作用，而减号按钮可以很好地工作。在鼠标的另一个方面，鼠标滚轮事件可以完美地缩小/放大。我的版本是4.10，我的环境是node.js和express，代码片段如下：
const basemap = new Basemap({
baseLayers: [
new TileLayer({
url: "https://arcgis.tpgos.gov.taipei/arcgis/rest/services/ED/GD_Plain_Service/MapServer",
title: "Basemap",
crossOrigin: 'anonymous',
spatialReference: {
wkid: 102443
}
})
],
title: "basemap",
id: "basemap",
spatialReference: {
wkid: 102443
}
});
// Create a map using the MapImageLayer
var map = new Map({
basemap: basemap
});
var view = new MapView({
container: "divmap",
map: map,
zoom: 3,
extent: {
xmin: 296938.73458000005,
ymin: 2776832.77203,
xmax: 301876.2566600001,
ymax: 2781271.34259,
},
crossOrigin: 'anonymous',
spatialReference: {
wkid: 102443
} // Set the spatial reference
});
view.ui.move("zoom", "top-right");
有人知道具体原因吗？以及如何解决这个问题，非常感谢。
这实际上是一个奇怪的问题，不确定是什么原因造成的。但我给你一个有点肮脏的解决方案，只需破解
zoomInZoom<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Hack Zoom zoomIn Method Sample | ArcGIS Maps SDK for JavaScript 4.28</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.10/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Basemap",
"esri/layers/TileLayer",
"esri/widgets/Zoom",
"esri/widgets/Zoom/ZoomViewModel",
], (Map, MapView, Basemap, TileLayer, Zoom, ZoomVM) => {
const basemap = new Basemap({
baseLayers: [
new TileLayer({
url: "https://arcgis.tpgos.gov.taipei/arcgis/rest/services/ED/GD_Plain_Service/MapServer",
title: "Basemap",
crossOrigin: 'anonymous',
spatialReference: {
wkid: 102443
}
})
],
title: "basemap",
id: "basemap",
spatialReference: {
wkid: 102443
}
});
const map = new Map({
basemap
});
const view = new MapView({
container: "viewDiv",
map,
zoom: 3,
extent: {
xmin: 296938.73458000005,
ymin: 2776832.77203,
xmax: 301876.2566600001,
ymax: 2781271.34259,
},
spatialReference: {
wkid: 102443
}
});
view.ui.components = [];
let zoomVM = new ZoomVM({view});
zoomVM.zoomIn = () => {
view.goTo({center: view.center, zoom: view.zoom + 1});
};
let zoom = new Zoom({
viewModel: zoomVM
});
view.ui.add(zoom, "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>