Интеграция с реактивной листовкой mapboxgl не работает

следуя ответу на этой странице: Render mapbox vector плитки внутри реактивной листовки?

Когда я экспортирую MapBoxGLLayer и импортирую его в свой основной класс,

нравится

import MapBoxGLLayer from './MapBoxGLLayer';

и попробуйте получить к нему доступ в моей функции рендеринга, например:

<Map>
  <MapBoxGLLayer
    accessToken={MAPBOX_ACCESS_TOKEN}
    style='https://style.example.com/style.json'
  />
</Map>

я получаю эту ошибку, которая довольно постоянна.

MapLayer.js:77 Uncaught TypeError: Cannot read property 'layerContainer' of undefined
at VectorgridLayer.get (MapLayer.js:77)
at VectorgridLayer.componentDidMount (MapLayer.js:38)

Листовки к реквизиту нет.

введите здесь описание изображения

Я не знаю, что я делаю неправильно здесь.


reactjs leaflet mapbox mapbox-gl-js react-leaflet
person Bardia    schedule 14.11.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Принимая во внимание подсказки из упомянутого вами ответа, я смог заставить его работать.
Ваш MapBoxGLLayer.js

import L from "leaflet";
import {} from "mapbox-gl-leaflet";
import PropTypes from "prop-types";
import { GridLayer, withLeaflet } from "react-leaflet";

class MapBoxGLLayer extends GridLayer {
  createLeafletElement(props){
    return L.mapboxGL(props);
  }
}

export default withLeaflet(MapBoxGLLayer);

Недостающей вещью был withLeaflet HOC.

Использование:

npm i mapbox-gl-leaflet

Добавьте mapbox-gl-js и css в index.html

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />  

// Import the MapBoxGLLayer component mentioned above.
class App extends Component {
  state = {
    center: [51.505, -0.091],
    zoom: 13
  };

  render() {
    return (
      <div>
        <Map center={this.state.center} zoom={this.state.zoom}>
          <MapBoxGLLayer
            accessToken={MAPBOX_ACCESS_TOKEN}
            style="mapbox://styles/mapbox/streets-v9"
          />
        </Map>
      </div>
    );
  }
}

Рабочий пример можно найти здесь:https://codesandbox.io/s/ooypokn26y
Добавьте свой собственный токен mapbox, чтобы увидеть, как он работает.

person Murli Prajapati    schedule 15.11.2018
comment
правильно, проблема была withLeaflet(MapBoxGLLayer) в том, что я неправильно экспортировал. но теперь у меня другая проблема с моим маршрутизатором, когда он пытается размонтировать себя, я получаю Cannot read property '_leaflet_events' of undefined at removeOne (leaflet-src.js:2702) at Object.off (leaflet-src.js:2635) - person Bardia; 15.11.2018

arrow_upward
1
arrow_downward

Кажется, это ошибка в версии 0.0.3 mapbox-gl-leaflet, которая является «последней» в npm и была выпущена два года назад.

onRemove: function (map) {
    if (this._map.options.zoomAnimation) {
        L.DomEvent.off(this._map._proxy, L.DomUtil.TRANSITION_END, this._transitionEnd, this);
    }

    map.getPanes().tilePane.removeChild(this._glContainer);
    this._glMap.remove();
    this._glMap = null;
}

Объект this.map._proxy не определен. Решение состоит в том, чтобы отключить анимацию масштабирования с помощью zoomAnimation={false} в компоненте React Map. Тогда ветка не будет взята в mapbox-gl-leaflet, и вы не получите эту ошибку.

Эта проблема решена в главной ветке mapbox-gl-leaflet в GitHub: rel="nofollow noreferrer">https://github.com/mapbox/mapbox-gl-leaflet/blob/954875e2e4269db313c99d522689bc08f4aadad2/leaflet-mapbox-gl.js

Так что попробуйте обновить свои библиотеки.

person tknapp    schedule 13.12.2018
comment
да, это была еще одна проблема с библиотекой, поэтому я создал свои собственные новые функции и исправил прокси, который не был определен. - person Bardia; 18.01.2019