时间戳

首页 > 解决方案 > 在 LeafletJS 地图中禁用左右按钮平移

javascript - 在 LeafletJS 地图中禁用左右按钮平移

问题描述

我正在学习如何将 Leafletjs 映射添加到 GUI 以及如何使用 JS 来做到这一点。我需要禁用鼠标左右键平移或拖动。

问题

我可以通过在事件侦听器外部使用来禁用所有平移或拖动map.dragging.disable()，但我不能只禁用左键和右键平移。我的猜测是我没有捕捉到正确的事件或者我的 if 语句不起作用。

任何指导或帮助将不胜感激

预期行为

我想使用鼠标的左键或右键禁用平移，但继续使用鼠标中键进行平移。

到目前为止我尝试过的

var map;

           function initialize(){
           
           // ADD MAP
           map = L.map('map',{zoomSnap: 0, zoomControl: false, preferCanvas: true, inertia: false, doubleClickZoom: false, wheelPxPerZoomLevel: 30});

           //GET TILE
            L.tileLayer('https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}', 
       {
           attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
           maxZoom: 10000, reuseTiles: true, unloadInvisibleTiles: true

       }
       ).addTo(map);            
        
            
          // DISABLE RIGTH CLICK MENU 
             document.addEventListener('contextmenu', event => event.preventDefault());
             
          // DISABLE LEFT AND RIGHT PANNIG
          document.addEventListener('mousemove', (e) => {
        
             // e.button === 0: the left button is clicked
             // e.button === 1: the middle button is clicked
             // e.button === 2: the right button is clicked
             // e.button === 3: the `Browser Back` button is clicked
             // e.button === 4: the `Browser Forward` button is clicked
        
          
          if (e.button != 1) {
            map.dragging.disable(); 
            } else {
            map.dragging.enable();
            }
          
                    
          }
          );
    
               
           // ADD SCALE
           var scale = L.control.scale();
           scale.addTo(map);
           
           //SET BOUNDS
           var southWest = new L.LatLng(-2.9125325724709503,-79.03575842000764),
           northEast = new L.LatLng(-2.9112682582356557,-79.03332932221451),
           bounds = new L.LatLngBounds(southWest, northEast);
           map.fitBounds(bounds, {padding: [0, 0]});

           // ADD REFERENCES
           L.marker([-2.9116417526879506,-79.0357487930094]).addTo(map);
           L.marker([-2.9119463620853674,-79.0349189315595]).addTo(map);
           L.marker([-2.9124030520806627,-79.03362467818663]).addTo(map);
           L.marker([-2.915692679208955,-79.02077600732176]).addTo(map);
           
                     
           // PyQt5 SIGNAL
           new QWebChannel(qt.webChannelTransport, function (channel) {
               window.MainWindow = channel.objects.MainWindow;
               if(typeof MainWindow != 'undefined') {
                   var onMapMove = function() 
                   { 
                   MainWindow.onMapMove(map.getBounds().getWest(), map.getBounds().getNorth(), map.getBounds().getSouth(), map.getBounds().getEast())
                   };
                   map.on('move', onMapMove);
                   onMapMove();
               }
           });
           }

标签： javascriptleaflet

解决方案

解决方案

对于像我这样刚学习 JS 的人，@IvanSanchez 建议的网站很有帮助，这是为我解决问题的代码。( developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button ) developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons

其背后的逻辑是：

每次按下按钮 0 或 2 (mousedown) 时，它都会禁用地图平移，但是当它恢复时 (mouseup) 会再次启用地图平移。

                // e.button === 0: the left button is clicked
                // e.button === 1: the middle button is clicked
                // e.button === 2: the right button is clicked
                // e.button === 3: the `Browser Back` button is clicked
                // e.button === 4: the `Browser Forward` button is clicked
             
                // DISABLE LEFT AND RIGHT PANNIG
                document.addEventListener('mousedown', (e) => {
                    if (e.button != 1) {map.dragging.disable();}
                }
                );
    
                document.addEventListener('mouseup', (e) => {
                    if (e.button != 1) {map.dragging.enable();} 
                }
                );

推荐阅读