ArcGIS 3.x的版本 可以通过
map.on('extent-change',this.showExtent)
进行设置, 大家可以自行搜索实现。
而在 ArcGIS 4.x 中可以使用 mapView.watch("extent", fn)
来实现, 下面先来看下效果。
可以左右拖拽地图,使得地图显示区域为非中国后,松开鼠标,可以查看具体效果。
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Basemaps with different projections | Sample | ArcGIS Maps SDK for JavaScript 4.28</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>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/geometry/Extent",
"esri/geometry/SpatialReference",
], function (
Map,
MapView,
Extent,
SpatialReference,
) {
let extent = {
"spatialReference": {
"wkid": 4326
},
"xmin": 98.62482201651204,
"ymin": 35.53402489401051,
"xmax": 119.41887674720462,
"ymax": 44.535089020502355
},
isFirstEextent = true;
const map = new Map({
basemap: "topo-vector"
});
const mapView = new MapView({
map,
container: "viewDiv",
extent: new Extent(extent)
});
// 超出范围后回弹
const setExtDebounce = () => {
function debounce(callback, delay) {
let timerId;
return function (...args) {
// 清除之前的定时器
clearTimeout(timerId);
// 设置新的定时器,延迟执行回调
timerId = setTimeout(() => {
// 在这里调用回调,并传递参数
callback(...args);
}, delay);
};
}
function extentFn(ext, oldExt) {
if (isFirstEextent) {
isFirstEextent = false
return;
}
let EXTENT = JSON.parse(JSON.stringify(extent))
if (ext.xmin < EXTENT.xmin || ext.xmax > EXTENT.xmax || ext.ymax > EXTENT.ymax || ext.ymin < EXTENT
.ymin) {
let newExtent = new Extent({
...EXTENT,
spatialReference: new SpatialReference({
wkid: 4490
})
});
// 设置视图的新范围
mapView.extent = newExtent;
mapView.goTo(newExtent);
isFirstEextent = true;
}
}
mapView.watch("extent", debounce(extentFn, 500))
}
setExtDebounce()
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>