问在LeafletJS地图中禁用左键和右键平移
EN

Stack Overflow用户

提问于 2021-10-05 15:05:25

回答 2查看 247关注 0票数 1

我正在学习如何将Leafletjs映射添加到GUI中，以及如何使用JS来实现它。我需要禁用左和右鼠标按钮摇摄或拖动。

问题

我可以通过在事件侦听器之外使用map.dragging.disable()禁用所有的摇摄或拖动，但我不能只禁用左键和右按钮的摇摄。我的猜测是，我没有捕捉到正确的事件，或者我的假设状态不起作用。

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

期望行为

我想禁用使用鼠标左键或右键的摇摄，但是继续使用鼠标中间的摇摄按钮。

到目前为止我尝试过的

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();
               }
           });
           }

javascript

leaflet

大数据产品特惠专场

BI、WeData新客仅9.9元！新客首单1折起！

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-10-05 23:07:19

溶液

对于像我这样正在学习JS的人来说，@IvanSanchez推荐的网站是有帮助的，这就是为我解决这个问题的代码。(developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button) developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons

其背后的逻辑是：

每次按0或2按钮(鼠标向下)，它都会禁用地图摇摄，但当它重新出现时(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();} 
                }
                );

票数 1

Stack Overflow用户

发布于 2021-10-05 15:30:19

此代码将禁用鼠标左键和右键的摇摄。

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();
}