react-leaflet <GeoJSON /> pointToLayer选项更改图标

Question

我目前正在尝试学习反应，我想使用传单地图（反应传单）。

我有两个要显示的（点，多边形）GeoJson对象，该对象正在运行，但是我想替换默认的标记图标。

传单文档http://leafletjs.com/examples/geojson/告诉我使用pointToLayer选项。

码：

onEachFeaturePoint，onEachfeaturePolygon，pointToLayer

onEachFeaturePoint(feature, layer) {
  console.log('feature: ', feature);
  console.log('layer: ', layer);
  layer.on({
    'click': function (e) {
       console.log('e: ', e);
       console.log('click');
     }
  })
}

onEachFeaturePolygon(feature, layer) {
  console.log('feature: ', feature);
  console.log('layer: ', layer);
  layer.on({
    'click': function (e) {
       console.log('e: ', e);
       console.log('click');
     }
  })
}

pointToLayer(feature, latlng) {
  console.log('--- Point to layer');
  console.log('feature: ', feature);
  console.log('latlng: ', latlng);
  return <CircleMarker center={latlng} />;
}

渲染

render() {
  const center = [9.4921875, 51.83577752045248];

  return (
    <Map center={center} zoom={1}>
      <GeoJSON ref='marker1' data={this.state.point} onEachFeature={this.onEachFeaturePoint.bind(this)} pointToLayer={this.pointToLayer.bind(this)} />
      <GeoJSON ref='polygon1' data={this.state.polygon} onEachFeature={this.onEachFeaturePolygon.bind(this)} />
    </Map>
  )
}

如果我保持pointToLayer={this.pointToLayer.bind(this)}它停止工作并出现以下错误：

Uncaught TypeError: layer.on is not a function
    at CustomMarker.onEachFeaturePoint (MapDemo.js:73)
    at NewClass.addData (leaflet-src.js:10455)
    at NewClass.addData (leaflet-src.js:10435)
    at NewClass.initialize (leaflet-src.js:10420)
    at new NewClass (leaflet-src.js:310)
    at L.geoJSON (leaflet-src.js:10732)

我无法弄清楚为什么会发生错误，也许有人对如何解决此问题或帮助我理解我犯的错误有一个想法。

编辑：通过更换return <CirleMarker />具有return L.circleMarker()在pointToLayer功能，我把它拿到工作。

Answer 1

通过更换return <CirleMarker />具有return L.circleMarker()在pointToLayer功能，我把它拿到工作。

import L from 'leaflet';

...

pointToLayer(feature, latlng) {
   return L.circleMarker(latlng, null); // Change marker to circle
   // return L.marker(latlng, { icon: {}}); // Change the icon to a custom icon
}