2

我试图显示基于Datamaps插件的法国地图。经过我尝试的所有尝试，我无法成功。

这是我的 HTML：

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

这是我的 js：

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="../../../node_modules/datamaps/dist/datamaps.fra.min.js"></script>

<script>
        var map = new Datamap({
            element: document.getElementById('container'),
            geographyConfig: {
                dataUrl: null,
                //dataUrl: "../../assets/script/fra.topo.json",
                popupOnHover: true,
                highlightOnHover: true,
                borderColor: '#444',
                borderWidth: 0.5,
            },
            scope: 'fra',
            fills: {
                'MAJOR': '#306596',
                'MEDIUM': '#0fa0fa',
                'MINOR': '#bada55',
                defaultFill: '#dddddd'
            },
            setProjection: function (element) {
                var projection = d3.geo.mercator()
                    .center([78.9629, 23.5937]) // always in [East Latitude, North Longitude]
                    .scale(1000);
                var path = d3.geo.path().projection(projection);
                return {
                    path: path,
                    projection: projection
                };
            }
        });
</script>

当我检查页面并检查它时，我看到一个 svg wut 页面是空的（下图） 在此处输入图像描述

4

1 回答 1

1

您似乎将地图的中心设置在错误的位置，因为您只使用 FRA（法国）数据。中心应该是大约 2, 46 而不是 78.9629, 23.5937。第一个值是经度，然后是纬度。

var projection = d3.geo.mercator()
    .center([2.0, 46.0])
    .scale(1000);
于 2021-11-03T01:58:53.053 回答