我当前正在尝试学习反应,我想使用传单映射(react-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)
我无法弄清楚为什么发生错误,也许有人有一个想法解决这个问题或帮助我理解我犯的错误。
编辑:通过用pointToLayer
功能中的return L.circleMarker()
替换return <CirleMarker />
,我可以工作。
通过用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
}
我认为,如果您只是尝试显示自定义图标,那么最好尝试使用标记组件而不是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]
})