ArcGIS JS 基础教程44要素过滤 definitionExpression零、写在前面一、功能介绍二、功能实现2.1 设置 / 清除过滤2.2 切换后刷新可见数量三、功能应用四、核心代码五、在线示例六、关键 API 说明七、系列导航零、写在前面本系列教程完整目录ArcGIS JS 系列基础教程100个项目常用热门功能在线示例完整可运行的 HTML 示例无需任何环境配置可直接在浏览器中打开体验️专栏导航收藏 关注专栏文章第一时间送达❤️一键三连点赞 评论 收藏一、功能介绍definitionExpression是图层级的持久过滤条件设置后图层只渲染、只统计、只查询满足条件的要素等价于给整个图层加了一个永远生效的where。它和上一课的一次性Query最大的区别是Query第42课临时查询结果用于高亮/列表不改变图层本身显示definitionExpression写死在图层上所有渲染、queryFeatures、queryFeatureCount都自动遵循且可随时切换/清除。适合「按状态看板」「按区域过滤」「图层开关式筛选」等场景。参考官方 FeatureLayer.definitionExpression三维要点definitionExpression与渲染器、featureReduction完全兼容,过滤后的要素仍走同一套 3D 符号与抽稀逻辑。二、功能实现2.1 设置 / 清除过滤// 设置过滤只显示故障设备monitorLayer.definitionExpressionSTATUS 故障;// 清除过滤传 null 即显示全部monitorLayer.definitionExpressionnull;2.2 切换后刷新可见数量functionapplyFilter(expr){monitorLayer.definitionExpressionexpr||null;// null 表示不过滤// 等图层视图刷新后queryFeatureCount 会自动遵循新条件view.whenLayerView(monitorLayer).then(updateVisibleCount);}asyncfunctionupdateVisibleCount(){constnawaitmonitorLayer.queryFeatureCount();// 自动遵循 definitionExpressiondocument.getElementById(visCount).textContentn;}三、功能应用应用场景说明状态看板一键只看「故障 / 预警 / 正常」区域过滤图层级按行政区/网格筛选联动下钻点击列表 → 设置图层过滤与查询共存过滤负责「显示什么」Query 负责「临时检索」四、核心代码完整代码已保存至sample/lesson44_definition_expression.html可直接在浏览器打开。!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title第44课要素过滤 definitionExpression/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;color:#333;}.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}.btn-row button{flex:1;min-width:70px;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.8;}.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第44课要素过滤 definitionExpression/h1divclasscontrol-panelh3 图层要素过滤/h3divclassbtn-rowbuttondata-filter全部/buttonbuttondata-filterSTATUS 故障仅故障/button/divdivclassbtn-rowbuttondata-filterSTATUS 预警仅预警/buttonbuttondata-filterSTATUS 正常仅正常/button/divdivclassinfo-carddiv当前过滤spanclassvalidexprText无显示全部/span/divdiv可见数量spanclassvalidvisCount0/span/div/div/divdivclassstatus-textidstatusTextdefinitionExpression | 图层级要素过滤/divdividmapContainer/divscripttypemoduleconst[Map,SceneView,FeatureLayer,Graphic]await$arcgis.import([arcgis/core/Map.js,arcgis/core/views/SceneView.js,arcgis/core/layers/FeatureLayer.js,arcgis/core/Graphic.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.498,latitude:31.205,z:4000},heading:20,tilt:60}});// 监测点图层带 STATUS 字段 constmonitorLayer((){constcats[A类,B类,C类];constcolors{A类:[227,74,51],B类:[56,135,220],C类:[60,180,110]};conststatuses[正常,预警,故障];constgraphics[];for(leti0;i120;i){graphics.push(newGraphic({geometry:{type:point,x:121.46Math.random()*0.08,y:31.18Math.random()*0.06,z:80Math.random()*400,spatialReference:{wkid:4326}},attributes:{OBJECTID:i1,NAME:监测点(i1),CATEGORY:cats[i%3],STATUS:statuses[Math.floor(Math.random()*3)]}}));}returnnewFeatureLayer({source:graphics,objectIdField:OBJECTID,fields:[{name:OBJECTID,type:oid},{name:NAME,type:string},{name:CATEGORY,type:string},{name:STATUS,type:string}],geometryType:point,spatialReference:{wkid:4326},title:实时监测点,elevationInfo:{mode:relative-to-ground},renderer:{type:unique-value,field:CATEGORY,uniqueValueInfos:cats.map(cat({value:cat,symbol:{type:point-3d,symbolLayers:[{type:object,resource:{primitive:sphere},width:200,height:200,depth:200,material:{color:colors[cat]}}]}}))}});})();map.add(monitorLayer);// 统计当前 definitionExpression 下的可见数量asyncfunctionupdateVisibleCount(){constnawaitmonitorLayer.queryFeatureCount();document.getElementById(visCount).textContentn;}// definitionExpression 过滤核心 functionapplyFilter(expr){monitorLayer.definitionExpressionexpr||null;// null 表示不过滤document.getElementById(exprText).textContentexpr||无显示全部;setStatus(expr?已应用过滤expr:已清除过滤显示全部);// 等图层刷新后更新计数view.whenLayerView(monitorLayer).then(()updateVisibleCount());}awaitview.when();updateVisibleCount();awaitmonitorLayer.when();view.goTo(monitorLayer.fullExtent,{duration:1500}).catch((){});setStatus(definitionExpression 就绪 | 选择过滤条件);functionsetStatus(msg){document.getElementById(statusText).textContentmsg;}document.querySelectorAll([data-filter]).forEach(btn{btn.addEventListener(click,(){document.querySelectorAll([data-filter]).forEach(bb.classList.remove(on));btn.classList.add(on);applyFilter(btn.dataset.filter);});});/script/body/html五、在线示例在线体验https://southjor.github.io/arcgis-examples/lessons/lesson44.html操作说明场景加载 120 个带STATUS字段的监测点。点击「仅故障 / 仅预警 / 仅正常 / 全部」按钮切换definitionExpression。面板中的「可见数量」由queryFeatureCount实时统计自动遵循当前过滤条件。六、关键 API 说明API说明layer.definitionExpression图层级持久过滤SQL where 字符串layer.definitionExpression null清除过滤显示全部layer.queryFeatureCount()统计自动遵循 definitionExpressionview.whenLayerView(layer)等待图层视图刷新后再读计数参考链接FeatureLayer.definitionExpression七、系列导航⬅️上一篇ArcGIS JS 基础教程43空间查询 Spatial Query➡️下一篇ArcGIS JS 基础教程45鼠标悬停显示信息小贴士definitionExpression是「图层级看板」的首选,它一旦设置渲染、统计、查询全部自动收敛到过滤结果比每次手动Query更省心。它和一次性Query不是替代关系而是「常驻过滤」与「临时检索」的分工。
