Пользовательские компоненты React-Leaflet, как расширить Polyline из Leaflet?

Я пытаюсь расширить компонент response-leaflet, чтобы добавить в него пользовательские переменные.

Мне нужно добавить «идентификатор» к ломаной линии (чтобы, когда пользователь нажимает на нее, я могу получить идентификатор и выполнить вызов сервера для сбора данных о нем). Мне пришлось проделать то же самое с маркерами и нашел обходной путь:

markers = nextProps.buses.map((bus, i) => {
  let iconCustom = new L.Icon.Default({internalId: bus.internalId});
  this.markersDirectAccess[bus.internalId] = {
    ...bus
  };

  return {
    lat: bus.latitude,
    lng: bus.longitude,
    popup: bus.busId,
    options: {icon: iconCustom}
  }
});

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

import L from 'leaflet'
import { Polyline } from 'react-leaflet'
import PropTypes from 'prop-types';


export default class PolylineCustomId extends Polyline {
  static propTypes = {
    positions:  PropTypes.array,
  }

  createLeafletElement (props: Object): Object {
    return L.Polyline(props)
  }
}

reactjs javascript leaflet react-leaflet
person Clafou    schedule 30.05.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Не думаю, что для этого нужен специальный компонент. Вы можете просто добавить обработчик кликов для каждой ломаной линии, которая вернет ее идентификатор. См. Этот пример:

render () {
  const position = [this.state.lat, this.state.lng]
  return (
    <Map center={position} zoom={this.state.zoom}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
      />
      {this.state.polylines.map(polyline => 
          <Polyline
            key={polyline.id}
            positions={polyline.coords}
            onClick={() => alert('clicked ' + polyline.id)}
            />
        )
      }
    </Map>
  )
}

А вот jsfiddle с рабочим примером: https://jsfiddle.net/31euue73/1/

person Evan Siroky    schedule 31.05.2017
comment
Это сработало! Я все еще задаюсь вопросом, как расширить компонент листовки, используя жизненный цикл реакции с помощью response-листовки, но я приму это как ответ, поскольку он работает :) - person Clafou; 02.06.2017