Ограничения React-Leaflet

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

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

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


reactjs javascript dictionary leaflet react-leaflet
person trebek1    schedule 06.01.2016    source источник
comment
Это также может помочь, если другие люди приходят сюда, как я, в поисках более полного решения: stackoverflow.com/questions/53601692/   -  person ndtreviv    schedule 04.12.2018

Ответы (1)


arrow_upward
10
arrow_downward

Решение

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

Из документации react-leaflet Map:

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

Из документации leaflet параметры fitBounds:

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

Пример

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

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

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

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

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

person Jeewes    schedule 30.06.2016
comment
Замечательный ответ - я дошел до этой части, и теперь я хочу добавить векторный многоугольник поверх границ карты, чтобы они могли видеть точный многоугольник, который я указываю в аргументе границ. Можете ли вы взглянуть на мой вопрос здесь и узнать, знаете ли вы ответ на него? Спасибо! stackoverflow.com/questions/38234377/ - person maxwell; 07.07.2016
comment
Спасибо, Максвелл. Я сделал предложение и для другой вашей проблемы. Не могли бы вы отметить мой ответ как правильный и рассмотреть возможность его голосования (в конце концов, это своего рода идея геймификации StackOverlow). Ваше здоровье. - person Jeewes; 09.07.2016