通过带有reactjs和传单的新地图单击动态更新折线

Question

我是Reactjs和Leaflet的新手，正在构建“路由映射”应用程序。当前，点阵列（mapPoints）中有1-2个点，每次单击地图时都会更新。 （即，标记会更新以反映新的地图单击。）这是我班级（this.state.mapPoints）的状态，每次单击地图时都会通过setState更新。每次单击地图时，我都试图动态更新这两个点之间的折线。通过使用this.state.mapPoints，如果有足够的点，我通过调用一个函数以将新的标记位置作为折线位置返回的方法来进行计算。

虽然该函数正确读取了this.state.mapPoints，因此正在正确更新，但是折线将不会动态更新，并保持在最初在第一组两点之间绘制的位置处绘制。如何更新要在新更新的mapPoints状态之间绘制的折线？ （为简单起见，我通过注释总结了代码的片段。）

//code for imports, etc, here


constructor(props) {
    super(props);

    this.addMarker = this.addMarker.bind(this);
    this.getClientLocation = this.getClientLocation.bind(this);
    this.getMapPoints = this.getMapPoints.bind(this);

    this.state = {
        mapPoints: [this.getClientLocation()],
    };
}


/*

other render() code is here to render leaflet map and webpage/application

*/


renderLeafletMap() {
    return (
        <Map
            center={this.state.mapPoints[0]}
            zoom={this.state.zoom}
            onClick={this.addMarker}
            style={{height: MAP_STYLE_LENGTH, maxWidth: MAP_STYLE_LENGTH}}>
            <TileLayer url={MAP_LAYER_URL} attribution={MAP_LAYER_ATTRIBUTION}/>
            {this.getMarker(this.state.mapPoints)}
            <Polyline color={'red'}
                      positions={this.getMapPoints(this.state.mapPoints)}/>
        </Map>
    )
}

getMapPoints(markerPositions) {
    console.log(markerPositions); //this line successfully reflects the current state of mapPoints when the application runs
    if (markerPositions.length >= 2)
        return markerPositions;
    else
        return [[0,0],[0,0]];
}


addMarker(mapClickInfo) {
    let updatedArray = this.state.mapPoints;
    if(updatedArray[1]){
        updatedArray[0] = updatedArray[1];
        updatedArray[1] = mapClickInfo.latlng;
    }else {
        updatedArray[1] = mapClickInfo.latlng;
    }
    this.setState({mapPoints: updatedArray});
}



getClientLocation() {
    if(!navigator.geolocation) {
        alert.show("Your browser does not support geolocation.");
    } else{
        navigator.geolocation.getCurrentPosition(
            position => {
                const currentLocation = L.latLng(position.coords.latitude, position.coords.longitude);
                let updatedArray = this.state.mapPoints;
                updatedArray[0] = currentLocation;
                this.setState({mapPoints: updatedArray});
            }
        );
    }
}

/* 

other code to set initial mapPoints, etc, here

*/

Answer 1

您正在直接改变状态，这就是为什么您看不到预期结果的原因。

您的addMarker函数应为：

addMarker = mapClickInfo => {
    let updatedArray = [...this.state.mapPoints]; //create a copy of the mapPoints array and then modify it
    if (updatedArray[1]) {
      updatedArray[0] = updatedArray[1]; 
      // also here you want to extract the coordinates and assign them to your index 1 on your mapPoints array, mapClickInfo.latlng is an {} and you want to have an array as index 1 on your mapPoints array
      updatedArray[1] = [mapClickInfo.latlng.lat, mapClickInfo.latlng.lng];
    } else {
      // here the same
      updatedArray[1] = [mapClickInfo.latlng.lat, mapClickInfo.latlng.lng];
    }
    this.setState({ mapPoints: updatedArray });
  };

也可以在getClientLocation函数中执行类似的操作。应该是这样的：

getClientLocation = () => {
    if (!navigator.geolocation) {
      alert.show("Your browser does not support geolocation.");
    } else {
      navigator.geolocation.getCurrentPosition(position => {
        const {
          coords: { latitude, longitude }
        } = position;
        const mapPoints = [...this.state.mapPoints];
        mapPoints[0] = [latitude, longitude];
        this.setState({ mapPoints });
      });
    }
  };

Demo