Реакция-листовка <GeoJSON /> опция pointToLayer для изменения иконки

Question

В настоящее время я пытаюсь научиться реагировать, и я хочу использовать карту листовки (response-leaflet).

У меня есть два (Point, Polygon) объекта 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
}

Answer 2

Я думаю, что вам лучше использовать компонент Marker вместо компонента GeoJSON, если вы просто пытаетесь отобразить пользовательский значок.

<Map center={center} zoom={1}>
  <Marker
    icon={homeIcon}
    key='marker1'
    onClick={this._handleClick}
    position={leafletLatLng}
    />
</Map>

...

const homeIconUrl = 'home-2.png'
const homeIcon = icon({
  iconUrl: homeIconUrl,
  iconSize: [32, 37],
  iconAnchor: [16, 37]
})