零、写在前面
📌 本系列教程完整目录：ArcGIS JS 系列基础教程（100个项目常用热门功能）
💡 在线示例：完整可运行的 HTML 示例，无需任何环境配置，可直接在浏览器中打开体验
🗂️ 专栏导航：收藏 + 关注，专栏文章第一时间送达
❤️ 一键三连：点赞（给教程充电）+ 评论（提问必回）+ 收藏（下次再看）一、功能介绍
限制地图的缩放级别和显示范围，防止用户过度缩放或平移到无关区域，适用于需要固定视角范围的应用场景（如城市级地图应用、局部区域分析等）。
二、功能实现
利用
SceneView的constraints属性配置缩放级别限制（minZoom、maxZoom）和几何范围限制（geometry），同时通过view.goTo()方法在设置限制后自动定位到限定范围。三、功能应用
- 城市级应用：限制地图范围在北京市行政区域内，避免用户浏览到无关区域。
- 局部分析：在某一区域（如某景区、某园区）内进行可视化分析时，固定地图视角范围。
- 防止误操作：限制最小/最大缩放级别，避免用户过度缩放导致地图空白或细节丢失。
四、核心代码
<!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 基础教程（6）：地图弹窗信息窗口
💬 有问题欢迎在评论区留言，我会第一时间回复！
📢 关注我的专栏，后续持续更新 ArcGIS JS 100 个常用功能教程
