0

ネパールの地図は 2 種類あります (ネパールの地区地図とネパールの生態地図)。上記のタイプごとに 2 つのデータ セットがあります。ユーザーが最初に必要なマップの種類を選択し、後で視覚化するデータを選択できる視覚化を作成しようとしています。（ドロップダウンを使用）。

これらはドロップダウンのコードです。

    <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>

では、このドロップダウンの組み合わせを視覚化するにはどうすればよいでしょうか? ありがとう！

4

1 に答える 1

0

I guess u want a complete dynamic implementation of the map. I used the same for creating Australia's map with dynamic regions plotted on it on the fly.

Initially create the jvectormap object with path attribute left empty as shown below:

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
};

Now, on click on any of the option you have to insert the objects in the path attribute dynamically and finally render the map. I created an array of objects below.

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

Now i passed on this array to fill in the empty path attribute as below.

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);
}

And then i displayed the map.

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

That solves my problem. Hope it does yours too.

于 2013-07-18T06:46:14.657 に答える