数据地图显示了印度的小尺寸地图

Datamaps are showing small size map of India

本文关键字：地图 显示 数据      更新时间：2023-09-26

嗨，我试图创建一个地图与datamap和d3 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="https://raw.githubusercontent.com/markmarkoh/datamaps/master/dist/datamaps.ind.js"></script>
    <div id="container" style="position: relative; width: 500px; height: 300px;"></div>
var map = new Datamap({
  element: document.getElementById('container'),
  scope: 'ind'
});
https://jsfiddle.net/bxp9e9j1/

您需要告诉中心和投影的位置。将此添加到您的代码中:

  setProjection: function(element) {
    var projection = d3.geo.equirectangular()
      .center([80, 25])
      .scale(600)
      .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
    var path = d3.geo.path()
      .projection(projection);
    return {path: path, projection: projection};
  }

印度中心: 20.5937°N, 78.9629°E

完整代码:

var map = new Datamap({
  element: document.getElementById('container'),
  scope: 'ind',
  setProjection: function(element) {
    var projection = d3.geo.equirectangular()
      .center([80, 25])
      .scale(600)
      .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
    var path = d3.geo.path()
      .projection(projection);
    return {path: path, projection: projection};
  }
});
提示:您可以将投影类型更改为:墨卡托 
projection: 'mercator',

给你一个平面地图，而不是圆球类型。

希望对您有所帮助

相关文章：