7

我正在使用Datamaps创建加拿大和美国的地图。我在其网站上看到了教程和/或示例，并且看到了“仅限美国地图”示例。我这样做了：

    <script>
        var addUSA = new Datamap({
            scope: 'usa',
            element: document.getElementById('usa-map'),
            geographyConfig: {
                highlightOnHover: false,
                borderColor: '#006298',
                borderWidth: 0.8,
                popupTemplate: function(geography, data) {
                    return "<div class='hoverinfo'><strong>" + data.info + "</strong></div>";
                }
            },
            dataUrl: 'data.json',
            dataType: 'json',
            data: {},
            fills: {
                defaultFill: '#FFFFFF'
            }
        });
        addUSA.labels();
    </script>

所以我假设您也可以创建“仅限加拿大地图”。但问题是，我不知道如何结合两个国家。

我的目标是标签、悬停信息和 json，这就是我使用 Datamaps 的原因。

4

1 回答 1

7

因此，我找到了 Mark DiMarco 的名为“Datamaps 中的自定义地图数据”的 URL，我使用并尝试复制他所做的事情。在该链接上，他创建了一张阿富汗地图，该地图并未包含在他在 Datamaps 网站上的主要示例中。但是，我们将使用 Datamaps 组合两个国家的自定义地图，而不是一个国家。这是我所做的一个实验，但我希望这将是您问题的答案

首先，他为阿富汗创建了一个自定义拓扑 json。他发布了有关如何创建自定义地图数据的教程，但我认为我没有访问权限，因为我收到 404 或者他将其删除。回过头来看，他用于自定义拓扑 json 的代码也可以在位于 Datamaps 网站的“更多版本”链接的其他作品中找到。您只需要查找制作自定义拓扑 json 所需的国家/地区即可。最后，查找 datamaps.afg.js 和 datamaps.usa.js；并获取json。

我只有 1 个信誉，并且我有两个 URL 的限制。只需访问这个GitHub站点，我在其中放置了加拿大和美国的两个自定义拓扑 json。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Canada and USA</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script src="http://rawgithub.com/markmarkoh/datamaps/master/dist/datamaps.none.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <!-- CANADA -->
    <h1>CANADA</h1>
    <div id="canada"></div>
    <!-- USA -->
    <h1>USA</h1>
    <div id="usa"></div>
</body>
</html>

CSS

#canada {
    border: 1px solid #000000;
    height: 450px;
    width: 400px;
}

#usa {
    border: 2px solid #EDA552;
    height: 400px;
    width: 500px;
}

查询

$(function() {
    var canadaMap = new Datamap({
        element: document.getElementById('canada'),
        geographyConfig: {
            dataUrl: 'canada.topo.json'
        },
        scope: 'canada',
        fills: {
            defaultFill: '#bada55'
        },
        setProjection: function(element) {
            var projection = d3.geo.mercator()
                .center([-95, 71])
                .scale(200)
                .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
            var path = d3.geo.path().projection(projection);
            return {path: path, projection: projection};
        }
    });
    var USAmap = new Datamap({
        element: document.getElementById('usa'),
        geographyConfig: {
            dataUrl: 'usa.topo.json'
        },
        scope: 'usa',
        fills: {
            defaultFill: '#bada55'
        },
        setProjection: function(element) {
            var projection = d3.geo.mercator()
                .center([-120, 54])
                .scale(250)
                .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
            var path = d3.geo.path().projection(projection);
            return {path: path, projection: projection};
        }
    });
});

这里的工作代码=> JS FIDDLE

于 2016-10-03T08:13:29.003 回答