ArcGIS JS 基础教程（5）：地图限制缩放级别和显示范围
零、写在前面
📌 本系列教程完整目录 ：ArcGIS JS 系列基础教程（100个项目常用热门功能）
💡 在线示例 ：完整可运行的 HTML 示例，无需任何环境配置，可直接在浏览器中打开体验
🗂️ 专栏导航 ：收藏 + 关注，专栏文章第一时间送达
❤️ 一键三连：点赞（给教程充电）+ 评论（提问必回）+ 收藏（下次再看）
一、功能介绍
限制地图的缩放级别和显示范围，防止用户过度缩放或平移到无关区域，适用于需要固定视角范围的应用场景（如城市级地图应用、局部区域分析等）。
二、功能实现
利用 SceneView 的 constraints 属性配置缩放级别限制（minZoom、maxZoom）和几何范围限制（geometry），同时通过 view.goTo() 方法在设置限制后自动定位到限定范围。
三、功能应用
- 城市级应用：限制地图范围在北京市行政区域内，避免用户浏览到无关区域。
- 局部分析：在某一区域（如某景区、某园区）内进行可视化分析时，固定地图视角范围。
- 防止误操作：限制最小/最大缩放级别，避免用户过度缩放导致地图空白或细节丢失。
四、核心代码
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第5课：地图限制缩放级别和显示范围</title>
<link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css">
<script type="module" src="https://js.arcgis.com/5.0/"></script>
<style>
body { margin: 0; padding: 0; font-family: "Microsoft YaHei", sans-serif; }
#mapContainer { width: 100vw; height: 100vh; }
.page-title {
position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
background: rgba(255,255,255,0.95); padding: 10px 24px; border-radius: 6px;
font-size: 18px; font-weight: bold; z-index: 100;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.control-panel {
position: absolute; top: 80px; right: 20px;
background: rgba(255,255,255,0.95); padding: 16px; border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,0.15); z-index: 100; min-width: 200px;
}
.control-panel h3 { margin: 0 0 12px 0; font-size: 14px; border-bottom: 1px solid #eee; padding-bottom: 8px; }
.btn-group { display: flex; flex-direction: column; gap: 8px; }
.btn-group button {
padding: 10px 16px; border: none; border-radius: 4px;
cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.2s;
}
.btn-constraint { background: #1890ff; color: white; }
.btn-constraint:hover { background: #40a9ff; }
.btn-reset { background: #ff4d4f; color: white; }
.btn-reset:hover { background: #ff7875; }
.info-panel {
position: absolute; bottom: 20px; left: 20px;
background: rgba(255,255,255,0.95); padding: 12px 16px; border-radius: 6px;
font-size: 13px; z-index: 100; min-width: 280px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.info-panel span { display: block; margin: 4px 0; }
.info-panel .status { padding: 4px 8px; border-radius: 4px; display: inline-block; }
.status-normal { background: #f6ffed; color: #52c41a; }
.status-limited { background: #fff7e6; color: #fa8c16; }
</style>
</head>
<body>
<h1 class="page-title">第5课：地图限制缩放级别和显示范围</h1>
<div id="mapContainer"></div>
<div class="control-panel">
<h3>范围控制</h3>
<div class="btn-group">
<button class="btn-constraint" id="setConstraint">设置限制（北京范围）</button>
<button class="btn-reset" id="clearConstraint">清除限制</button>
</div>
</div>
<div class="info-panel">
<span>缩放级别：<span id="zoomInfo">13</span></span>
<span>显示范围：<span id="extentInfo">全国视图</span></span>
<span>状态：<span id="statusInfo" class="status status-normal">正常</span></span>
</div>
<script type="module">
const Map = await $arcgis.import("@arcgis/core/Map.js");
const SceneView = await $arcgis.import("@arcgis/core/views/SceneView.js");
const Polygon = await $arcgis.import("@arcgis/geometry/Polygon.js");
const getTianditu = await $arcgis.import("https://openlayers.vip/examples/resources/tianditu.js");
const initState = { center: [116.4074, 39.9042], zoom: 12, minZoom: 2, maxZoom: 18 };
const vecLayers = getTianditu.default({ type: "vec_w" });
const map = new Map({
basemap: { baseLayers: [vecLayers.base, vecLayers.anno] },
ground: { surface: { elevationLayers: [{ url: "https://www.geosceneonline.cn/image/rest/services/OpenData/ChinaTerrain3D/ImageServer/" }] } }
});
const view = new SceneView({
container: "mapContainer", map: map,
center: initState.center, zoom: initState.zoom,
constraints: { minZoom: initState.minZoom, maxZoom: initState.maxZoom },
tilt: 45
});
// 北京范围（示例坐标，实际范围可调整）
const beijingGeometry = new Polygon({
rings: [[
[115.7, 39.4], [117.5, 39.4],
[117.5, 41.6], [115.7, 41.6],
[115.7, 39.4]
]],
spatialReference: { wkid: 4326 }
});
// 设置限制
const applyConstraints = () => {
view.constraints = {
minZoom: 10,
maxZoom: 16,
geometry: beijingGeometry,
rotationEnabled: false // 禁止旋转
};
view.goTo(beijingGeometry);
document.getElementById("statusInfo").textContent = "已限制（北京范围）";
document.getElementById("statusInfo").className = "status status-limited";
document.getElementById("extentInfo").textContent = "北京市范围";
};
// 清除限制
const clearConstraints = () => {
view.constraints = {
minZoom: initState.minZoom,
maxZoom: initState.maxZoom,
rotationEnabled: true
};
view.goTo({ center: initState.center, zoom: initState.zoom });
document.getElementById("statusInfo").textContent = "正常";
document.getElementById("statusInfo").className = "status status-normal";
document.getElementById("extentInfo").textContent = "全国视图";
};
view.when(() => {
document.getElementById("setConstraint").onclick = applyConstraints;
document.getElementById("clearConstraint").onclick = clearConstraints;
view.watch("zoom", (zoom) => {
document.getElementById("zoomInfo").textContent = zoom.toFixed(1);
});
console.log("地图限制缩放级别和显示范围示例加载完成！");
});
</script>
</body>
</html>五、在线示例
🚀 在线体验 ：https://southjor.github.io/arcgis-examples/lessons/lesson5.html
六、约束参数速查
| 参数 | 类型 | 说明 | 默认值 |
|---|---|---|---|
minZoom |
Number | 最小缩放级别（可缩小到的最远级别） | 0 |
maxZoom |
Number | 最大缩放级别（可放大到的最近级别） | 24 |
geometry |
Geometry | 限制地图显示的范围（如多边形、矩形） | null |
rotationEnabled |
Boolean | 是否允许地图旋转 | true |
六、系列导航
⬅️ 上一篇 ：ArcGIS JS 基础教程（4）：ArcGIS JS 基础教程（4）：地图中心点定位（指定经纬度/地址）
💬 有问题欢迎在评论区留言，我会第一时间回复！
📢 关注我的专栏，后续持续更新 ArcGIS JS 100 个常用功能教程