jvector지도에서 시각화 할 데이터 변경

Question

네팔지도 유형은 네팔 (네팔 지구지도와 네팔지도)입니다. 위의 각 유형에 대해 두 개의 데이터 세트가 있습니다. 나는 사용자가 원하는 맵의 유형을 먼저 선택할 수있는 시각화를 만들려고하고 있으며 나중에 시각화 할 데이터를 선택하려고합니다. (드롭 다운 사용).

다음은 드롭 다운 코드입니다.

<select id="changeMap"> 
     <option>Change Map</option>   
     <option value="ecoMap">Ecological Region</option> 
     <option value="world_mill_en">Districts</option> 
    </select> 

    <select id="changedata"> 
     <option>Change Data</option> 
     <option value="Caste 1">CASTE 1</option> 
     <option value="Caste 2">CASTE 2</option> 
    </select> 

이것은 jvector Map 기능입니다.

  <div id="container"></div> 

      <script> 
      var vmap = '<div id="vmap" style="width: 600px; height: 400px;"></div>'; 
      $('#changeMap').on('change', function() { 
       var _map = $(this).val(); 
       $('#vmap').remove(); 
       $('#container').append(vmap); 
       $('#vmap').vectorMap({ 
        map: _map, 
        backgroundColor: '#000000', 
        enableZoom: true, 
        regionsSelectable : false, 
        series: { 
        regions: [{ 
        values: data, 
        scale: ['#fffad6', '#d05300'], 
        normalizeFunction: 'polynomial' 
       }] 
        }}); 
      }); 
      </script> 

이제 어떻게하면 드롭 다운 조합으로 시각화 할 수 있습니까? 감사합니다.

Answer 1

지도의 완전한 동적 구현을 ​​원합니다. 저는 다이내믹 한 영역이 그려져있는 호주지도를 만들기 위해 똑같이 사용했습니다.

var auJSON = { 
"insets": [ 
    { 
     "width": 900.0, 
     "top": 0, 
     "height": 850.8001894248416, 
     "bbox": [ 
      { 
       "y": 1125139.6460741498, 
       "x": 12575140.762771795 
      }, 
      { 
       "y": 5412845.645305354, 
       "x": 17110794.900221862 
      }], 
     "left": 0 
    } 
], 
    "paths": { 
    }, 
    "height": 850.8001894248416, 
    "projection": 
    { 
     "type": "merc", 
     "centralMeridian": 0.0 
    }, 
    "width": 900.0 
}; 

이제 클릭 할 수있는 옵션 중 하나에서지도를 렌더링 마지막 속성 동적 경로에있는 개체를 삽입해야합니다 : 아래 그림과 같이

처음에 비어 경로 속성으로 jvectormap 객체를 생성 . 아래에 객체 배열을 만들었습니다.

 d3.select("#regionSVG").selectAll("path") 
      .each(function() { 
       var obj = { 
        "path": $(this).attr("d"), 
        "name": $(this).attr("name"), 
        "id": this.id 
       } 
       that.regionPathArray.push(obj); 
      }); 

이제이 배열을 전달하여 아래 빈 경로 특성을 채 웁니다.

initRegionLoading(that.regionPathArray); 

function initRegionLoading(arr) { 
    var initialJSON = auJSON; 
    for (var i = 0; i < arr.length; i++) { 
      initialJSON.paths[arr[i].name] = arr[i]; 
    } 
    $.fn.vectorMap('addMap', 'au_reg_en', initialJSON); 
} 

그리고지도를 표시했습니다.

 this.ausie_map = new jvm.WorldMap({ 
      map: 'au_reg_en', 
      container: $('#auMap_' + that.zoomLevel), 
     }); 

그러면 내 문제가 해결됩니다. 그것이 너의 것 역시 바란다.