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 个常用功能教程