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) 

我不知道为什么会发生错误，也许有人有一个想法如何解决这个问题，或帮助我了解我犯的错误。

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

Answer 1

通过在pointToLayer功能与return L.circleMarker()更换return <CirleMarker />，我得到它的工作。

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

我认为如果您只是试图显示自定义图标，您可能会更好地使用标记组件而不是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] 
})