Question

我正在试图弄清楚如何使用d3.js在Google地图上绘制交互式十六进制网格，但我似乎无法找到此特定实现所需的文档。

这是ionic-starter-maps项目与d3.js geometry overlay demo混合在一起（code for this video is here）的组合。我打算利用this article中的一些十六进制网格信息。

两个繁重的（我认为）功能在这里：

function d3init() {
  width = map.getDiv().offsetWidth;
  height = map.getDiv().offsetHeight;

  projection = d3.geo.equirectangular()
    .translate([0,0])
    .scale(57.29578)
    .precision(.1)

  context = new PolyLineContext();
  path = d3.geo.path().projection(projection).context(context);
  equator = {type: 'LineString', coordinates: [[-180,20],[-90,0], [0,-20], [90,0], [180,20] ] }

  render();
}

function render() {
  polyline.setOptions({
    strokeColor: 'red',
    strokeWeight: 2
  });
  context.setCurrent(polyline.getPath());
  path(equator);
}

我发现的大多数示例都使用SVG方法绘制形状，但我希望有这些六角形的批次，所以听起来画布可能更适合任务。

如何用十六进制网格覆盖地图？向叠加层添加几何图形的最佳方法是什么？我应该将equator = {type: 'LineString',...视为为十六进制网格添加更多坐标的位置吗？

如何在Google地图上使用d3.js绘制十六进制网格叠加层

0 个答案: