更改要在jvector Map中可视化的数据

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

我猜你想要一个完整的动态地图实现。我用同样的方法创建了澳大利亚的地图，并在上面动态绘制了区域。

最初创建一个路径属性为空的jvectormap对象，如下所示：

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

现在，单击任何选项，您必须动态地在path属性中插入对象，并最终呈现地图。我在下面创建了一个对象数组。

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

这就解决了我的问题。希望你的也是这样。