1

我试图通过使用反应的状态来制作动态多边形，但传单多边形没有被重新渲染。

目标是创建用户在地图中单击创建的多边形。

class SimpleExample extends React.Component {
constructor() {
  super();
  this.state = {
    positions: [[51.505, -0.09]]
  };
}

addPosition = (e) => {
  const {positions} = this.state
  console.log('Adding positions', positions)
  positions.push([e.latlng.lat, e.latlng.lng])
  this.setState({positions})
}

render() {
    console.log('Should render new positions', this.state.positions)
    const staticPositions = [[51.505, -0.09], [51.4958128370432, -0.10728836059570314], [51.49602657961649, -0.09956359863281251]]
  return (
    <Map 
      center={[51.505, -0.09]} 
      onClick={this.addPosition}
      zoom={13} 
      >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
      />
      <Polygon positions={this.state.positions} color="blue" />
      <Polygon positions={staticPositions} color="red" />
      <Polyline positions={this.state.positions} />
    </Map>
  );
}
}

请检查这个小提琴： https ://jsfiddle.net/cesargdm/j2g4ktsg/1/

4

1 回答 1

0

您可以在jsfiddle中复制它，它应该可以工作。希望能帮助到你。

我有一个空数组的初始状态，所以你的第一次点击决定你从哪里开始绘制你的<Polygon>，当然你可以使用初始坐标，这完全取决于你。

使用箭头函数(prevState) => {}，您可以根据您的“先前状态”正确更新状态，这里我们采用新坐标并将concat()其添加到我们的positions状态中。

您可以在此处找到有关更新状态的更多信息。

const React = window.React;
const { Map, TileLayer, Marker, Popup, Polygon } = window.ReactLeaflet;

class SimpleExample extends React.Component {
  constructor() {
    super();
    this.state = {
      positions: []
    };
  }

  addPosition = (e) => {
    const newPos = [e.latlng.lat, e.latlng.lng];
    this.setState(prevState => (
      {
        positions: prevState.positions.concat([newPos])
      }
    ));
  }

  render() {

    return (
      <Map 
        center={[51.505, -0.09]} 
        onClick={this.addPosition}
        zoom={13}>
        <TileLayer attribution='&copy; <ahref="http://osm.org/copyright">
          OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Polygon positions={this.state.positions} color="blue" />
      </Map>
    );
  }
 }
 window.ReactDOM.render(<SimpleExample />, 
  document.getElementById('container'));
于 2017-08-29T14:36:15.190 回答