在 Mars3d 中实现多点重叠右击选择重叠点菜单

在 Mars3d 中实现多点重叠右击选择重叠点菜单标签Mars3DCesiumVue3三维地图前言最近用 Mars3D 做三维地图项目时遇到个需求地图上加载若干 3D 模型站点当多个站点位置完全重叠同一经纬度时右键弹出选择列表让用户挑哪一个单个 graphic 时弹出详情/定位/删除操作菜单。之前使用算法计算麻烦改为插件方法drillPick一、需求场景地图上加载 12 个城市站点北京1和北京2坐标完全一致用于测试重叠拾取用户右键时命中单个模型菜单 [“详情”, “定位”, “删除”]命中重叠模型如 北京1北京2菜单 [“北京2”, “北京1”]点哪一项就操作哪个没命中模型空地不弹菜单普通scene.pick()只能拿到顶层 graphic要拿到所有命中对象必须用穿透拾取scene.drillPick(position, limit)。二、踩坑drillPick 拿不到 graphic第一直觉代码graphicLayer.on(mars3d.EventType.rightDown,function(event){constpickedmap.scene.drillPick(event.windowPosition,10);console.log(picked);});输出结果picked.length 2✓穿透拾取正确picked[0].id undefined❌按 Cesium 文档pickedObject.id应该返回 primitive id进而能拿到绑定的 graphic 对象。Mars3D 包装后这个字段是空的这是第一个坑。三、破局三个隐藏字段 必须显式开启3.1 关键字段打开 Console 一层层扒primitivepicked[0].primitive._mars3d_graphicId// 2graphic 在图层内的 idpicked[0].primitive._mars3d_layerId// m-0f6db520-...图层 idpicked[0].primitive._id// Cesium 原生 id未设置时也是 undefinedMars3D 把 graphic id 挂在了带_mars3d_前缀的私有字段上。结合map.getLayer(lid).getGraphicById(gid)即可反查constgraphicspicked.map((p){constgidp.primitive?._mars3d_graphicId;constlidp.primitive?._mars3d_layerId;if(gidnull)returnnull;constlayerlid?map.getLayer(lid):graphicLayer;returnlayer?layer.getGraphicById(gid):null;}).filter(Boolean);3.2 必须显式开启穿透拾取这是第二个坑Mars3D 默认allowDrillPick false出于性能考虑必须显式设置newmars3d.graphic.ModelPrimitive({id:i1,name:item.name,position:item.position,allowDrillPick:true,// ← 不开则 drillPick 返回空数组style:{/* ... */},});四、最终实现4.1 右键回调核心 30 行graphicLayer.on(mars3d.EventType.rightDown,function(event){constgraphicevent.graphic;// 穿透拾取limit 给个合理上限constpickedObjectsmap.scene.drillPick(event.windowPosition,20);if(!graphic)return;// 从 drillPick 反查 graphic 实例过滤非 modelPconstgraphicspickedObjects.map((p){constgidp.primitive?._mars3d_graphicId;constlidp.primitive?._mars3d_layerId;if(gidnull)returnnull;constlayerlid?map.getLayer(lid):graphicLayer;returnlayer?layer.getGraphicById(gid):null;}).filter(Boolean).filter((g)g.typemodelP);if(graphics.length0)return;// 多 graphic 重叠 → 聚合选择单个 → 操作菜单if(graphics.length1){handleBindSelectContextMenu(graphic,graphics);}else{handleBindContextMenu(graphic);}});4.2 数据驱动的菜单分发不同类型 graphic 显示不同菜单项新增类型只需加一行constMENU_BY_TYPE{modelP:[{text:详情,action:detail},{text:定位,action:flyTo},{text:删除,action:remove},],default:[{text:详情,action:detail}],};consthandleMenuAction(action,graphic){switch(action){casedetail:console.log(详情:,graphic);break;caseflyTo:graphic.flyTo({duration:1});break;caseremove:graphic.remove();break;default:console.log(未实现:,action);}};consthandleBindContextMenu(graphic){constitemsMENU_BY_TYPE[graphic.type]||MENU_BY_TYPE.default;graphic.bindContextMenu(items.map((item)({text:item.text,callback:()handleMenuAction(item.action,graphic),})));};consthandleBindSelectContextMenu(graphic,graphics){// 多要素聚合每项名 真实 graphic 的 name/attrgraphic.bindContextMenu(graphics.map((g)({text:g.name||g.attr?.remark||#${g.id??},callback:()handleBindContextMenu(g),})));};五、效果验证场景右键菜单成都单 graphic[详情, 定位, 删除]北京1北京2 重叠[北京2, 北京1]南京滁州 重叠[滁州, 南京]空地无模型不弹菜单六、总结四个关键点反查 graphic用primitive._mars3d_graphicId_mars3d_layerId别用pickedObject.id必须开启new ModelPrimitive({ allowDrillPick: true })数据驱动菜单MENU_BY_TYPE表 action 派发新增类型零成本多 graphic 重叠先弹聚合选择菜单再递归绑定详情菜单希望帮到同样用 Mars3D 的朋友。有问题评论区交流