我采用了react+openlayer3+webpack+redux来作地图的操作，在到每个页面时的component时，我在componentDid里绑定map对象，即map=new ol.Map()…并想绑定绑定click事件，但遇到this的问题，解决不了，如下代码
class Test extends Component {
constructor(props, context) {
super(props, context);
this.state ={
places:[],
selected:{}
}
}
componentDidMount(){
initMap();//初始化
//绑定事件
var parent=this;
placeLayer.on('change', this.updateVisiblePlaces);
map.on('moveend', this.updateVisiblePlaces);
}
// OL callbacks
updateVisiblePlaces() {**
## //问题就在这里，因为绑定了change事件，所以无法设置this.state,怎么办*
*
var extent = map.getView().calculateExtent(map.getSize());
var places = placeLayer.getSource().getFeaturesInExtent(extent).map(function(feature) {
return feature.getProperties();
});
console.log(places)
//this.setState({places:places});
// console.log(parent.states);
}
updateSelection(name) {
var extent = map.getView().calculateExtent(map.getSize());
var selected = placeLayer.getSource().getFeaturesInExtent(extent).filter(function(feature) {
return name == placeName(feature.getProperties());
});
if (selected.length > 0) {
feature = selected[0];
popupElement.innerHTML = feature.getProperties().name;
popup.setPosition(feature.getGeometry().getFirstCoordinate());
}
}
render(){
var onSelectClick = this.props.onSelectClick;
var selected = this.state.selected;
var createItem = function(place) {
var name = placeName(place);
var selClass = (name == selected) ? 'selected' : '';
return <li key={name} className={selClass} onClick={onSelectClick}>{name}</li>;
};
/**
*
*/
return (
<div>
<div id="map" class="map"><div id="popup" class="ol-popup"></div></div>
<ul>
{this.state.places.length>0?this.state.places.map(createItem):null}
</ul>
</div>
);
}
}