Question

我正在尝试扩展react-leaflet组件，以便我可以向其添加自定义变量。

我需要在Polyline上添加一个“id”（所以当用户点击它时，我可以检索id并在后面进行服务器调用以收集数据）。我必须为标记执行相同的操作并找到此解决方法：

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组件时，我会陷入困境。我找到this answer并且我想将它应用于反应传单但我不知道该怎么做。这是我的扩展组件的当前状态：

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

Answer 1

我认为您不需要自定义组件。您只需为每个折线添加一个点击处理程序，它将返回它的id。见这个例子：

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/

React-leaflet自定义组件，如何从Leaflet扩展Polyline？

1 个答案: