我正在试图弄清楚如何使用d3.js在Google地图上绘制交互式十六进制网格,但我似乎无法找到此特定实现所需的文档。
Current demo that I'm working with
这是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',...
视为为十六进制网格添加更多坐标的位置吗?