ArcGIS JS 基础教程27DisplayFilter 显示过滤器零、写在前面一、功能介绍二、功能实现2.1 配置 DisplayFilterInfo2.2 运行时切换过滤器三、功能应用四、核心代码五、在线示例六、关键 API 说明七、系列导航零、写在前面本系列教程完整目录ArcGIS JS 系列基础教程100个项目常用热门功能在线示例完整可运行的 HTML 示例无需任何环境配置可直接在浏览器中打开体验️专栏导航收藏 关注专栏文章第一时间送达❤️一键三连点赞 评论 收藏一、功能介绍DisplayFilter显示过滤器用于在图层级限制「哪些要素被渲染显示」但保留全部要素用于查询与分析。这与definitionExpression在数据源层面过滤、会影响查询有本质区别。显示过滤器比definitionExpression更轻量切换时不重新请求数据仅控制渲染适合海量要素的秒级筛选。一个图层可配置多个过滤器通过DisplayFilterInfo的mode与activeFilterId控制激活哪一个。参考DisplayFilter API | DisplayFilterInfo API⚠️5.0 正确用法通过featureLayer.displayFilterInfo一个DisplayFilterInfo配置where是 SQL 子句属性不是sqlWhere也没有apply()方法。二、功能实现2.1 配置 DisplayFilterInfoconstDisplayFilterawait$arcgis.import(arcgis/core/layers/support/DisplayFilter.js);constDisplayFilterInfoawait$arcgis.import(arcgis/core/layers/support/DisplayFilterInfo.js);buildingsLayer.displayFilterInfonewDisplayFilterInfo({mode:manual,// 手动切换filters:[newDisplayFilter({id:all,title:全部建筑,where:11}),newDisplayFilter({id:tall,title:高层(≥20层),where:floor 20}),newDisplayFilter({id:mid,title:中层(10-19层),where:floor 10 AND floor 20})],activeFilterId:all// 当前激活的过滤器});buildingsLayer.displayFilterEnabledtrue;// 开启图层显示过滤view.displayFilterEnabledtrue;// 开启视图级显示过滤2.2 运行时切换过滤器// mode 为 manual 时直接改 activeFilterId 即可切换buildingsLayer.displayFilterInfo.activeFilterIdtall;mode: scale时无需手动切换——系统会根据当前比例尺自动匹配minScale/maxScale范围内的过滤器。三、功能应用应用场景说明海量设施秒级筛选千万级要素切换不重新请求性能高按时间段/区域过滤where写时间或行政区划条件多方案对比多个过滤器快速切换查看仅看不查显示过滤不影响queryFeatures结果四、核心代码完整代码已保存至sample/lesson27_display_filter.html可直接在浏览器打开。!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title第27课DisplayFilter 显示过滤器/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第27课DisplayFilter 显示过滤器/h1divclasscontrol-paneldivclasssectionh3 显示过滤器DisplayFilter/h3divclassbtn-rowbuttonidbtnAllclasson️ 全部建筑/buttonbuttonidbtnTall️ 高层 ≥20层/button/divdivclassbtn-rowbuttonidbtnMid 中层 10-19层/buttonbuttonidbtnDisable⏹️ 关闭过滤/button/div/divdivclassinfo-carddiv当前过滤spanclassvalidfilterStatus全部建筑/span/divdiv显示过滤不影响查询/div/div/divdivclassstatus-textidstatusTextDisplayFilter | 显示过滤 · 不重新请求数据 · 保留全部要素/divdividmapContainer/divscripttypemoduleconstMapawait$arcgis.import(arcgis/core/Map.js);constSceneViewawait$arcgis.import(arcgis/core/views/SceneView.js);constFeatureLayerawait$arcgis.import(arcgis/core/layers/FeatureLayer.js);constDisplayFilterawait$arcgis.import(arcgis/core/layers/support/DisplayFilter.js);constDisplayFilterInfoawait$arcgis.import(arcgis/core/layers/support/DisplayFilterInfo.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);view.when((){buildingsLayer.when((){// 配置显示过滤器buildingsLayer.displayFilterInfonewDisplayFilterInfo({mode:manual,filters:[newDisplayFilter({id:all,title:全部建筑,where:11}),newDisplayFilter({id:tall,title:高层(≥20层),where:floor 20}),newDisplayFilter({id:mid,title:中层(10-19层),where:floor 10 AND floor 20})],activeFilterId:all});buildingsLayer.displayFilterEnabledtrue;view.displayFilterEnabledtrue;view.goTo(buildingsLayer.fullExtent,{duration:2000,easing:cubic-out});});});functionsetActive(id,label,btn){buildingsLayer.displayFilterInfo.activeFilterIdid;document.querySelectorAll(.btn-row button).forEach(bb.classList.remove(on));btn.classList.add(on);document.getElementById(filterStatus).textContentlabel;document.getElementById(statusText).textContent显示过滤label;}document.getElementById(btnAll).addEventListener(click,function(){setActive(all,全部建筑,this);});document.getElementById(btnTall).addEventListener(click,function(){setActive(tall,高层 ≥20层,this);});document.getElementById(btnMid).addEventListener(click,function(){setActive(mid,中层 10-19层,this);});document.getElementById(btnDisable).addEventListener(click,function(){buildingsLayer.displayFilterEnabledfalse;document.querySelectorAll(.btn-row button).forEach(bb.classList.remove(on));this.classList.add(on);document.getElementById(filterStatus).textContent已关闭;document.getElementById(statusText).textContent显示过滤已关闭显示全部;});/script/body/html五、在线示例在线体验https://southjor.github.io/arcgis-examples/lessons/lesson27.html操作说明场景加载上海建筑配置 3 个显示过滤器全部 / 高层 / 中层。点击「高层 ≥20层」「中层 10-19层」通过activeFilterId即时切换显示且不重新请求数据。点击「关闭过滤」将displayFilterEnabled false恢复显示全部。显示过滤只影响渲染用queryFeatures仍能查到全部要素。六、关键 API 说明API说明featureLayer.displayFilterInfoDisplayFilterInfo含filters、activeFilterId、modenew DisplayFilter({ id, title, where })单个过滤器where为 SQL 子句非sqlWhereDisplayFilterInfo.modemanual手动/scale按比例尺自动featureLayer.displayFilterEnabled开启/关闭图层显示过滤view.displayFilterEnabled开启/关闭视图级显示过滤与definitionExpression区别显示过滤不影响查询切换不重新请求参考链接DisplayFilter API | DisplayFilterInfo API七、系列导航⬅️上一篇ArcGIS JS 基础教程26图层可见性与透明度控制➡️下一篇ArcGIS JS 基础教程28图层渲染顺序管理小贴士显示过滤与definitionExpression最大的不同是——显示过滤只改「看得到什么」不改「数据有什么」。所以当你需要频繁切换显示条件、又不想影响查询统计时首选DisplayFilter。 ArcGIS JS 基础教程（27）：DisplayFilter 显示过滤器
ArcGIS JS 基础教程27DisplayFilter 显示过滤器零、写在前面一、功能介绍二、功能实现2.1 配置 DisplayFilterInfo2.2 运行时切换过滤器三、功能应用四、核心代码五、在线示例六、关键 API 说明七、系列导航零、写在前面本系列教程完整目录ArcGIS JS 系列基础教程100个项目常用热门功能在线示例完整可运行的 HTML 示例无需任何环境配置可直接在浏览器中打开体验️专栏导航收藏 关注专栏文章第一时间送达❤️一键三连点赞 评论 收藏一、功能介绍DisplayFilter显示过滤器用于在图层级限制「哪些要素被渲染显示」但保留全部要素用于查询与分析。这与definitionExpression在数据源层面过滤、会影响查询有本质区别。显示过滤器比definitionExpression更轻量切换时不重新请求数据仅控制渲染适合海量要素的秒级筛选。一个图层可配置多个过滤器通过DisplayFilterInfo的mode与activeFilterId控制激活哪一个。参考DisplayFilter API | DisplayFilterInfo API⚠️5.0 正确用法通过featureLayer.displayFilterInfo一个DisplayFilterInfo配置where是 SQL 子句属性不是sqlWhere也没有apply()方法。二、功能实现2.1 配置 DisplayFilterInfoconstDisplayFilterawait$arcgis.import(arcgis/core/layers/support/DisplayFilter.js);constDisplayFilterInfoawait$arcgis.import(arcgis/core/layers/support/DisplayFilterInfo.js);buildingsLayer.displayFilterInfonewDisplayFilterInfo({mode:manual,// 手动切换filters:[newDisplayFilter({id:all,title:全部建筑,where:11}),newDisplayFilter({id:tall,title:高层(≥20层),where:floor 20}),newDisplayFilter({id:mid,title:中层(10-19层),where:floor 10 AND floor 20})],activeFilterId:all// 当前激活的过滤器});buildingsLayer.displayFilterEnabledtrue;// 开启图层显示过滤view.displayFilterEnabledtrue;// 开启视图级显示过滤2.2 运行时切换过滤器// mode 为 manual 时直接改 activeFilterId 即可切换buildingsLayer.displayFilterInfo.activeFilterIdtall;mode: scale时无需手动切换——系统会根据当前比例尺自动匹配minScale/maxScale范围内的过滤器。三、功能应用应用场景说明海量设施秒级筛选千万级要素切换不重新请求性能高按时间段/区域过滤where写时间或行政区划条件多方案对比多个过滤器快速切换查看仅看不查显示过滤不影响queryFeatures结果四、核心代码完整代码已保存至sample/lesson27_display_filter.html可直接在浏览器打开。!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title第27课DisplayFilter 显示过滤器/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第27课DisplayFilter 显示过滤器/h1divclasscontrol-paneldivclasssectionh3 显示过滤器DisplayFilter/h3divclassbtn-rowbuttonidbtnAllclasson️ 全部建筑/buttonbuttonidbtnTall️ 高层 ≥20层/button/divdivclassbtn-rowbuttonidbtnMid 中层 10-19层/buttonbuttonidbtnDisable⏹️ 关闭过滤/button/div/divdivclassinfo-carddiv当前过滤spanclassvalidfilterStatus全部建筑/span/divdiv显示过滤不影响查询/div/div/divdivclassstatus-textidstatusTextDisplayFilter | 显示过滤 · 不重新请求数据 · 保留全部要素/divdividmapContainer/divscripttypemoduleconstMapawait$arcgis.import(arcgis/core/Map.js);constSceneViewawait$arcgis.import(arcgis/core/views/SceneView.js);constFeatureLayerawait$arcgis.import(arcgis/core/layers/FeatureLayer.js);constDisplayFilterawait$arcgis.import(arcgis/core/layers/support/DisplayFilter.js);constDisplayFilterInfoawait$arcgis.import(arcgis/core/layers/support/DisplayFilterInfo.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);view.when((){buildingsLayer.when((){// 配置显示过滤器buildingsLayer.displayFilterInfonewDisplayFilterInfo({mode:manual,filters:[newDisplayFilter({id:all,title:全部建筑,where:11}),newDisplayFilter({id:tall,title:高层(≥20层),where:floor 20}),newDisplayFilter({id:mid,title:中层(10-19层),where:floor 10 AND floor 20})],activeFilterId:all});buildingsLayer.displayFilterEnabledtrue;view.displayFilterEnabledtrue;view.goTo(buildingsLayer.fullExtent,{duration:2000,easing:cubic-out});});});functionsetActive(id,label,btn){buildingsLayer.displayFilterInfo.activeFilterIdid;document.querySelectorAll(.btn-row button).forEach(bb.classList.remove(on));btn.classList.add(on);document.getElementById(filterStatus).textContentlabel;document.getElementById(statusText).textContent显示过滤label;}document.getElementById(btnAll).addEventListener(click,function(){setActive(all,全部建筑,this);});document.getElementById(btnTall).addEventListener(click,function(){setActive(tall,高层 ≥20层,this);});document.getElementById(btnMid).addEventListener(click,function(){setActive(mid,中层 10-19层,this);});document.getElementById(btnDisable).addEventListener(click,function(){buildingsLayer.displayFilterEnabledfalse;document.querySelectorAll(.btn-row button).forEach(bb.classList.remove(on));this.classList.add(on);document.getElementById(filterStatus).textContent已关闭;document.getElementById(statusText).textContent显示过滤已关闭显示全部;});/script/body/html五、在线示例在线体验https://southjor.github.io/arcgis-examples/lessons/lesson27.html操作说明场景加载上海建筑配置 3 个显示过滤器全部 / 高层 / 中层。点击「高层 ≥20层」「中层 10-19层」通过activeFilterId即时切换显示且不重新请求数据。点击「关闭过滤」将displayFilterEnabled false恢复显示全部。显示过滤只影响渲染用queryFeatures仍能查到全部要素。六、关键 API 说明API说明featureLayer.displayFilterInfoDisplayFilterInfo含filters、activeFilterId、modenew DisplayFilter({ id, title, where })单个过滤器where为 SQL 子句非sqlWhereDisplayFilterInfo.modemanual手动/scale按比例尺自动featureLayer.displayFilterEnabled开启/关闭图层显示过滤view.displayFilterEnabled开启/关闭视图级显示过滤与definitionExpression区别显示过滤不影响查询切换不重新请求参考链接DisplayFilter API | DisplayFilterInfo API七、系列导航⬅️上一篇ArcGIS JS 基础教程26图层可见性与透明度控制➡️下一篇ArcGIS JS 基础教程28图层渲染顺序管理小贴士显示过滤与definitionExpression最大的不同是——显示过滤只改「看得到什么」不改「数据有什么」。所以当你需要频繁切换显示条件、又不想影响查询统计时首选DisplayFilter。