React-leaflet边界限制

Question

现在我正在通过传递bounds参数来设置我的react leaflet地图的边界，如下所示：

   <div hidden={!this.props.hide && !this.props.toggle} className="map-container">

       <Leaflet.Map ref='leaflet-map' bounds={ this.getBounds()} >

       <Leaflet.TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'/>

             { this.geoResults().map(this.renderMarker) }


       </Leaflet.Map>

   </div>

问题在于有时候标记会被渲染在地图最外面的部分（在视图中），所以标记甚至不可见，除非我拖动地图或缩小一个位置。我试着用缓冲区或尝试绘制边界然后使用缩放来缩小一次，但似乎没有任何作用。你们有什么想法吗？

- trebek1

---

这也可能有助于其他像我一样寻找更完整解决方案的人：https://dev59.com/UrDla4cB1Zd3GeqP5Dwa#53609537 - ndtreviv

Answer 1

解决方法

您可以使用Map组件的boundsOptions属性将选项传递给leaflet的fitBounds()方法。在这些选项中，您可以定义padding，例如“填充”边界。

来自react-leaflet Map文档：

boundsOptions: object (optional): 传递给fitBounds()方法的选项。

来自leaflet fitBounds选项文档：

padding: 相当于将左上和右下填充设置为相同的值。

示例

因此，类似以下内容应该可以工作（未经测试）：

<Leaflet.Map
  ref='leaflet-map'
  bounds={this.getBounds()}
  boundsOptions={{padding: [50, 50]}}
/>

按照这样定义您的地图元素应该填充边界。调整填充值以适合您的需求。

另一种方法

您可以在getBounds()函数中为边界添加填充。

- Jeewes

---

非常棒的回答 - 我已经到了这一部分，现在我想在地图边界上添加矢量多边形，以便他们可以看到我在边界参数中提供的确切多边形。你能否看一下我在这里的问题，并看看你是否也知道答案？谢谢！http://stackoverflow.com/questions/38234377/leaflet-js-react-leaflet-bounds-box-filled-with-transparent-color - maxwell

谢谢Maxwell。我也为你的另一个问题提出了建议。你能把我的回答标记为正确并考虑点赞吗（这是StackOverflow游戏化的想法）。谢谢。 - Jeewes