mapbox 右键菜单栏

 //函数初始化时要进行监听
function rightMouseMenu(){
                    var rightMenu = new SFMap.RightMenuControl({
                    className: 'sfmap-ctrl-rightmenu-custom',
                    // 菜单内容
                    menuItems: [
                            {
                                id: '01',
                                content: '<span>添加事件单条</span>',
                                link_id:this.sw_id
                            },
                            {
                                id: '02',
                                content: '<span>添加事件多条</span>',
                                link_id:this.sw_id
                            },
                        ],
                    });
                    window.map.addControl(rightMenu);
                    // 监听点击事件
                    window.map.on('rightmenu.show', function(data) {
                        console.log('菜单显示', rightMenu);
                         const features = window.map.queryRenderedFeatures(data.point, {
                        layers: ['SHAPE'],
                      })//获取选中图层 点 的 数据
                       console.log('features',  features);

                       


                       if(features&&features.length>0){
                           this.sw_id=features[0].properties.sw_id;//获取指定的数据
                           this.sw_id=features[0].properties.sw_id
                       }
                       console.log('rightMenu',  rightMenu);
                    });
                    window.map.on('rightmenu.update', function(data) {
                        console.log('菜单刷新', data);
                    });
                    window.map.on('rightmenu.hide', function() {
                        console.log('菜单隐藏');
                    });
                    window.map.on('rightmenu.click', function(menuItem) {
                        console.log('菜单点击', menuItem);
                        console.log("sw_id",menuItem.target.sw_id)
                    });
            }
posted @   泽泽生龙  阅读(352)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示