ArcGIS JS 基础教程（38）：三维要素聚合 FeatureReduction

ArcGIS JS 基础教程38三维要素聚合 FeatureReduction零、写在前面一、功能介绍二、功能实现2.1 开启三维抽稀聚合2.2 动态开关聚合三、功能应用四、核心代码五、在线示例六、关键 API 说明七、系列导航零、写在前面本系列教程完整目录ArcGIS JS 系列基础教程100个项目常用热门功能在线示例完整可运行的 HTML 示例无需任何环境配置可直接在浏览器中打开体验️专栏导航收藏 关注专栏文章第一时间送达❤️一键三连点赞 评论 收藏一、功能介绍当图层包含成千上万个点位如全国加油站、充电桩、监测站时直接全部渲染会造成视觉混乱且拖慢渲染性能。FeatureReduction要素约简/聚合就是为解决海量点重叠而生的能力。需要特别注意二维MapView与三维SceneView支持的聚合类型不同cluster点聚合把邻近点合并为一个带计数的聚合圆,仅 MapView 支持。selection抽稀/去重叠在屏幕空间对重叠点做「抽稀」只保留代表点、隐藏被压盖的点缩放时自动重算,SceneView3D使用这一种拉远时隐藏重叠点、拉近时重新显现。因此在三维场景中做点位抽稀应使用featureReduction: { type: selection }。参考FeatureReductionSelection 3D 点抽稀示例三维要点selection抽稀是屏幕空间行为无需修改数据相机拉远时重叠点被隐藏、拉近时逐渐显现兼顾了可读性与性能。官方限制selection仅适用于非贴地non-draped的 Icon 或 Text 符号图层,如果图层elevationInfo用了on-the-ground贴地抽稀不会生效请改用relative-to-ground等模式。二、功能实现2.1 开启三维抽稀聚合constlayernewFeatureLayer({source:graphics,// 1000 个客户端点位objectIdField:ObjectID,geometryType:point,spatialReference:{wkid:4326},fields:[/* ... */],featureReduction:{type:selection}// 3D 抽稀聚合});2.2 动态开关聚合// 开启抽稀layer.featureReduction{type:selection};// 关闭聚合全部渲染layer.featureReductionnull;三、功能应用应用场景说明全国设施点位浏览加油站/充电桩/门店万级点位传感器网络监测密集监测站的清晰展示性能优化减少同屏渲染的要素数量交互友好避免点位重叠导致的误点缩放渐进拉远隐藏重叠点、拉近重新显现四、核心代码完整代码已保存至sample/lesson38_feature_reduction.html可直接在浏览器打开。!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title第38课三维要素聚合 FeatureReduction/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第38课三维要素聚合 FeatureReduction/h1divclasscontrol-panelh3⛽ 加油站点位1000 个/h3divclassbtn-rowbuttonidbtnReduceclasson 开启抽稀/buttonbuttonidbtnAll 全部显示/button/divdivclassinfo-carddiv抽稀方式spanclassvalidmodeselection3D 去重叠/span/divdiv点位总数spanclassval1000/span/divdiv说明spanclassval重叠点自动隐藏拉远更明显/span/div/div/divdivclassstatus-textidstatusTextFeatureReduction | 3D 场景中的点位去重叠抽稀/divdividmapContainer/divscripttypemoduleconst[Map,SceneView,FeatureLayer]await$arcgis.import([arcgis/core/Map.js,arcgis/core/views/SceneView.js,arcgis/core/layers/FeatureLayer.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:116.40,latitude:39.85,z:28000},heading:0,tilt:55}});// 生成 1000 个客户端点位模拟一片密集的加油站点位集中在约 14km×12km 范围确保屏幕上大量重叠 constgraphics[];for(leti1;i1000;i){graphics.push({geometry:{type:point,x:116.30Math.random()*0.15,y:39.78Math.random()*0.11,spatialReference:{wkid:4326}},attributes:{ObjectID:i,name:加油站-i}});}conststationLayernewFeatureLayer({source:graphics,objectIdField:ObjectID,geometryType:point,spatialReference:{wkid:4326},fields:[{name:ObjectID,type:oid},{name:name,alias:名称,type:string}],elevationInfo:{mode:relative-to-ground},renderer:{type:simple,symbol:{type:point-3d,symbolLayers:[{type:icon,resource:{primitive:circle},size:14,material:{color:[230,70,40,0.9]},outline:{color:white,size:1}}]}},// 3D 场景使用 selection 类型抽稀cluster 仅二维支持featureReduction:{type:selection}});map.add(stationLayer);awaitview.when();awaitstationLayer.when();// 把视图范围放大到数据的 5 倍使点位在屏幕中心密集重叠抽稀/全显的差异才看得出来// 若用 goTo(fullExtent) 把点铺满整屏彼此几乎不重叠selection 无内容可隐藏表现就和“全部显示”一样constbigExtstationLayer.fullExtent.clone();constcx(bigExt.xminbigExt.xmax)/2;constcy(bigExt.yminbigExt.ymax)/2;consthw(bigExt.xmax-bigExt.xmin)/2*5;consthh(bigExt.ymax-bigExt.ymin)/2*5;bigExt.xmincx-hw;bigExt.xmaxcxhw;bigExt.ymincy-hh;bigExt.ymaxcyhh;view.goTo(bigExt,{duration:1500}).catch((){});setStatus(已开启 selection 抽稀重叠点位仅保留代表点);functionsetStatus(msg){document.getElementById(statusText).textContentmsg;}// 开启抽稀去重叠document.getElementById(btnReduce).addEventListener(click,function(){stationLayer.featureReduction{type:selection};this.classList.add(on);document.getElementById(btnAll).classList.remove(on);document.getElementById(mode).textContentselection3D 去重叠;setStatus(已开启 selection 抽稀拉远时自动隐藏重叠点);});// 全部显示关闭抽稀document.getElementById(btnAll).addEventListener(click,function(){stationLayer.featureReductionnull;this.classList.add(on);document.getElementById(btnReduce).classList.remove(on);document.getElementById(mode).textContent无全部渲染;setStatus(已关闭抽稀1000 个点位全部渲染);});/script/body/html五、在线示例在线体验https://southjor.github.io/arcgis-examples/lessons/lesson38.html操作说明场景加载 1000 个模拟加油站点位客户端source。示例默认开启selection抽稀featureReduction { type: selection }需要显式配置不是图层的默认行为拉远相机时重叠点被自动隐藏、界面清爽。点击「全部显示」将featureReduction置null可对比全部渲染时的拥挤效果。拉近相机被隐藏的点位会重新显现。六、关键 API 说明API说明featureReduction要素约简配置对象{ type: selection }3D 抽稀SceneView 使用{ type: cluster }点聚合仅 MapView 二维featureReduction null关闭聚合全部渲染参考链接FeatureReductionSelection API七、系列导航⬅️上一篇ArcGIS JS 基础教程37客户端要素创建 FeatureLayer➡️下一篇ArcGIS JS 基础教程39LayerList 图层列表组件小贴士记住「3D 用selection、2D 才用cluster」这条铁律。若在 SceneView 里错误地配置cluster聚合将不会生效。抽稀是屏幕空间行为不改变底层数据查询与统计仍针对全部要素。