Листовка заново отображает карту с новыми данными в приложении React - PullRequest
Новая
       12

Листовка заново отображает карту с новыми данными в приложении React

0 голосов
/ 04 января 2019

с учетом следующей реализации: 

getCurrentMap() {
  const {currentlyActiveMap: {task, type, layout}} = this.mapStore
  if (this.currentMap) this.currentMap.eachLayer(layer => {
    this.currentMap.removeLayer(layer)
  })

  let centerX = 0
  let centerY = 0

  if (layout.image_width > layout.image_height) {
    centerX = layout.tile_size / 2
    centerY = (layout.tile_size * layout.image_height / layout.image_width) / 2
  } else {
    centerX = (layout.tile_size * layout.image_width / layout.image_height) / 2
    centerY = layout.tile_size / 2
  }

  this.currentMap = this.currentMap || Leaflet.map(this.map, {
    center: [-centerY, centerX],
    crs: Leaflet.CRS.Simple,
    minZoom: 0,
    maxZoom: layout.max_zoom_level + 1,
    maxBounds: [[layout.tile_size, -layout.tile_size], [-2 * layout.tile_size, 2 * layout.tile_size]],
    doubleClickZoom: false,
    attributionControl: false,
    zoom: 2
  })

  let currentLayer = Leaflet.tileLayer(`${layout.tiling_url}`)
  this.currentMap.addLayer(currentLayer)

  return (
    <Fragment>
      <button type='button' className={styles.mapPanelCreateButton} onClick={this.handleCreateTask}>
        <FaPlus/>
      </button>
    </Fragment>
  )
}


render() {
  const mapLayout = !!this.taskStore.loading || !this.mapStore.currentlyActiveMap
    ? <LoadingContainer transparent={true}/>
    : this.getCurrentMap()

  return (
    <Fragment>
      <div id='map' className={styles.mapPanelContainer} ref={map => this.map = map}></div>
      {mapLayout}
    </Fragment>
  )
}

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

Как всегда ценится любое направление, поэтому спасибо заранее!

также другая реализация с тем же результатом:

Leaflet.tileLayer(`${layout.tiling_url}`).addTo(this.currentMap)

РЕДАКТИРОВАТЬ: Я также получаю печально известную: Uncaught Error: контейнер карты уже инициализирован.

1 Ответ

0 голосов
/ 01 февраля 2019

Поэтому я подумал, что вернусь назад и предоставлю свое решение:

@ jbccollins спасибо за предложение, но мне нужна более низкоуровневая настройка, которую не может обеспечить буклет Reaction без PR. Я хотел бы внести свой вклад, но у меня просто нет времени ждать включения. 

this.locationLayer = Leaflet.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png')
this.floorPlanLayer = Leaflet.tileLayer(layout.tiling_url)

this.currentMap = Leaflet.map(this.map, options)
this.locationLayer.addTo(this.currentMap)

if (this.currentMap.hasLayer(this.locationLayer)) {
    this.currentMap.addLayer(this.floorPlanLayer)
    this.currentMap.removeLayer(this.locationLayer)
    this.currentLayer = this.floorPlanLayer
  } else {
    this.currentMap.addLayer(this.locationLayer)
    this.currentMap.removeLayer(this.floorPlanLayer)
    this.currentLayer = this.locationLayer
  }
...