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

我以前问过如何获得实际的缩放级别，因为我试图将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}
          >

console.log（this.mapRef.current.mopleElement.getZoom（））}
zoom={this.state.zoom}
ref={this.mapRef}
preferCanvas={false}
动画={true}
maxZoom={this.state.zoomLock？this.mapRef.current.传单元素.getZoom（）：10}
minZoom={this.state.zoomLock？this.mapRef.current.传单元素.getZoom（）：1}
>

我还尝试禁用所有更改缩放的方法，但zoomControl在声明后不会更改，就像max和min zoom一样

<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}
          >

console.log（this.mapRef.current.mopleElement.getZoom（））}
zoom={this.state.zoom}
ref={this.mapRef}
preferCanvas={false}
动画={true}
scrollWheelZoom={this.state.zoomLock？false:true}
双击缩放={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>
}

{
这个，州，zoomLock？
{this.setState（{zoomLock:false}）；}}type=“button”className=“btn btn outline dark”>缩放锁定：打开
:
{this.setState（{zoomLock:true}）；}}type=“button”className=“btn btn outline dark”>缩放锁定：关闭
}

要完全禁用缩放，可以在

zoomstart

事件中抛出错误：

var zoomLock = false; //true



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

---

要完全禁用缩放，可以在

zoomstart

事件中抛出错误：

var zoomLock = false; //true



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

---

@伊万桑切斯非常感谢，这解决了我的问题。：'）@伊万桑切斯非常感谢，这解决了我的问题。：'）