在地图上画正六边形时出现的问题(d3)

在一个项目里需要在地图上叠加正六边形图形进行分割。用的方法是d3给的方法。流程是:

(1)获取地图边框范围

(2)计算出铺满地图范围的所有六边形的中心点的坐标centers[];

(3)利用sin 与 cos函数计算出六边形六个顶点的坐标points[]

(4)添加geometry到图层

下面的代码包括了(1)(2)(3)部分。

 可是运行结果,发现并不是正六边形。找了很久原因后发现,因为坐标系是经纬度的,当radius=0.005时,经度加0.005与纬度加0.005的实际距离(米)是不同的。 

var extent = hexbin.Map.map.getExtent();
            var xmin = extent.xmin,
                ymin = extent.ymin,
                xmax = extent.xmax,
                ymax = extent.ymax;
            var radius=0.005; //六边形边长
 var dx = radius * 2.2 * Math.sin(Math.PI / 3);//分割的宽度
var dy = radius * 1.5;//分割的高度
 var centers = [];//中心点坐标集 
var xnum = (xmax-xmin)/dx+1; var ynum = (ymax-ymin)/dy+1;
 for(var i=0;i<xnum;i++){
 for(var j=0;j<ynum;j++){
 var point = [];
 if(j%2 == 0){ point[0]=xmin+i*dx; point[1]=ymin+j*dy; }
else{ point[0]=xmin+(i+0.5)*dx; point[1]=ymin+j*dy; }
 centers.push(point); } }
 var hexItem=[];
 for(var a=0;a<centers.length;a++){ 
var angle = 0; 
var points=[];
 for (var i = 0; i < 6; i++, angle += Math.PI / 3) { 
points.push([ centers[a][0]+ radius * Math.sin(angle), centers[a][1] + radius * Math.cos(angle) ]); }


然后大概估计了一个系数1.1,代码改为如下,之后运行,就近似正六边形了。

for (var i = 0; i < 6; i++, angle += Math.PI / 3) {
                    points.push([
                        centers[a][0]+ radius * Math.sin(angle)*1.1,
                        centers[a][1] + radius * Math.cos(angle)
                    ]);
                }





  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值