Добавьте плагины листовок в React-Leaflet - PullRequest
Новая
       11

Добавьте плагины листовок в React-Leaflet

0 голосов
/ 03 июля 2018

Я пытаюсь создать пользовательский компонент в response-leaflet v2, расширяющий плагин листовки EdgeMarker . Документация не дает подробностей о том, как это сделать. Поэтому я скопировал файл Leaflet.EdgeMarker.js из репозитория и добавил его в свою реализацию.

Это то, что я сделал до сих пор: 

import PropTypes from 'prop-types';
import { MapLayer, withLeaflet } from 'react-leaflet';
import L from 'leaflet';
import '../EdgeMarker/EdgeMarker';


class EdgeMarkerComp extends MapLayer{

  static childContextTypes = {
    layerContainer: PropTypes.object
  }

  getChildContext () {
    return {
      layerContainer: this.leafletElement
    }
  }

  createLeafletElement(props) {
    const { options } = props;
    console.log("Options: ", options);
    return new L.EdgeMarker(options);
  }

}

export default withLeaflet(EdgeMarkerComp);

На моей карте: 

const options = {
      icon: L.icon({ // style markers
          iconUrl: 'images/edge-arrow-marker-black.png',
          clickable: true,
          iconSize: [48, 48],
          iconAnchor: [24, 24]
      }),
      rotateIcons: true, 
      layerGroup: null 
};

<Map ...>
  <EdgeMarkerComp options={options} />
</Map>

Любая помощь ???

Ответы [ 2 ]

0 голосов
/ 16 августа 2018

Да, раньше это было очень просто с v1.x реактивной листовки

У меня возникла похожая проблема с расширением, и я открыл проблему с репозиторием github-реактивного буклета в надежде, что Пол укажет нам путь. https://github.com/PaulLeCam/react-leaflet/issues/506

На данный момент у меня работает понижение до v1.9.

0 голосов
/ 11 июля 2018

Я наконец решил проблему, используя карту напрямую. Это было еще удобнее и дало мне больше свободы при добавлении взаимодействия на карту. Просто определите свою карту следующим образом и используйте ссылку на карту для выполнения любого действия: 

<Map
  ref={Map => this.map = Map}
  ...
  >
  ...
<Map>

Теперь вы можете ссылаться на карту в любом объекте листовки, используя this.map.leafletElement, определенную по реакции-листовке: 

const polyline = L.polyline([p1,p2 ], {color: 'yellow'}).addTo(this.map.leafletElement);

Приведенный выше код добавит новую строку на карту.

polyline.remove(); => удалит линию с карты.

...