Question

选择一个区域后，＆＃39; boxzoomend＆＃39;事件已完成，“缩放启动”已经完成。事件是触发器。

任何人都知道如何禁用此缩放事件？

map.on('boxzoomend', function(e) {
console.log('box zoom end', e);});


map.on('zoomstart', function(e) {
console.log('zoom start', e);});

请参阅此演示：http://jsfiddle.net/5VLJU/324/

我不想在选择区域后进行缩放，我想使用缩放框功能来选择将在所选区域内的标记。

Zoom Box image example

选择区域：Shift +移动鼠标

由于

Answer 1

您可以重写_onMouseUp函数

$(function() {
L.Map.BoxZoom.prototype._onMouseUp = function (e) {
    if ((e.which !== 1) && (e.button !== 1)) { return; }

    this._finish();

    if (!this._moved) { return; }
    // Postpone to next JS tick so internal click event handling
    // still see it as "moved".
    this._clearDeferredResetState();
    this._resetStateTimeout = setTimeout(L.Util.bind(this._resetState, this), 0);

    var bounds = new L.LatLngBounds(
        this._map.containerPointToLatLng(this._startPoint),
        this._map.containerPointToLatLng(this._point)
    );
    this._map.fire('boxzoomend', {boxZoomBounds: bounds})

    if (!this._map.options.noFit) {
        this._map.fitBounds(bounds);
    }
};

// We’ll add a OSM tile layer to our map
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
    osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    osm = L.tileLayer(osmUrl, {
        maxZoom: 18,
        attribution: osmAttrib
    });


// initialize the map on the "map" div with a given center and zoom
var map = L.map('map',{noFit:true}).setView([25.92, 79.84], 5).addLayer(osm);

// attaching function on map click
map.on('click', onMapClick);

map.on('boxzoomend', function(e) {
	console.log('box zoom end', e);
});

map.on('zoomstart', function(e) {
	console.log('zoom start', e);
})

// Script for adding marker on map click
function onMapClick(e) {

    var geojsonFeature = {
        "type": "Feature",
            "properties": {},
            "geometry": {
                "type": "Point",
                "coordinates": [e.latlng.lat, e.latlng.lng]
        }
    }

    var marker;

    L.geoJson(geojsonFeature, {
        
        pointToLayer: function(feature, latlng){
            
            marker = L.marker(e.latlng, {
                
                title: "Resource Location",
                alt: "Resource Location",
                riseOnHover: true,
                draggable: true,

            }).bindPopup("<input type='button' value='Delete this marker' class='marker-delete-button'/>");

            marker.on("popupopen", onPopupOpen);
       
            return marker;
        }
    }).addTo(map);
}


// Function to handle delete as well as other events on marker popup open
function onPopupOpen() {

    var tempMarker = this;

    //var tempMarkerGeoJSON = this.toGeoJSON();

    //var lID = tempMarker._leaflet_id; // Getting Leaflet ID of this marker

    // To remove marker on click of delete
    $(".marker-delete-button:visible").click(function () {
        map.removeLayer(tempMarker);
    });
}


// getting all the markers at once
function getAllMarkers() {
    
    var allMarkersObjArray = [];//new Array();
    var allMarkersGeoJsonArray = [];//new Array();

    $.each(map._layers, function (ml) {
        //console.log(map._layers)
        if (map._layers[ml].feature) {
            
            allMarkersObjArray.push(this)
                                    allMarkersGeoJsonArray.push(JSON.stringify(this.toGeoJSON()))
        }
    })

    console.log(allMarkersObjArray);
    alert("total Markers : " + allMarkersGeoJsonArray.length + "\n\n" + allMarkersGeoJsonArray + "\n\n Also see your console for object view of this array" );
}

$(".get-markers").on("click", getAllMarkers);
});

html, body, #map {
    width:100%;
    height:96%;
    margin:0;
    padding:0;
}
.get-markers {
    width:100%;
    margin:10px 0;
}

<html>
<head>
<!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
   integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
   crossorigin=""></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
   integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
   crossorigin=""/>
</head>
<body>
<div id="map" data-mode="">
    <input type="hidden" data-map-markers="" value="" name="map-geojson-data" />
</div>
<div>
    <input class="get-markers" type="button" value="Get all the Markers" />
</div>
</body>
</html>

Answer 2

Leaflet 1.6.0的自定义代码

导入传单库后：

L.CustomBoxZoom = L.Map.BoxZoom.extend({
  _onMouseUp: function(e) {
    if (e.which !== 1 && e.button !== 1) return
    this._finish()
    if (!this._moved) return
    this._clearDeferredResetState()
    this._resetStateTimeout = setTimeout(L.bind(this._resetState, this), 0)
    var latlng1 = this._map.containerPointToLatLng(this._startPoint)
    var latlng2 = this._map.containerPointToLatLng(this._point)
    var bounds = L.latLngBounds(latlng1, latlng2)
    this._map.fire('boxzoomend', { boxZoomBounds: bounds })
  },
})
L.Map.addInitHook('addHandler', 'customBoxZoom', L.CustomBoxZoom)

然后初始化您的地图：

var map = L.map('yourmap', { boxZoom: false, customBoxZoom: true }).setView([0, 0], 0)

并收听boxzoom事件：

map.on('boxzoomend', function(e) {
  console.log(e)
})

= >>好，它只是将事件对象记录到控制台，不再进行缩放！！！

leaflet：如何在使用boxzoom（shift + move mouse）后禁用缩放事件

2 个答案: