leaflet-contxtmenu 右键菜单叠加问题

已于 2023-08-16 14:43:08 修改
阅读量683 收藏 1
点赞数 3
文章标签： vue.js javascript 前端
于 2023-04-21 15:14:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lycoris_Red/article/details/130289379
版权

参考：使leaflet右键插件的问题 - SuperMap技术问答社区

解决办法：

this._map.on(
                {
                    contextmenu: this._show,
                    mousedown: this._hide,
                    zoomstart: this._hide
                },
                this
            );

leaflet.contextmenu.js 完整代码

/* eslint-disable no-unused-vars */
/* eslint-disable no-undef */
/*
	Leaflet.contextmenu, a context menu for Leaflet.
	(c) 2015, Adam Ratcliffe, GeoSmart Maps Limited

	@preserve
*/

(function (factory) {
    // Packaging/modules magic dance
    var L;
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['leaflet'], factory);
    } else if (typeof module === 'object' && typeof module.exports === 'object') {
        // Node/CommonJS
        L = require('leaflet');
        module.exports = factory(L);
    } else {
        // Browser globals
        if (typeof window.L === 'undefined') {
            throw new Error('Leaflet must be loaded first');
        }
        factory(window.L);
    }
})(function (L) {
    L.Map.mergeOptions({
        contextmenuItems: []
    });

    L.Map.ContextMenu = L.Handler.extend({
        _touchstart: L.Browser.msPointer ? 'MSPointerDown' : L.Browser.pointer ? 'pointerdown' : 'touchstart',

        statics: {
            BASE_CLS: 'leaflet-contextmenu'
        },

        initialize: function (map) {
            L.Handler.prototype.initialize.call(this, map);

            this._items = [];
            this._visible = false;

            var container = (this._container = L.DomUtil.create('div', L.Map.ContextMenu.BASE_CLS, map._container));
            container.style.zIndex = 10000;
            container.style.position = 'absolute';

            if (map.options.contextmenuWidth) {
                container.style.width = map.options.contextmenuWidth + 'px';
            }

            this._createItems();

            L.DomEvent.on(container, 'click', L.DomEvent.stop)
                .on(container, 'mousedown', L.DomEvent.stop)
                .on(container, 'dblclick', L.DomEvent.stop)
                .on(container, 'contextmenu', L.DomEvent.stop);
        },

        addHooks: function () {
            var container = this._map.getContainer();

            L.DomEvent.on(container, 'mouseleave', this._hide, this).on(document, 'keydown', this._onKeyDown, this);

            if (L.Browser.touch) {
                L.DomEvent.on(document, this._touchstart, this._hide, this);
            }

            this._map.on(
                {
                    contextmenu: this._show,
                    mousedown: this._hide,
                    movestart: this._hide,
                    zoomstart: this._hide
                },
                this
            );
        },

        removeHooks: function () {
            var container = this._map.getContainer();

            L.DomEvent.off(container, 'mouseleave', this._hide, this).off(document, 'keydown', this._onKeyDown, this);

            if (L.Browser.touch) {
                L.DomEvent.off(document, this._touchstart, this._hide, this);
            }

            this._map.off(
                {
                    contextmenu: this._show,
                    mousedown: this._hide,
                    movestart: this._hide,
                    zoomstart: this._hide
                },
                this
            );
        },

        showAt: function (point, data) {
            if (point instanceof L.LatLng) {
                point = this._map.latLngToContainerPoint(point);
            }
            this._showAtPoint(point, data);
        },

        hide: function () {
            this._hide();
        },

        addItem: function (options) {
            return this.insertItem(options);
        },

        insertItem: function (options, index) {
            index = index !== undefined ? index : this._items.length;

            var item = this._createItem(this._container, options, index);

            this._items.push(item);

            this._sizeChanged = true;

            this._map.fire('contextmenu.additem', {
                contextmenu: this,
                el: item.el,
                index: index
            });

            return item.el;
        },

        removeItem: function (item) {
            var container = this._container;

            if (!isNaN(item)) {
                item = container.children[item];
            }

            if (item) {
                this._removeItem(L.Util.stamp(item));

                this._sizeChanged = true;

                this._map.fire('contextmenu.removeitem', {
                    contextmenu: this,
                    el: item
                });

                return item;
            }

            return null;
        },

        removeAllItems: function () {
            var items = this._container.children,
                item;

            while (items.length) {
                item = items[0];
                this._removeItem(L.Util.stamp(item));
            }
            return items;
        },

        hideAllItems: function () {
            var item, i, l;

            for (i = 0, l = this._items.length; i < l; i++) {
                item = this._items[i];
                item.el.style.display = 'none';
            }
        },

        showAllItems: function () {
            var item, i, l;

            for (i = 0, l = this._items.length; i < l; i++) {
                item = this._items[i];
                item.el.style.display = '';
            }
        },

        setDisabled: function (item, disabled) {
            var container = this._container,
                itemCls = L.Map.ContextMenu.BASE_CLS + '-item';

            if (!isNaN(item)) {
                item = container.children[item];
            }

            if (item && L.DomUtil.hasClass(item, itemCls)) {
                if (disabled) {
                    L.DomUtil.addClass(item, itemCls + '-disabled');
                    this._map.fire('contextmenu.disableitem', {
                        contextmenu: this,
                        el: item
                    });
                } else {
                    L.DomUtil.removeClass(item, itemCls + '-disabled');
                    this._map.fire('contextmenu.enableitem', {
                        contextmenu: this,
                        el: item
                    });
                }
            }
        },

        isVisible: function () {
            return this._visible;
        },

        _createItems: function () {
            var itemOptions = this._map.options.contextmenuItems,
                item,
                i,
                l;

            for (i = 0, l = itemOptions.length; i < l; i++) {
                this._items.push(this._createItem(this._container, itemOptions[i]));
            }

            this._map.on(
                {
                    contextmenu: this._show,
                    mousedown: this._hide,
                    zoomstart: this._hide
                },
                this
            );
        },

        _createItem: function (container, options, index) {
            if (options.separator || options === '-') {
                return this._createSeparator(container, index);
            }

            var itemCls = L.Map.ContextMenu.BASE_CLS + '-item',
                cls = options.disabled ? itemCls + ' ' + itemCls + '-disabled' : itemCls,
                el = this._insertElementAt('a', cls, container, index),
                callback = this._createEventHandler(el, options.callback, options.context, options.hideOnSelect),
                icon = this._getIcon(options),
                iconCls = this._getIconCls(options),
                html = '';

            if (icon) {
                html = '<img class="' + L.Map.ContextMenu.BASE_CLS + '-icon" src="' + icon + '"/>';
            } else if (iconCls) {
                html = '<span class="' + L.Map.ContextMenu.BASE_CLS + '-icon ' + iconCls + '"></span>';
            }

            el.innerHTML = html + options.text;
            el.href = '#';

            L.DomEvent.on(el, 'mouseover', this._onItemMouseOver, this)
                .on(el, 'mouseout', this._onItemMouseOut, this)
                .on(el, 'mousedown', L.DomEvent.stopPropagation)
                .on(el, 'click', callback);

            if (L.Browser.touch) {
                L.DomEvent.on(el, this._touchstart, L.DomEvent.stopPropagation);
            }

            // Devices without a mouse fire "mouseover" on tap, but never “mouseout"
            if (!L.Browser.pointer) {
                L.DomEvent.on(el, 'click', this._onItemMouseOut, this);
            }

            return {
                id: L.Util.stamp(el),
                el: el,
                callback: callback
            };
        },

        _removeItem: function (id) {
            var item, el, i, l, callback;

            for (i = 0, l = this._items.length; i < l; i++) {
                item = this._items[i];

                if (item.id === id) {
                    el = item.el;
                    callback = item.callback;

                    if (callback) {
                        L.DomEvent.off(el, 'mouseover', this._onItemMouseOver, this)
                            .off(el, 'mouseover', this._onItemMouseOut, this)
                            .off(el, 'mousedown', L.DomEvent.stopPropagation)
                            .off(el, 'click', callback);

                        if (L.Browser.touch) {
                            L.DomEvent.off(el, this._touchstart, L.DomEvent.stopPropagation);
                        }

                        if (!L.Browser.pointer) {
                            L.DomEvent.on(el, 'click', this._onItemMouseOut, this);
                        }
                    }

                    this._container.removeChild(el);
                    this._items.splice(i, 1);

                    return item;
                }
            }
            return null;
        },

        _createSeparator: function (container, index) {
            var el = this._insertElementAt('div', L.Map.ContextMenu.BASE_CLS + '-separator', container, index);

            return {
                id: L.Util.stamp(el),
                el: el
            };
        },

        _createEventHandler: function (el, func, context, hideOnSelect) {
            var me = this,
                map = this._map,
                disabledCls = L.Map.ContextMenu.BASE_CLS + '-item-disabled',
                hideOnSelect = hideOnSelect !== undefined ? hideOnSelect : true;

            return function (e) {
                if (L.DomUtil.hasClass(el, disabledCls)) {
                    return;
                }

                if (hideOnSelect) {
                    me._hide();
                }

                if (func) {
                    func.call(context || map, me._showLocation);
                }

                me._map.fire('contextmenu.select', {
                    contextmenu: me,
                    el: el
                });
            };
        },

        _insertElementAt: function (tagName, className, container, index) {
            var refEl,
                el = document.createElement(tagName);

            el.className = className;

            if (index !== undefined) {
                refEl = container.children[index];
            }

            if (refEl) {
                container.insertBefore(el, refEl);
            } else {
                container.appendChild(el);
            }

            return el;
        },

        _show: function (e) {
            this._showAtPoint(e.containerPoint, e);
        },

        _showAtPoint: function (pt, data) {
            if (this._items.length) {
                var map = this._map,
                    layerPoint = map.containerPointToLayerPoint(pt),
                    latlng = map.layerPointToLatLng(layerPoint),
                    event = L.extend(data || {}, { contextmenu: this });

                this._showLocation = {
                    latlng: latlng,
                    layerPoint: layerPoint,
                    containerPoint: pt
                };

                if (data && data.relatedTarget) {
                    this._showLocation.relatedTarget = data.relatedTarget;
                }

                this._setPosition(pt);

                if (!this._visible) {
                    this._container.style.display = 'block';
                    this._visible = true;
                }

                this._map.fire('contextmenu.show', event);
            }
        },

        _hide: function () {
            if (this._visible) {
                this._visible = false;
                this._container.style.display = 'none';
                this._map.fire('contextmenu.hide', { contextmenu: this });
            }
        },

        _getIcon: function (options) {
            return (L.Browser.retina && options.retinaIcon) || options.icon;
        },

        _getIconCls: function (options) {
            return (L.Browser.retina && options.retinaIconCls) || options.iconCls;
        },

        _setPosition: function (pt) {
            var mapSize = this._map.getSize(),
                container = this._container,
                containerSize = this._getElementSize(container),
                anchor;

            if (this._map.options.contextmenuAnchor) {
                anchor = L.point(this._map.options.contextmenuAnchor);
                pt = pt.add(anchor);
            }

            container._leaflet_pos = pt;

            if (pt.x + containerSize.x > mapSize.x) {
                container.style.left = 'auto';
                container.style.right = Math.min(Math.max(mapSize.x - pt.x, 0), mapSize.x - containerSize.x - 1) + 'px';
            } else {
                container.style.left = Math.max(pt.x, 0) + 'px';
                container.style.right = 'auto';
            }

            if (pt.y + containerSize.y > mapSize.y) {
                container.style.top = 'auto';
                container.style.bottom =
                    Math.min(Math.max(mapSize.y - pt.y, 0), mapSize.y - containerSize.y - 1) + 'px';
            } else {
                container.style.top = Math.max(pt.y, 0) + 'px';
                container.style.bottom = 'auto';
            }
        },

        _getElementSize: function (el) {
            var size = this._size,
                initialDisplay = el.style.display;

            if (!size || this._sizeChanged) {
                size = {};

                el.style.left = '-999999px';
                el.style.right = 'auto';
                el.style.display = 'block';

                size.x = el.offsetWidth;
                size.y = el.offsetHeight;

                el.style.left = 'auto';
                el.style.display = initialDisplay;

                this._sizeChanged = false;
            }

            return size;
        },

        _onKeyDown: function (e) {
            var key = e.keyCode;

            // If ESC pressed and context menu is visible hide it
            if (key === 27) {
                this._hide();
            }
        },

        _onItemMouseOver: function (e) {
            L.DomUtil.addClass(e.target || e.srcElement, 'over');
        },

        _onItemMouseOut: function (e) {
            L.DomUtil.removeClass(e.target || e.srcElement, 'over');
        }
    });

    L.Map.addInitHook('addHandler', 'contextmenu', L.Map.ContextMenu);
    L.Mixin.ContextMenu = {
        bindContextMenu: function (options) {
            L.setOptions(this, options);
            this._initContextMenu();

            return this;
        },

        unbindContextMenu: function () {
            this.off('contextmenu', this._showContextMenu, this);

            return this;
        },

        addContextMenuItem: function (item) {
            this.options.contextmenuItems.push(item);
        },

        removeContextMenuItemWithIndex: function (index) {
            var items = [];
            for (var i = 0; i < this.options.contextmenuItems.length; i++) {
                if (this.options.contextmenuItems[i].index == index) {
                    items.push(i);
                }
            }
            var elem = items.pop();
            while (elem !== undefined) {
                this.options.contextmenuItems.splice(elem, 1);
                elem = items.pop();
            }
        },

        replaceContextMenuItem: function (item) {
            this.removeContextMenuItemWithIndex(item.index);
            this.addContextMenuItem(item);
        },

        _initContextMenu: function () {
            this._items = [];

            this.on('contextmenu', this._showContextMenu, this);
        },

        _showContextMenu: function (e) {
            var itemOptions, data, pt, i, l;

            if (this._map.contextmenu) {
                data = L.extend({ relatedTarget: this }, e);

                pt = this._map.mouseEventToContainerPoint(e.originalEvent);

                if (!this.options.contextmenuInheritItems) {
                    this._map.contextmenu.hideAllItems();
                }

                for (i = 0, l = this.options.contextmenuItems.length; i < l; i++) {
                    itemOptions = this.options.contextmenuItems[i];
                    this._items.push(this._map.contextmenu.insertItem(itemOptions, itemOptions.index));
                }

                this._map.once('contextmenu.hide', this._hideContextMenu, this);

                this._map.contextmenu.showAt(pt, data);
            }
        },

        _hideContextMenu: function () {
            var i, l;

            for (i = 0, l = this._items.length; i < l; i++) {
                this._map.contextmenu.removeItem(this._items[i]);
            }
            this._items.length = 0;

            if (!this.options.contextmenuInheritItems) {
                this._map.contextmenu.showAllItems();
            }
        }
    };

    var classes = [L.Marker, L.Path],
        defaultOptions = {
            contextmenu: false,
            contextmenuItems: [],
            contextmenuInheritItems: true
        },
        cls,
        i,
        l;

    for (i = 0, l = classes.length; i < l; i++) {
        cls = classes[i];

        // L.Class should probably provide an empty options hash, as it does not test
        // for it here and add if needed
        if (!cls.prototype.options) {
            cls.prototype.options = defaultOptions;
        } else {
            cls.mergeOptions(defaultOptions);
        }

        cls.addInitHook(function () {
            if (this.options.contextmenu) {
                this._initContextMenu();
            }
        });

        cls.include(L.Mixin.ContextMenu);
    }
    return L.Map.ContextMenu;
});

小六路
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
003：vue+leaflet 清除所有图层的通用方法
大剑师兰特的GIS世界
09-08 2562
本示例的目的是介绍演示如何在vue+leaflet中添加各种地图，并清除所有的图层。貌似很简单的一个示例，但是在学习和工作中非常重要，往往会根据项目的需要来删除图层，达到预期效果。点击查看本专栏内容目录列表。
leaflet-rotate：Leaflet插件，允许添加旋转功能以映射图块
02-13
单张旋转一个Leaflet插件，允许向地图图块添加旋转功能有关工作示例，请参见以下 最初基于IvánSánchezOrtega的（请参阅： ） 旁注： 请注意，这是一个概念证明，显示了如何更改核心传单库以及如何将旋转功能用作...
Leaflet中使用Leaflet.contextmenu插件实现地图上添加鼠标右键菜单
BADAO_LIUMANG_QIZHI的博客
01-11 2610
场景 Leaflet快速入门与加载OSM显示地图： Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上，怎样使用Leaflet.contextmenu插件实现地图上显示右键菜单效果如下 注： 博客：BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、插件地址 GitHub
前端项目-leaflet-contextmenu.zip
09-03
前端项目-leaflet-contextmenu,A context menu for Leaflet
探索Leaflet的新维度：Leaflet.contextmenu
gitblog_00006的博客
05-08 494
探索Leaflet的新维度：Leaflet.contextmenu 项目地址:https://gitcode.com/aratcliffe/Leaflet.contextmenu 在Web地图开发中，Leaflet库以其轻量级和强大的特性深受开发者喜爱。今天，我们向您推荐一个能显著提升用户体验的开源插件——Leaflet.contextmenu。这个插件为您的Leaflet地图添加了右键上下文菜单...
Leaflet左键及右键事件
butebeizhanghao的博客
08-20 1884
Leaflet左键及右键事件 L.supermap.tiledMapLayer(url,{layers:"layer1"}).addTo(map); map.on("click",function(evt){ alert("左键点击！") }) map.on("contextmenu",function(evt){ alert("右键点击！") })
leaflet的使用
weixin_58775072的博客
08-28 1561
【代码】leaflet的使用。
Vue+element-ui添加自定义右键菜单的方法示例
01-21
1、在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件 ($event)> ...... 2、在页面编写右键菜单内容 <ul v-show=visible xss=removed class=contextmenu> 上移一层 下移一层 3、在data()中...
leaflet-ant-path_leaflet_
10-03
本篇文章将详细探讨“leaflet-ant-path”这个插件以及它在Leaflet中的应用。 “leaflet-ant-path”是一个专门为Leaflet设计的插件，它提供了动态路径效果，能够模拟汽车、火车轨道、飞机航线等物体的移动轨迹。这种...
leaflet-search:在传单地图中搜索内容
04-14
npm install --save leaflet-search 选项 选项 默认 描述 网址 '' 通过ajax请求进行搜索的网址，例如：“ search.php？q = {s}”。 可以用作返回字符串以进行动态参数设置的函数 层 空值 搜索标记所在的图层（是L....
Leaflet.SlideMenu:Leaflet的简单幻灯片菜单
05-07
Leaflet.SlideMenu Leaflet的简单幻灯片菜单。 当您单击菜单按钮时，菜单将显示为滑动。 请将innerHTML设置为幻灯片菜单。 用法 默认情况下，此控件对图标使用 。 要使用，包括： < link rel =" stylesheet " href =" http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css " > 包括CSS： < link rel =" stylesheet " href =" L.Control.SlideMenu.css " > 包括JavaScript： < script src =" L.Control.SlideMenu.js " > </ script > 用法示例： L . control . slideMenu ( '<p
leafletjs各种demo
07-06
leafletjs各种demo，所有的gis地图都很齐全
ios-第三方库ContextMenu使用笔记.zip
07-11
第三方库ContextMenu的使用方法，以及在使用时遇到一些问题和解决办法。
谷歌地图右键菜单功能
12-11
谷歌地图，右键弹出菜单功能，实现了地图map的右键菜单和marker的右键菜单，这是参考别人的代码，大家可以在次基础上做一些修改，实现类似的功能
leaflet-plugins：Leaflet库的插件
02-21
传单插件 什么 ？ 杂项Leaflet插件，用于需要显示路线信息并需要来自不同提供商的卫星图像的服务。 当前它包括： 向量层（ layer/vector/ ）： GPX ... cdnjs： ://cdnjs.com/libraries/leaflet-p
leafletjs右键菜单
弱鸡小码农
11-15 4493
官方右键插件示例代码中是创建地图同时给入右键菜单参数。var map = L.map('map', { contextmenu: true, contextmenuWidth: 140, contextmenuItems: [{ text: 'Show coordinates', callback: showCoordinates },
基于leaflet 的高德离线地图/瓦片地图，以及简单的自定义样式、限制可视范围、右键菜单
zhuanggenhua的博客
11-14 2263
/</
Leaflet 入门教程（八）：交互事件篇
最新发布
大剑师兰特的GIS世界
05-14 1660
在Leaflet中，与地图交互密切相关的事件方法让开发者能够捕捉用户的操作并作出响应。以下是一些常用的事件交互方法，以及它们触发的时机。
vue3中引入leaflet-cion-pulse
04-05
要在Vue3中引入leaflet-icon-pulse，可以按照以下步骤进行操作： 1. 安装leaflet-icon-pulse 可以使用npm或yarn安装leaflet-icon-pulse： ``` npm install leaflet-icon-pulse ``` 或 ``` yarn add leaflet-icon-pulse ``` 2. 在Vue组件中引入leaflet-icon-pulse 在Vue组件中引入leaflet-icon-pulse，可以使用以下代码： ``` import L from 'leaflet'; import 'leaflet-icon-pulse/dist/l-icon-pulse.css'; // 引入样式文件 import { IconPulse } from 'leaflet-icon-pulse'; L.Icon.Pulse = IconPulse; L.icon.pulse = function(options) { return new L.Icon.Pulse(options); }; ``` 3. 使用Pulse图标 您可以使用以下代码将Pulse图标添加到地图中： ``` const pulseIcon = L.icon.pulse({iconSize: [20, 20], color: 'red'}); L.marker([51.5, -0.09], {icon: pulseIcon}).addTo(map); ``` 这将在地图上添加一个红色的Pulse图标。您可以根据需要调整大小和颜色。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值