リーフレットマップへのプロットライン

Question

私は、その場所がリアルタイムで表示される作業リーフレットマップを持っています。緯度と経度の値は毎秒で、毎回変わる値に基づいて地図が表示されます。今、私は最後の10の位置履歴をポリラインに表示したいが、最後の10の位置をポリラインとして表示するには、10の場所の配列が必要です。どのように私は最後の10の場所の歴史を持つ配列を作成することができますか？ここで

は私が反応し、リーフレットないとimmutablejsリーフレットを使用しています

import L from 'leaflet'; 

componentDidMount() { 
    const { currentValue } = this.props; 
    const latestValue = currentValue.split(':'); 
    const lat = getNumber(latestValue[0]); 
    const long = getNumber(latestValue[1]); 
    this.map = L.map(this.element).setView([lat, long], 15); 

    // Google Map 
    L.tileLayer('*****', { 
    maxZoom: 20, 
    }).addTo(this.map); 

    this.marker = L.marker([lat, long], { icon: MarkerIcon }); 
    this.marker.addTo(this.map); 
    const polyLinePoints = [ 
    new L.LatLng(lat, long), 
    new L.LatLng(lat, long), 
    new L.LatLng(lat, long), 
    new L.LatLng(lat, long), 
    ]; 
    const polyLineOptions = { 
    color: 'blue', 
    weight: '5', 
    opacity: 0.9 
    }; 
    const polyline = L.polyline(polyLinePoints, polyLineOptions).addTo(this.map); 
    this.map.fitBounds(polyline.getBounds()); 
} 

componentDidUpdate() { 
    const { currentValue } = this.props; 
    const latestValue = currentValue.split(':'); 
    const lat = getNumber(latestValue[0]); 
    const long = getNumber(latestValue[1]); 
    console.log('lat', lat, long); 
    // latlng.push([lat,long]); 
    const polyLinePoints = [ 
    new L.LatLng(lat, long), 
    new L.LatLng(lat, long), 
    new L.LatLng(lat, long), 
    new L.LatLng(lat, long), 
    ]; 
    const polyLineOptions = { 
    color: 'blue', 
    weight: '5', 
    opacity: 0.9 
    }; 
    this.marker.remove(); 
    this.marker = L.marker([lat, long], { icon: MarkerIcon }); 
    this.marker.addTo(this.map); 
    // invalidateSize forces map to recalculate its size 
    // next, move the center to given coordinate 
    this.map.invalidateSize(false).setView([lat, long]); 
    const polyline = L.polyline(polyLinePoints, polyLineOptions).addTo(this.map); 
    this.map.fitBounds(polyline.getBounds()); 
} 

render() { 
    const { width, height } = this.props; 
    return (
    <div 
     ref={(element) => { this.element = element; }} 
     style={{ width, height }} 
    ></div> 
); 
} 
} 

を行っているものです。場所が更新されるたびに後

Answer 1

：

• ストア10個の最新スポット
• のリストはちょうどあなたがマーカーで何をしたかのように（前のポリラインを削除する - 前のものを削除するか、あるいは我々
• 最新のスポットリストに基づいて新しいポリラインを作成します。

あなたは、あまりにも、いくつかの定数を作成する必要があります（MAX_SPOT = 10とpolyLineOptionsされる - 私たちはそれに新しいポリラインがプロットされるたびに再利用できるようにcomponentDidMount（）のこの外に移動）：

// These can be outside of your react class declaration 
const MAX_SPOT = 10; 
const polyLineOptions = { 
    color: 'blue', 
    weight: '5', 
    opacity: 0.9 
}; 

（コンストラクタで）polyLinePointsとpolylineを格納するためのいくつかの変数を作成します。

constructor(props){ 
    super(props); 
    // ... 
    this.polyLinePoints = []; 
    this.polyline = false; 
} 

次へ：

componentDidMount() { 
    // ... keep your previous logics here 
    this.polyLinePoints.push(new L.LatLng(lat, long); 

    // NOTE HERE: just after the component is mounted, 
    // perhaps there's only 1 location captured, so the polyline should not be created yet 
    //this.polyline = L.polyline(this.polyLinePoints, polyLineOptions) 
    //this.polyline.addTo(this.map); 
    //this.map.fitBounds(this.polyline.getBounds()); 
} 

componentDidUpdate() { 
    // ...your previous logics here 
    if (this.polyLinePoints.length < MAX_SPOT) { 
    this.polyLinePoints.push(new L.LatLng(lat, long)); 
    } 
    else { 
    for (let i = 0; i < MAX_SPOT - 1; i++) { // basic for loop ^^ 
     this.polyLinePoints[i] = this.polyLinePoints[i + 1]; 
    } 
    this.polyLinePoints[MAX_SPOT] = new L.LatLng(lat, long); 
    // so the polyLinePoints should always have 10 latest spots 
    } 
    this.marker.remove(); 
    this.marker = L.marker([lat, long], { icon: MarkerIcon }); 
    this.marker.addTo(this.map); 
    // invalidateSize forces map to recalculate its size 
    // next, move the center to given coordinate 

    // SET THE POLYLINE HERE, remember to remove the previous one, just like your above marker 
    // Try..Catch here because the first polyline after componentDidMount() was not created, so your map cannot find the polyline ^^ 
    try { 
    this.map.removeLayer(this.polyline); 
    } 
    catch(err) { 
    console.log(err); 
    }  
    this.polyline = L.polyline(this.polyLinePoints, polyLineOptions) 
    this.polyline.addTo(this.map); // the polyline should be added to the map here, should not on the same line as its creation 
    this.map.fitBounds(this.polyline.getBounds()); 
} 

これはまだうまくいかない場合は、コンソールにいくつかのエラーを表示してください、ありがとう！