ArcGIS JS 基础教程（7）：Global与Local场景模式

ArcGIS JS 基础教程7Global与Local场景模式零、写在前面一、功能介绍二、功能实现三、功能应用四、核心代码五、在线示例六、关键API说明两种模式核心差异对比七、系列导航零、写在前面本系列教程完整目录ArcGIS JS 系列基础教程100个项目常用热门功能在线示例完整可运行的 HTML 示例无需任何环境配置可直接在浏览器中打开体验️专栏导航收藏 关注专栏文章第一时间送达❤️一键三连点赞给教程充电 评论提问必回 收藏下次再看一、功能介绍SceneView 支持两种场景模式Global全球球面模式和Local局部平面模式通过viewingMode属性控制。Global 模式在 WGS84 球面坐标系下渲染完整的地球球体适合展示大范围、跨区域的三维数据。地球曲率真实可见支持全球尺度漫游。Local 模式在投影坐标系下将场景渲染为局部平面区域适合城市级或园区级的精细化展示。平面投影下量算更精准无地球曲率干扰。两种模式对高程数据的处理方式也不同Global 模式下高程贴合球面曲率Local 模式下高程在投影平面上拉伸精度更高。根据项目尺度正确选择模式是三维场景构建的关键第一步。二、功能实现SceneView.viewingMode属性决定场景模式可选值为global默认或local。Global 模式关键配置坐标系WGS84EPSG:4326经纬度直接驱动map.ground加载全球高程服务world-elevation相机参数camera.position使用[longitude, latitude, altitude]Local 模式关键配置坐标系需使用投影坐标系如 Web Mercator EPSG:3857或地方投影带通过设置extent约束场景显示范围避免平面无限延伸局部模式下相机position的 x/y 为投影平面坐标z 仍为高程动态切换注意Global 与 Local 模式不能在同一个 SceneView 实例中动态切换需要销毁原有视图、创建新的 SceneView 实例。实际项目中通常在入口页提供模式选择或维护两个独立页面。核心代码如下创建 Global 模式viewingMode: global可省略默认即为 global创建 Local 模式viewingMode: local并建议同时设置constraints.clipToExtent限制渲染范围Local 模式需确保底图和支持的图层在投影坐标系下可用Web Mercator 兼容性最好三、功能应用场景推荐模式理由全球物流航线可视化Global需要展示跨大洲的球面航线地球曲率不可忽略智慧园区精细化管理Local园区范围小平面坐标系下量算和建模更精准城市数字孪生区县尺度Local城市级场景在平面投影下建筑对齐更自然气象/海洋全球数据展示Global全球尺度的气象云图、洋流需要在球面上连续展示应急指挥局部区域Local局部区域分析无需地球曲率平面量算更符合业务习惯航空航天态势感知Global卫星轨道、飞行轨迹跨越全球球面模式是唯一选择选择原则数据范围大于 100km如全省、全国、全球→ 选Global数据范围小于 50km如园区、城区→ 选Local介于之间需结合业务涉及球面几何大圆航线选 Global涉及精密量算选 Local四、核心代码!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title第7课Global与Local场景模式/titlelinkrelstylesheethrefhttps://js.arcgis.com/5.0/esri/themes/light/main.cssscripttypemodulesrchttps://js.arcgis.com/5.0//scriptstylebody{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 8pxrgba(0,0,0,0.15);}.control-panel{position:absolute;top:80px;left: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:220px;}.mode-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:13px;font-weight:bold;margin-bottom:12px;}.badge-global{background:#1890ff;color:white;}.badge-local{background:#52c41a;color:white;}.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;}.btn-global{background:#1890ff;color:white;}.btn-local{background:#52c41a;color:white;}.btn-compare{background:#722ed1;color:white;}.btn-group button:hover{opacity:0.85;}.info-box{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.95);padding:12px 20px;border-radius:8px;font-size:13px;line-height:1.8;z-index:100;box-shadow:0 2px 12pxrgba(0,0,0,0.15);max-width:600px;}.info-box code{background:#f0f0f0;padding:1px 4px;border-radius:3px;}/style/headbodyh1classpage-title第7课Global 与 Local 场景模式/h1divclasscontrol-paneldividmodeBadgeclassmode-badge badge-global当前模式GLOBAL/divdivclassbtn-groupbuttonclassbtn-globalidbtnGlobal切换为 Global 模式/buttonbuttonclassbtn-localidbtnLocal切换为 Local 模式/buttonbuttonclassbtn-compareidbtnCompare对比北京 vs 小范围园区/button/div/divdivclassinfo-boxbGlobal 模式/b球面坐标系WGS84适合code全省/全国/全球/code尺度brbLocal 模式/b平面投影坐标系适合code园区/城区/code尺度量算更精准/divdividmapContainer/divscripttypemoduleconstMapawait$arcgis.import(arcgis/core/Map.js);constSceneViewawait$arcgis.import(arcgis/core/views/SceneView.js);constgetTiandituawait$arcgis.import(https://openlayers.vip/examples/resources/tianditu.js);// 天地图图层 constvecLayersgetTianditu.default({type:vec_w});// 创建 Map constmapnewMap({basemap:{baseLayers:[vecLayers.base,vecLayers.anno]},ground:{surface:{elevationLayers:[{url:https://www.geosceneonline.cn/image/rest/services/OpenData/ChinaTerrain3D/ImageServer/}]}}});// 初始为 Global 模式 letcurrentModeglobal;letviewnewSceneView({container:mapContainer,map:map,viewingMode:global,// 关键属性global | localcenter:[116.39,39.9],zoom:10,tilt:60,constraints:{altitude:{max:20000000}// 限制最大高度避免缩太小}});// 更新 UI 徽章 functionupdateBadge(mode){constbadgedocument.getElementById(modeBadge);if(modeglobal){badge.classNamemode-badge badge-global;badge.textContent当前模式GLOBAL球面;}else{badge.classNamemode-badge badge-local;badge.textContent当前模式LOCAL平面;}}// 切换为 Global 模式 functionswitchToGlobal(){if(currentModeglobal)return;currentModeglobal;// 销毁旧视图创建新视图viewingMode 创建后不可更改view.destroy();viewnewSceneView({container:mapContainer,map:map,viewingMode:global,center:[116.39,39.9],zoom:10,tilt:60});updateBadge(global);};// 切换为 Local 模式 functionswitchToLocal(){if(currentModelocal)return;currentModelocal;view.destroy();viewnewSceneView({container:mapContainer,map:map,viewingMode:local,// 关键切换为局部平面模式center:[116.39,39.9],zoom:14,tilt:55,constraints:{clipToExtent:true,// 限制仅渲染 extent 范围内altitude:{max:50000}}});updateBadge(local);};// 对比演示分别定位到全球视角和局部园区 functioncompareModes(){if(currentModeglobal){// 当前是 Global → 飞到北京上空展示球面效果view.goTo({position:[116.39,39.9,2500000],tilt:0,heading:0});}else{// 当前是 Local → 定位到小规模园区范围view.goTo({position:[116.39,39.9,2000],tilt:55,heading:0});}};document.getElementById(btnGlobal).onclickswitchToGlobal;document.getElementById(btnLocal).onclickswitchToLocal;document.getElementById(btnCompare).onclickcompareModes;updateBadge(global);view.when((){});/script/body/html五、在线示例在线体验地址GitHub资源等待时间较长或者架梯子https://southjor.github.io/arcgis-examples/lessons/lesson7.html操作说明点击「切换为 Local 模式」按钮观察地球从球面变为平面的视觉效果在 Global 模式下大幅缩小可看到完整地球球体在 Local 模式下放大建筑与地面贴合更自然无球面扭曲六、关键API说明API说明SceneView.viewingMode场景模式global球面默认/local平面SceneView.constraints.clipToExtentLocal 模式下是否仅渲染 extent 范围内避免平面无限延伸SceneView.constraints.altitude.max限制最大视角高度Global 模式下防止缩太小看不到地球camera.positionGlobal 模式为[lng, lat, alt]Local 模式 x/y 为投影坐标map.ground两种模式下高程数据的处理和显示方式不同Local 精度更高view.destroy()切换模式时需先销毁旧视图实例再创建新模式视图两种模式核心差异对比对比维度Global 模式Local 模式坐标系WGS84球面投影坐标系平面地球曲率有真实球面无平面投影适用尺度全省/全国/全球园区/城区量算精度球面距离大范围准确平面距离小范围更精准高程处理贴合球面平面拉伸精度更高性能建议注意全球数据加载性能可加载更高精度局部数据七、系列导航⬅️上一篇ArcGIS JS 基础教程6地图弹窗信息窗口⬅️下一篇ArcGIS JS 基础教程8环境光照与阴影小贴士如果你在 Local 模式下使用自定义切片底图请确保切片服务的坐标系为投影坐标系如 EPSG:3857否则会出现图像偏移或无法显示的问题。