MapLibre GL JS第72课：用boxZoomEnd回调选择要素

学习目标掌握用boxZoomEnd回调选择要素的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念使用boxZoomEnd回调通过Shift-拖动选择要素。 完 整 代 码!DOCTYPEhtmlhtmllangenheadtitleSelect features with a boxZoomEnd callback/titlemetapropertyog:descriptioncontent使用 boxZoomEnd 回调通过 Shift 拖动选择要素而不是将地图适配到拖动的框。/metapropertyog:createdcontent2026-02-25/metacharsetutf-8metanameviewportcontentwidthdevice-width, initial-scale1linkrelstylesheethrefhttps://unpkg.com/maplibre-gl5.24.0/dist/maplibre-gl.css/scriptsrchttps://unpkg.com/maplibre-gl5.24.0/dist/maplibre-gl.js/scriptstylebody{margin:0;padding:0;}html, body, #map{height:100%;}#ui{position:absolute;top:10px;left:10px;z-index:1;max-width:360px;padding:8px;border-radius:4px;background:rgba(255,255,255,0.9);font:13px/1.4 sans-serif;}/style/headbodydividmap/divdividuiShift drag withcodeboxZoomEnd/code(no default zoom). Selected:spanidselected-count0/spanbuttonidclear-selectiontypebuttonClear/button/divscriptconstBASE_LAYER_IDearthquakes-base;constSELECTED_LAYER_IDearthquakes-selected;constselectedCountElementdocument.getElementById(selected-count);constmapnewmaplibregl.Map({container:map,style:https://demotiles.maplibre.org/style.json,center:[-100,40],zoom:2.8,boxZoom:{boxZoomEnd:(mapInstance,p0,p1){constfeaturesmapInstance.queryRenderedFeatures([[Math.min(p0.x,p1.x),Math.min(p0.y,p1.y)],[Math.max(p0.x,p1.x),Math.max(p0.y,p1.y)]],{layers:[BASE_LAYER_ID]});constids[...newSet(features.map((feature)feature.id).filter((id)id!null))];setSelectedIds(ids);}}});functionsetSelectedIds(ids){selectedCountElement.textContentString(ids.length);if(map.getLayer(SELECTED_LAYER_ID)){map.setFilter(SELECTED_LAYER_ID,[in,[id],[literal,ids]]);}}document.getElementById(clear-selection).addEventListener(click,()setSelectedIds([]));map.on(load,(){map.addSource(earthquakes,{type:geojson,data:https://maplibre.org/maplibre-gl-js/docs/assets/earthquakes.geojson,promoteId:id});map.addLayer({id:BASE_LAYER_ID,type:circle,source:earthquakes,paint:{circle-radius:4,circle-color:#1f78b4,circle-opacity:0.65}});map.addLayer({id:SELECTED_LAYER_ID,type:circle,source:earthquakes,paint:{circle-radius:6,circle-color:#ff6b00,circle-opacity:0.95},filter:[in,[id],[literal,[]]]});setSelectedIds([]);});/script/body/html 代码解析1. 初始化地图使用new maplibregl.Map()创建地图实例配置美国区域作为初始视图。2. 关键配置项boxZoom配置: 自定义boxZoom行为使用boxZoomEnd回调queryRenderedFeatures(): 查询框选范围内的要素setFilter(): 使用过滤器高亮选中要素Set去重: 使用Set数据结构去除重复ID3. 核心逻辑Shift拖动触发框选模式boxZoomEnd回调中计算框选矩形范围queryRenderedFeatures查询框内所有要素使用filter表达式高亮显示选中要素⚙️ 参数说明参数类型必填说明p0, p1Point是框选矩形对角坐标layersstring[]否只查询指定图层filterexpression-设置图层过滤器 效果说明运行代码后地图显示美国区域包含地震数据点。Shift拖动可以在地图上画出一个选择框框内的地震点会被高亮显示选中数量会在界面顶部显示。点击Clear按钮可清除选择。 常 见 问 题Q1: 框选没有反应A:检查以下几点确认按住了Shift键再拖动检查boxZoom配置是否正确确认数据源包含id字段Q2: 为什么需要Set去重A:同一个要素可能被多个图层引用使用Set去重得到唯一的要素ID列表。Q3: 如何同时选择多个图层A:修改queryRenderedFeatures的layers参数queryRenderedFeatures(bounds,{layers:[layer1,layer2]}) 练习任务基础练习修改选中点的样式颜色、大小进阶挑战添加双击清除选择功能拓展思考如何实现多选累加选择综合实践创建一个框选数据导出功能 最佳实践用户体验: 提供清晰的选择反馈高亮数量统计状态管理: 及时更新选中状态和UI显示性能优化: 使用Set去重避免重复处理交互设计: 提供清除选择的便捷方式数据导出: 支持将选中数据导出为JSON或CSV 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏