从react-leaflet的地图中删除缩放控件

问题描述 投票：0回答：2

我正在构建一个react-leaflet应用程序，并且我试图将缩放控件与地图本身分开。在此处，在香草Leaflet环境中也提出了相同的问题：Placing controls outside map container with Leaflet?。这就是我要在react-leaflet框架内完成的工作。这是我的项目的总体轮廓：

import UIWindow from './UIWindow'
import Map from './MapRL'

class App extends React.Component {
   render () {
      return (
         <div className="App">
            <Map />
            <UIWindow />
         </div>
      )
   }
}

export default App;

我的地图组件看起来像这样：

import React from 'react'
import { Map as LeafletMap, TileLayer } from 'react-leaflet'

class Map extends React.Component {

   render () {
      return(
         <LeafletMap
            className="sidebar-map"
            center={...}
            zoom={...}
            zoomControl={false}
            id="mapId" >

            <TileLayer
                url="..."
                attribution="...
            />

         </LeafletMap>
      )
   }
}

export default Map;

然后我的UIWindow看起来像这样：

class UIWindow extends React.Component {
   render () {
      return(
         <div className="UIWindow">
            <Header />
            <ControlLayer />
         </div>
      )
   }
}

最后，我的ControlLayer（我想让ZoomControl驻留在其中）应该看起来像这样：

class ControlLayer extends React.Component {
   render () {
      return (
         <div className="ControlLayer">
            <LeftSidebar />
            <ZoomControl />
            {this.props.infoPage && <InfoPage />}
         </div>
      )
   }
}

当然使用当前代码，将ZoomControl放入ControlLayer会引发错误：TypeError：无法读取未定义的属性'_zoom'，其中有一些更详细的错误说明，并包含了Leaflet内部代码的所有引用有关缩放功能。（DomUtil.removeClass(this._zoomInButton, className);等）

我预计会出现错误，因为ZoomControl不再是<Map />组件的子代，而是<Map />兄弟姐妹的孙代。我知道它的上下文提供者和使用者，LeafletProvider和LeafletConsumer上的react-leaflet函数。当我尝试从<ControlLayer />中调用LeafletConsumer时，我什么也没回来。例如：

            <LeafletConsumer>
               {context => console.log(context)}
            </LeafletConsumer>

这将记录一个空对象。显然，我的ControlLayer中的LeafletConsumer没有正确地从我的<Map />挂钩到LeaflerProvider中。我是否需要使用LeafletProvider从Map导出上下文？我对React Context API有点陌生，所以这对我来说还不直观。 （该应用程序的其余大部分将使用React Redux来管理状态更改和组件之间的通信。这就是我计划将侧边栏的内容连接到地图本身的方式。我的侧边栏似乎没有任何问题与<Map />完全断开）。

如何正确地将此ZoomControl挂钩到我的Map组件？

UPDATE：

我尝试在redux存储中捕获上下文，然后将其提供给外部化的ZoomControl。像这样：

            <LeafletConsumer>
               { context => {
                  this.props.captureContext(context)
               }}
            </LeafletConsumer>

这会将上下文捕获为我的redux存储的一部分。然后，我将其用作新上下文中的值：

// ControlLayer.js

const MapContext = React.createContext()

            <MapContext.Provider value={this.props.mapContext}>
               <LeftSidebar />
               <MapContext.Consumer>
                  {context => {
                     if (context){
                        console.log(ZoomControl);

                     }
                  }}
               </MapContext.Consumer>
            </MapContext.Provider>

this.props.mapContext是从我的redux matchStateToProps中引入的，它的确切上下文是由captureContext函数捕获的。

仍然，这不起作用。我的react开发工具显示，当ZoomControl在Map组件内时，MapContent.Consumer给出的值与react-leaflet固有的''值完全相同。但是我仍然收到相同的错误消息。在这里非常沮丧。

reactjs leaflet react-context react-leaflet
2个回答
1
投票

这里是没有钩子的相同方法：

提供者应如下所示：

class Provider extends Component {
  state = { map: null };

  setMap = map => {
    this.setState({ map });
  };

  render() {
    return (
      <Context.Provider value={{ map: this.state.map, setMap: this.setMap }}>
        {this.props.children}
      </Context.Provider>
    );
  }
}

传单组件将是：

class Leaflet extends Component {
  mapRef = createRef(null);

  componentDidMount() {
    const map = this.mapRef.current.leafletElement;
    this.props.setMap(map);
  }

  render() {
    return (
      <Map
        style={{ width: "80vw", height: "60vh" }}
        ref={this.mapRef}
        center={[50.63, 13.047]}
        zoom={13}
        zoomControl={false}
        minZoom={3}
        maxZoom={18}
      >
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?"
        />
      </Map>
    );
  }
}

现在要访问setMap函数到compoenntDidMount，您需要执行以下操作：

export default props => (
  <Context.Consumer>
    {({ setMap }) => <Leaflet {...props} setMap={setMap} />}
  </Context.Consumer>
);

其余请看这里：Demo

1
投票

我不确定如何使用您的方法来实现这一点，其中，当您尝试将React-leaflet的包装器放置在Map包装器之外时，ZoomControl不是Map包装器的子级。

但是，对于像ZoomControl这样的小型控件，一个简单的解决方案是创建一个与原始控件相同的自定义Zoom组件，使用本机css样式轻松构造它，并在访问地图元素后调用放大和缩小方法。

在下面的示例中，在地图加载后，我使用react-context保存地图元素：

useEffect(() => {
    const map = mapRef.current.leafletElement;
    setMap(map);
  }, [mapRef, setMap]);

然后在这里使用地图参考来使自定义Zoom组件与本地组件相同（有关CSS，请参见演示）：

const Zoom = () => {
  const { map } = useContext(Context);

  const zoomIn = e => {
    e.preventDefault();
    map.setZoom(map.getZoom() + 1);
  };
  const zoomOut = e => {
    e.preventDefault();
    map.setZoom(map.getZoom() - 1);
  };

  return (
    <div className="leaflet-bar">
      <a
        className="leaflet-control-zoom-in"
        href="/"
        title="Zoom in"
        role="button"
        aria-label="Zoom in"
        onClick={zoomIn}
      >
        +
      </a>
      <a
        className="leaflet-control-zoom-out"
        href="/"
        title="Zoom out"
        role="button"
        aria-label="Zoom out"
        onClick={zoomOut}
      >
        −
      </a>
    </div>
  );
};

然后将其放在您喜欢的地方：

const App = () => {
  return (
    <Provider>
      <div style={{ display: "flex", flexDirection: "row" }}>
        <Leaflet />
        <Zoom />
      </div>
    </Provider>
  );
};

Demo

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.