React-leaflet边界

Question

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

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

问题是，有时标记渲染在地图的最外面(在视图中)，因此标记甚至看不到，除非我拖动地图或缩小一个点。我试图用缓冲区修复这个问题，或者尝试绘制边界，然后使用zoom缩小一次，但似乎什么都不起作用。你们有什么想法吗？

Answer 1

解决方案

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

来自react-leaflet Map文档：

对象:boundsOptions(可选)：传递给fitBounds()方法的选项。

来自leaflet fitBounds options文档：

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

示例

所以像这样的东西应该可以工作(没有在动作中测试)：

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

像这样定义Map元素应该会填充边界。调整填充值以满足您的需要。

另一种方法

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