Как я могу заблокировать уровень масштабирования на карте Leaflet? - PullRequest
Новая
       8

Как я могу заблокировать уровень масштабирования на карте Leaflet?

1 голос
/ 15 января 2020

Ранее я спрашивал, как получить фактический уровень масштабирования, потому что я пытался изменить 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>
}

1 Ответ

0 голосов
/ 15 января 2020

Чтобы полностью отключить масштабирование, вы можете выдать ошибку в событии zoomstart: 

var zoomLock = false; //true



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