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

现在，单击任何选项，您必须动态插入路径属性中的对象，最后渲染地图。我在下面创建了一个对象数组。

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

这解决了我的问题。希望它也适合你。

更改要在jvector Map中显示的数据

1 个答案: