React-листовка границы

Question

Прямо сейчас я устанавливаю границы моей карты листовок реакции, передавая параметр границ, как показано ниже:

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

Проблема в том, что иногда маркер отображается на самой внешней части карты (в поле зрения), поэтому маркер даже не виден, пока я не перетащу карту или не уменьшу одну точку. Я пытался исправить это с помощью буфера или пытался построить границы, а затем использовать масштабирование, чтобы уменьшить масштаб один раз, но, похоже, ничего не работает. Ребята, у вас есть идеи?

Answer 1

Решение

Ты можешь использовать boundsOptions атрибут Map компонент для передачи параметров листовки fitBounds() метод. В этих опциях вы можете определить padding например, чтобы "дополнить" границы.

От react-leaflet Картографическая документация:

boundsOptions: object (необязательно): параметры, передаваемые методу fitBounds().

От leaflet документация по параметрам fitBounds:

padding: эквивалент установки одинакового значения для верхнего левого и нижнего правого отступов.

пример

Так что-то вроде этого должно работать (не тестировать в действии):

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

Определение такого элемента карты должно дополнить границы. Настройте значения отступов в соответствии с вашими потребностями.

Другой подход

Вы можете добавить отступы к границам в вашем getBounds() функция.