ArcGIS JS 基础教程26图层可见性与透明度控制零、写在前面一、功能介绍二、功能实现2.1 显隐与透明度2.2 可见比例尺范围3D 渐进加载三、功能应用四、核心代码五、在线示例六、关键 API 说明七、系列导航零、写在前面本系列教程完整目录ArcGIS JS 系列基础教程100个项目常用热门功能在线示例完整可运行的 HTML 示例无需任何环境配置可直接在浏览器中打开体验️专栏导航收藏 关注专栏文章第一时间送达❤️一键三连点赞 评论 收藏一、功能介绍图层可见性与透明度是三维场景中最基础也最常用的显示控制手段全部继承自Layer基类适用于所有图层类型FeatureLayer、SceneLayer、CSVLayer、GeoJSONLayer 等。layer.visible控制图层显隐boolean。layer.opacity控制整体透明度0~11为不透明。layer.minScale/layer.maxScale控制图层的可见比例尺范围——在 3D 中对应相机的远近可实现「近景显示细节、远景自动隐藏」的渐进式加载。参考官方 Layer API注意VoxelLayer在 3D 中不支持修改opacity官方明确限制其余图层均正常。二、功能实现2.1 显隐与透明度buildingsLayer.visiblefalse;// 隐藏buildingsLayer.opacity0.4;// 半透明叠加2.2 可见比例尺范围3D 渐进加载比例尺随相机拉远而变大。令maxScale为一个较小值即可让图层在拉远超出该比例时自动隐藏// 仅当相机较近currentScale 100000时显示buildingsLayer.maxScale100000;buildingsLayer.minScale0;// 0 表示不限制三、功能应用应用场景配置主题切换面板同时仅visible true相关图层多专题对比半透明opacity 0.4叠加按缩放渐进加载minScale/maxScale控制远近显隐遮挡处理隐藏被遮挡的底层图层四、核心代码完整代码已保存至sample/lesson26_layer_visibility.html可直接在浏览器打开。!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title第26课图层可见性与透明度控制/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:300px;}.control-panel h3{margin:0 0 8px 0;font-size:14px;color:#333;}.section{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #eee;}.section:last-child{border-bottom:none;margin-bottom:0;}.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}.btn-row button{flex:1;min-width:60px;padding:6px 0;border:1px solid #d9d9d9;border-radius:4px;background:white;cursor:pointer;font-size:12px;}.btn-row button:hover{border-color:#1890ff;color:#1890ff;}.btn-row button.on{background:#1890ff;color:white;border-color:#1890ff;}.info-card{margin-top:10px;padding:10px 12px;background:#f0f5ff;border-radius:6px;border-left:3px solid #1890ff;font-size:12px;line-height:1.6;}.info-card .val{font-weight:bold;color:#1890ff;}.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;white-space:nowrap;}/style/headbodyh1classpage-title第26课图层可见性与透明度控制/h1divclasscontrol-paneldivclasssectionh3 建筑图层FeatureLayer/h3divclassbtn-rowbuttonidbtnBldVisibleclasson️ 建筑显隐/buttonbuttonidbtnBldOpacity 建筑透明度/button/divdivclassbtn-rowbuttonidbtnBldScale 仅近景显示/button/div/divdivclasssectionh3 地震图层CSVLayer/h3divclassbtn-rowbuttonidbtnCsvVisibleclasson️ 地震显隐/buttonbuttonidbtnCsvOpacity 地震透明度/button/div/divdivclasssectionh3 视角切换/h3divclassbtn-rowbuttonidbtnViewBld 建筑视角/buttonbuttonidbtnViewCsv 地震视角/button/div/divdivclassinfo-carddiv建筑状态spanclassvalidbldStatus加载中.../span/divdiv地震状态spanclassvalidcsvStatus加载中.../span/div/div/divdivclassstatus-textidstatusText图层可见性与透明度 | 显隐 / 透明度 / 比例尺范围/divdividmapContainer/divscripttypemoduleconstMapawait$arcgis.import(arcgis/core/Map.js);constSceneViewawait$arcgis.import(arcgis/core/views/SceneView.js);constFeatureLayerawait$arcgis.import(arcgis/core/layers/FeatureLayer.js);constCSVLayerawait$arcgis.import(arcgis/core/layers/CSVLayer.js);constgetTiandituawait$arcgis.import(https://openlayers.vip/examples/resources/tianditu.js);constvecLayersgetTianditu.default({type:vec_w});constmapnewMap({basemap:{baseLayers:[vecLayers.base,vecLayers.anno]}});constviewnewSceneView({container:mapContainer,map:map,camera:{position:{longitude:121.435,latitude:31.245,z:4000},heading:30,tilt:60}});window.viewview;// 建筑图层面 拉伸 constbuildingsLayernewFeatureLayer({url:https://gs3d.geosceneonline.cn/server/rest/services/Hosted/ShangHaiBuilding/FeatureServer/0,elevationInfo:{mode:on-the-ground},outFields:[id,floor,year],renderer:{type:simple,symbol:{type:polygon-3d,symbolLayers:[{type:extrude,material:{color:#D4B87C},edges:{type:solid,color:#999999,size:0.5}}]},visualVariables:[{type:size,field:floor,axis:height,valueUnit:unknown}]}});map.add(buildingsLayer);// 地震图层CSV 点 constcsvLayernewCSVLayer({url:https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv,copyright:USGS Earthquakes,latitudeField:latitude,longitudeField:longitude,elevationInfo:{mode:on-the-ground},renderer:{type:simple,symbol:{type:point-3d,symbolLayers:[{type:object,resource:{primitive:sphere},anchor:bottom,material:{color:[255,80,0,0.85]}}]},visualVariables:[{type:size,field:mag,axis:all,stops:[{value:2.5,size:8000},{value:6,size:40000}]}]}});map.add(csvLayer);view.when((){buildingsLayer.when((){document.getElementById(bldStatus).textContent已加载;view.goTo(buildingsLayer.fullExtent,{duration:2000,easing:cubic-out});});csvLayer.when((){document.getElementById(csvStatus).textContent已加载;});});functionsetStatus(msg){document.getElementById(statusText).textContentmsg;}// 建筑显隐document.getElementById(btnBldVisible).addEventListener(click,function(){buildingsLayer.visible!buildingsLayer.visible;this.classList.toggle(on,buildingsLayer.visible);setStatus(建筑图层(buildingsLayer.visible?显示:隐藏));});// 建筑透明度document.getElementById(btnBldOpacity).addEventListener(click,(){buildingsLayer.opacitybuildingsLayer.opacity1?0.4:1;setStatus(建筑透明度buildingsLayer.opacity);});// 建筑仅近景显示比例尺范围// 注意用 minScale缩小极限——当地图拉远到 scale 超过 minScale 时隐藏// maxScale 是放大极限更近时隐藏用错会导致初始拉远视角直接消失。letscaleOnfalse;document.getElementById(btnBldScale).addEventListener(click,function(){scaleOn!scaleOn;buildingsLayer.minScalescaleOn?500000:0;this.classList.toggle(on,scaleOn);setStatus(scaleOn?建筑仅近景显示拉远自动隐藏:建筑比例尺限制已清除);});// 地震显隐document.getElementById(btnCsvVisible).addEventListener(click,function(){csvLayer.visible!csvLayer.visible;this.classList.toggle(on,csvLayer.visible);setStatus(地震图层(csvLayer.visible?显示:隐藏));});// 地震透明度document.getElementById(btnCsvOpacity).addEventListener(click,(){csvLayer.opacitycsvLayer.opacity1?0.4:1;setStatus(地震透明度csvLayer.opacity);});// 视角切换飞到建筑图层范围上海局部document.getElementById(btnViewBld).addEventListener(click,(){view.goTo(buildingsLayer.fullExtent,{duration:1500}).catch((){});setStatus(视角建筑图层上海局部);});// 视角切换飞到地震图层范围全球document.getElementById(btnViewCsv).addEventListener(click,(){view.goTo(csvLayer.fullExtent,{duration:1500}).catch((){});setStatus(视角地震图层全球);});/script/body/html五、在线示例在线体验https://southjor.github.io/arcgis-examples/lessons/lesson26.html操作说明场景加载上海建筑FeatureLayer与美国地震CSVLayer两个图层。通过「建筑显隐 / 地震显隐」控制各自visible。通过「透明度」按钮在1.0与0.4间切换opacity。点击「仅近景显示」设置maxScale 100000拉远相机后建筑自动隐藏。六、关键 API 说明API说明layer.visible图层显隐booleanlayer.opacity图层透明度0~1VoxelLayer 在 3D 不支持layer.minScale/layer.maxScale可见比例尺范围0表示不限制map.add(layer)加入场景参考链接Layer API七、系列导航⬅️上一篇ArcGIS JS 基础教程25GeoJSONLayer 与 KML 图层➡️下一篇ArcGIS JS 基础教程27DisplayFilter 显示过滤器小贴士visible/opacity是「即时显隐」不影响数据与查询而minScale/maxScale是按相机远近的自动显隐适合用来做性能优化——远景隐藏细节图层可显著降低渲染负担。