전단을 강제로지도를 업데이트하려면 어떻게해야합니까?

Question

Reaflet을 React와 함께 사용하면서 문제가 발생했습니다. 문제는 Leaflet이 DOM 렌더링을 제어하려고하므로 조사한 것입니다.

지금은 백엔드 정보 (1 -> 100 범위)에 해당하는 특정 색상 코드로 국가가 올바르게 색칠됩니다. 그러나 매분마다 업데이트됩니다. 업데이트하면 국가 색상이 변경되지 않습니다. 그러나 주어진 국가를 마우스로 가리키면 조금 이상합니다.

import React from 'react'; 
import L from 'leaflet'; 
import countries from './countries.js'; 


var Worldmap = React.createClass({ 

    render: function() { 

     if(!this.props.data) 
      return <div> loading world map .. </div>; 

     let dataratio = this.props.data; // Props from main component 
     let size = Object.keys(dataratio).length; // Do we have data? 

     if(size > 1) { // If we do have data, .. 

      let dataratioToArr = Object.keys(dataratio).map(data => [ data, dataratio[data]]); // Conv. map to multidimensional array 

      let featuresArr = countries.features; // array of all countries in array features from countries.js 

      for(let i = 0; i < featuresArr.length; i++) // i = 178(no. of countries) 
       for(let j = 0; j < dataratioToArr.length; j++) // j = no. of countries we have with dataratio > 1 from backend 
        if(dataratioToArr[j][0] == featuresArr[i].id) // If ISO-3 compliant ID of country(f.e. "USA") matches, push a "data" property to countries.js 
         featuresArr[i].properties.data = dataratioToArr[j][1]; 
     } 

     return(
      <div id="leafletmap" style={{width: "100%", height: "80%", border: "2px solid black" }} /> 
     ) 
    }, 

    componentDidMount : function() { 
     let geolocation = []; 
     // Retrieve geoloc coordinates 
     navigator.geolocation.getCurrentPosition(function(position) { 
      let lat = position.coords.latitude; 
      let lon = position.coords.longitude; 

      if(lat != null && lon != null) // If we can get latitude and longitude, reset geolocation and push values. 
       geolocation.length = 0; 
      geolocation.push(lat, lon); 
      if(!lat || !lon) // If we can't get latitude or longitude, set a default value. 
       geolocation = [0,0]; 

      let map = L.map('leafletmap').setView(geolocation, 3); // ([coordinates], zoomlevel) 

      let info = L.control(); 

      info.onAdd = function (map) { 
       this._div = L.DomUtil.create('div', 'info'); 
       this.update(); 
       return this._div; 
      }; 

      info.update = function (props) { 
       this._div.innerHTML = '<h4>Data ratio</h4>' + (props ? 
        '<b>' + props.name + '</b><br />' + props.data + ' ratio' 
         : 'Hover over a country'); 
      }; 

      info.addTo(map); 


      function getColor(d) { 
       return d > 90 ? '#4a1486' : 
        d > 75 ? '#6a51a3' : 
         d > 50 ? '#807dba' : 
          d > 25 ? '#9e9ac8' : 
           d > 15 ? '#bcbddc' : 
            d > 5 ? '#dadaeb' : 
             d > 1 ? '#f2f0f7' : 
              '#D3D3D3'; // Default color of data doesn't exist or is 0. 
      } 


      function style(feature) { 
       return { 
        weight: 2, 
        opacity: 1, 
        color: 'white', 
        fillOpacity: 1, 
        fillColor: getColor(feature.properties.data) 
       }; 
      } 

      function highlightFeature(e) { 
       let layer = e.target; 

       layer.setStyle({ 
        weight: 5, 
        color: '#666', 
        fillOpacity: 0.7 
       }); 

       if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) { 
        layer.bringToFront(); 
       } 

       info.update(layer.feature.properties); 
      } 

      let geojson; 

      function resetHighlight(e) { 
       geojson.resetStyle(e.target); 
       info.update(); 
      } 

      function zoomToFeature(e) { 
       map.fitBounds(e.target.getBounds()); 
      } 

      function onEachFeature(feature, layer) { 
       layer.on({ 
        mouseover: highlightFeature, 
        mouseout: resetHighlight, 
        click: zoomToFeature 
       }); 
      } 


      geojson = L.geoJson(countries, { // from import 
       style: style, 
       onEachFeature: onEachFeature 
      }).addTo(map); 

      let legend = L.control({position: 'bottomright'}); 

      legend.onAdd = function (map) { 

       let div = L.DomUtil.create('div', 'info legend'), 
        grades = [1, 5, 15, 25, 50, 75, 90], 
        labels = [], 
        from, to; 

       for (let i = 0; i < grades.length; i++) { 
        from = grades[i]; 
        to = grades[i + 1]; 

        labels.push(
         '<i style="background:' + getColor(from + 1) + '"></i> ' + 
         from + (to ? '&ndash;' + to : '+')); 
       } 

       div.innerHTML = labels.join('<br>'); 
       return div; 
      }; 

      legend.addTo(map); 
     }); 

    } 
}); 

export default Worldmap 

가 어떻게 수신 그리기 또는 새 this.props.data에 따라지도를 새로 전단지를 강요하는 걸까 :

여기 내 소스 코드입니까? 그것은 모든 componentDidMount에 장전하고 다시 전단지 맵을 호출하는 경우는 아직 초기화 말할 것입니다 ..

는 나는 기본적으로 map.remove() 할 것 곳 componentDidUpdate를 사용했지만, 그때는 서로 다른 구성 요소 사이의 범위 지정 문제로 실행.

Answer 1

내 의견을 넓히려면. 레이어를 삭제하고지도에 데이터를 다시 추가해야합니다. 귀하의 경우 맵 및 geojson 프로세싱에 액세스하는 방법을 변경해야 할 수도 있지만 일반적 솔루션을 제공합니다.

componentDidMount(){ 
     var map = this.map = L.map('leafletmap'); 
    } 


    componentWillReceiveProps(nextProps) { 
     if (nextProps.data !== this.props.data) { 
     this.map.clearLayers(); 
     } 
    } 


    componentDidUpdate(prevProps,prevState) { 
     if (prevProps.data !== this.props.data) { 
      this.map.addData(geojsonData); 
     } 
    }