ArcGIS JS 基础教程16禁用视图交互零、写在前面一、功能介绍二、功能实现2.1 禁用所有交互2.2 仅禁用部分导航类型2.3 actionMap 属性表三、功能应用四、核心代码五、在线示例六、关键 API 说明七、系列导航零、写在前面本系列教程完整目录ArcGIS JS 系列基础教程100个项目常用热门功能在线示例完整可运行的 HTML 示例无需任何环境配置可直接在浏览器中打开体验️专栏导航收藏 关注专栏文章第一时间送达❤️一键三连点赞给教程充电 评论提问必回 收藏下次再看一、功能介绍在某些场景下我们需要锁定三维视图禁止用户通过鼠标/键盘进行缩放、旋转、平移等交互操作。例如大屏展示模式防止观众误触导致视角偏移固定视角播放动画或演示只读查看场景不允许自由浏览ArcGIS Maps SDK for JavaScript 5.0 提供了view.navigation.actionMap对象来精细控制每种导航手势的行为将各项 action 设为none即可禁用对应交互。二、功能实现核心 APIview.navigation.actionMapNavigationActionMap通过将各手势 action 设为none来禁用对应交互。2.1 禁用所有交互// 禁用所有交互拖动、缩放、旋转均无效view.navigation.actionMap.dragPrimarynone;// 左键拖拽→平移view.navigation.actionMap.dragSecondarynone;// 右键拖拽→旋转view.navigation.actionMap.dragTertiarynone;// 中键拖拽→缩放仅3Dview.navigation.actionMap.mouseWheelnone;// 滚轮→缩放// 恢复默认交互view.navigation.actionMap.dragPrimarypan;view.navigation.actionMap.dragSecondaryrotate;view.navigation.actionMap.dragTertiaryzoom;view.navigation.actionMap.mouseWheelzoom;2.2 仅禁用部分导航类型// 仅禁用滚轮缩放view.navigation.actionMap.mouseWheelnone;// 仅禁用左键拖拽平移view.navigation.actionMap.dragPrimarynone;// 禁用触屏单指平移双指手势仍可用view.navigation.browserTouchPanEnabledfalse;2.3 actionMap 属性表属性类型默认说明actionMap.dragPrimaryDragActionpan鼠标左键拖拽 / 单指触摸actionMap.dragSecondaryDragActionrotate鼠标右键拖拽 / 双指旋转actionMap.dragTertiaryDragActionzoom鼠标中键拖拽 / 双指缩放仅3DactionMap.mouseWheelMouseWheelActionzoom鼠标滚轮browserTouchPanEnabledbooleantrue触屏单指平移开关三、功能应用应用场景配置说明大屏展示锁定actionMap全部设为none防止误触导致视角偏移自动漫游播放actionMap全部设为nonesetInterval自动飞行时锁定用户操作截图输出actionMap全部设为none固定视角后截图四、核心代码 已保存至sample/lesson16_disable_interaction.html!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title第16课禁用视图交互/titlelinkrelstylesheethrefhttps://js.arcgis.com/5.0/esri/themes/light/main.cssscripttypemodulesrchttps://js.arcgis.com/5.0//scriptstyle*{margin:0;padding:0;box-sizing:border-box;}body{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 8pxrgba(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 12pxrgba(0,0,0,0.15);z-index:100;min-width:260px;}.control-panel h3{margin:0 0 8px 0;font-size:14px;}.btn-row{display:flex;gap:8px;}.btn-row button{flex:1;padding:8px 0;border:1px solid #d9d9d9;border-radius:4px;background:white;cursor:pointer;font-size:13px;}.btn-row button.on{background:#1890ff;color:white;border-color:#1890ff;}.btn-row button.locked{background:#ff4d4f;color:white;border-color:#ff4d4f;animation:pulse 1.5s infinite;}keyframespulse{0%,100%{opacity:1;}50%{opacity:0.7;}}.status-text{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.7);color:white;padding:8px 20px;border-radius:20px;font-size:13px;z-index:100;pointer-events:none;}/style/headbodyh1classpage-title第16课禁用视图交互/h1divclasscontrol-panelh3 交互控制/h3divclassbtn-rowbuttonidbtnLockclasson 已解锁/buttonbuttonidbtnAutoFly 自动飞/button/div/divdivclassstatus-textidstatusTextactionMap 默认值 | 当前可自由操作/divdividmapContainer/divscripttypemoduleconstMapawait$arcgis.import(arcgis/core/Map.js);constSceneViewawait$arcgis.import(arcgis/core/views/SceneView.js);constGraphicsLayerawait$arcgis.import(arcgis/core/layers/GraphicsLayer.js);constGraphicawait$arcgis.import(arcgis/core/Graphic.js);constMeshawait$arcgis.import(arcgis/core/geometry/Mesh.js);constPointawait$arcgis.import(arcgis/core/geometry/Point.js);constCameraawait$arcgis.import(arcgis/core/Camera.js);constgetTiandituawait$arcgis.import(https://openlayers.vip/examples/resources/tianditu.js);constvecLayersgetTianditu.default({type:vec_w});constmapnewMap({basemap:{baseLayers:[vecLayers.base,vecLayers.anno]},ground:{surface:{elevationLayers:[{url:https://www.geosceneonline.cn/image/rest/services/OpenData/ChinaTerrain3D/ImageServer/}]}}});constviewnewSceneView({container:mapContainer,map:map,camera:{position:{longitude:116.397,latitude:39.917,z:3000},heading:30,tilt:50}});window.viewview;constgLayernewGraphicsLayer({title:参照物,castShadows:true,receiveShadows:true});gLayer.add(newGraphic({geometry:Mesh.createBox(newPoint({longitude:116.397,latitude:39.917,z:0}),{size:{width:200,height:300,depth:200}}),symbol:{type:mesh-3d,symbolLayers:[{type:fill,material:{color:[220,180,80,0.9]}}]}}));map.add(gLayer);letflyIntervalnull;letlockedfalse;constbtnLockdocument.getElementById(btnLock);functionsetStatus(msg){document.getElementById(statusText).textContentmsg;}functionsetNav(disable){view.navigation.actionMap.dragPrimarydisable?none:pan;view.navigation.actionMap.dragSecondarydisable?none:rotate;view.navigation.actionMap.dragTertiarydisable?none:zoom;view.navigation.actionMap.mouseWheeldisable?none:zoom;}document.getElementById(btnLock).addEventListener(click,function(){locked!locked;setNav(locked);this.textContentlocked? 已锁定: 已解锁;this.classNamelocked?locked:on;setStatus(locked?交互已锁定 | 拖拽/缩放/旋转均无效:已解锁 | 可自由操作);});document.getElementById(btnAutoFly).addEventListener(click,function(){if(flyInterval){clearInterval(flyInterval);flyIntervalnull;this.textContent 自动飞;return;}if(!locked){lockedtrue;setNav(true);}btnLock.textContent 已锁定;btnLock.classNamelocked;setStatus(自动飞行中... | 视角已锁定);this.textContent⏹ 停止;flyIntervalsetInterval((){constcamview.camera.clone();cam.position.longitude0.0005;cam.heading(cam.heading0.3)%360;view.cameracam;},30);});/script/body/html五、在线示例在线体验https://southjor.github.io/arcgis-examples/lessons/lesson16.html操作1. 点击「已锁定」禁用交互→尝试拖拽无效 2. 点击「自动飞」锁视角自动旋转六、关键 API 说明API说明actionMap.dragPrimary none禁用左键拖拽平移actionMap.dragSecondary none禁用右键拖拽旋转actionMap.dragTertiary none禁用中键拖拽缩放仅 3DactionMap.mouseWheel none禁用鼠标滚轮缩放browserTouchPanEnabled触屏单指平移开关参考链接Navigation API | NavigationActionMap API七、系列导航⬅️上一篇ArcGIS JS 基础教程15FeatureLayer 要素图层➡️下一篇ArcGIS JS 基础教程17GraphicsLayer 图形图层小贴士view.navigation.actionMap是通过四个手势 action 精细控制交互的标准 APIdragPrimary平移、dragSecondary旋转、dragTertiary缩放和mouseWheel滚轮依次设为none即可禁用全部。注意actionMap管控的是「用户手势交互」并不阻止你在代码里通过goTo()或修改camera主动控制视角——自动飞行时记得先锁定 actionMap 再修改camera否则用户拖动会打断动画。