如何锁定传单地图中的缩放级别？

Question

我之前询问过如何获得实际的缩放级别，因为我试图将 maxZoom 和 minZoom 更改为当前缩放，但是一旦我声明了这些参数，我就无法更改它们：

<Map className="map-layer" 
          center={center} 
          onoverlayadd={this.overlayadd} 
          onoverlayremove={this.overlayremove}
          ondragend={this.zoomChange}
          onzoomend={() => console.log(this.mapRef.current.leafletElement.getZoom())}
          zoom={this.state.zoom}
          ref={this.mapRef}
          preferCanvas={false}
          animate={true}
          maxZoom={this.state.zoomLock ? this.mapRef.current.leafletElement.getZoom() : 10}
          minZoom={this.state.zoomLock ? this.mapRef.current.leafletElement.getZoom() : 1}
          >

我也尝试禁用所有更改缩放的方法，但是一旦我声明了 zoomControl，它就不会改变，就像最大和最小缩放一样。

<Map className="map-layer" 
          center={center} 
          onoverlayadd={this.overlayadd} 
          onoverlayremove={this.overlayremove}
          ondragend={this.zoomChange}
          onzoomend={() => console.log(this.mapRef.current.leafletElement.getZoom())}
          zoom={this.state.zoom}
          ref={this.mapRef}
          preferCanvas={false}
          animate={true}
          scrollWheelZoom={this.state.zoomLock ? false : true}
          doubleClickZoom={this.state.zoomLock ? false : true}
          touchZoom={this.state.zoomLock ? false : true}
          zoomControl={this.state.zoomLock ? false : true}
          >

这些是改变 zoomLock 状态的按钮：

{
    this.state.zoomLock ? 
            <button onClick={ () => { this.setState({ zoomLock:false }); }  } type="button" className="btn btn-outline-dark">Zoom Lock: ON</button>
    :
            <button onClick={ () => { this.setState({ zoomLock:true }); }  } type="button" className="btn btn-outline-dark">Zoom Lock: OFF</button>
}

Answer 1

要完全禁用缩放，您可以在 zoomstart 事件中抛出错误：

var zoomLock = false; //true



map.on("zoomstart", function(e) {
  if(zoomLock){
    throw 'zoom disabled';
  }
});