Javascript 在谷歌地图中平铺连续多边形

我想在谷歌地图上画一个六边形网格。我提出了一个解决方案，它在更高的缩放比例下看起来很好，但当进一步放大时，我发现出现了经典的“橘皮”问题：六边形不再像它们应该的那样组合在一起：

我使用基于椭球体模型计算六边形中心（因为2d模型在真实地图上显然不起作用），但缩小后看起来仍然很糟糕

  var hexgrid = [];

  function initialize(){
    // Create the map.

    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 51.5, lng: 0},
      scrollwheel: true,
      zoom: 8
    });


    // This listener waits until the map is done zooming or panning,
    // Then clears all existing polygons and re-draws them.
    map.addListener('idle', function() {

        // Figure out how big our grid needs to be
        var spherical = google.maps.geometry.spherical, 
        bounds = map.getBounds(), 
        cor1 = bounds.getNorthEast(), 
        cor2 = bounds.getSouthWest(), 
        cor3 = new google.maps.LatLng(cor2.lat(), cor1.lng()), 
        cor4 = new google.maps.LatLng(cor1.lat(), cor2.lng()), 
        diagonal = spherical.computeDistanceBetween(cor1,cor2), 
        gridSize = diagonal / 20;

      // Determine the actual distance between tiles
        var d = 2 * gridSize * Math.cos(Math.PI / 6);

        // Clear all the old tiles
        hexgrid.forEach(function(hexagon){
            hexagon.setMap(null);
        });
        hexgrid = [];

        // Determine where the upper left-hand corner is.
            bounds = map.getBounds();
            ne = bounds.getNorthEast();
            sw = bounds.getSouthWest();

            var point = new LatLon(ne.lat(), sw.lng());

            // ... Until we're at the bottom of the screen...
        while(point.lat > sw.lat()){
        // Keep this so that we know where to return to when we're done moving across to the right
            leftPoint =  new LatLon(point.lat, point.lon).destinationPoint(d, 150).destinationPoint(d, 210).destinationPoint(d, 270).destinationPoint(d, 90)

            step = 1;

            while(point.lon < ne.lng()){
              // Use the modulus of step to determing if we want to angle up or down
                if (step % 2 === 0){
                    point = new LatLon(point.lat, point.lon).destinationPoint(d, 30);
                } else {
                    point = new LatLon(point.lat, point.lon).destinationPoint(d, 150);
                }

                step++; // Increment the step

                // Draw the hexagon!
                // First, come up with the corners.
                vertices = [];
                for(v = 1; v < 7; v++){
                    angle = v * 60;
                    vertex = point.destinationPoint(d / Math.sqrt(3), angle);
                    vertices.push({lat: vertex.lat, lng: vertex.lon});
                }

          // Create the shape
                hexagon = new google.maps.Polygon({
                    map: map,
                    paths: vertices,
                    strokeColor: '#090',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#090',
                    fillOpacity: 0.1,
                    draggable: false,
                });

                // Push it to hexgrid so we can delete it later
                hexgrid.push(hexagon)
            }

            // Return to the left.
            point = leftPoint;
        }
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);

最好是，我想画六边形，使它们在屏幕上的形状和大小完全相同

这是我一直在使用的代码，也可以作为一个示例使用。我尝试使用用于计算多边形中心的同一个大地测量库来计算每个多边形的顶点，但缩小后看起来仍然不正确

  var hexgrid = [];

  function initialize(){
    // Create the map.

    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 51.5, lng: 0},
      scrollwheel: true,
      zoom: 8
    });


    // This listener waits until the map is done zooming or panning,
    // Then clears all existing polygons and re-draws them.
    map.addListener('idle', function() {

        // Figure out how big our grid needs to be
        var spherical = google.maps.geometry.spherical, 
        bounds = map.getBounds(), 
        cor1 = bounds.getNorthEast(), 
        cor2 = bounds.getSouthWest(), 
        cor3 = new google.maps.LatLng(cor2.lat(), cor1.lng()), 
        cor4 = new google.maps.LatLng(cor1.lat(), cor2.lng()), 
        diagonal = spherical.computeDistanceBetween(cor1,cor2), 
        gridSize = diagonal / 20;

      // Determine the actual distance between tiles
        var d = 2 * gridSize * Math.cos(Math.PI / 6);

        // Clear all the old tiles
        hexgrid.forEach(function(hexagon){
            hexagon.setMap(null);
        });
        hexgrid = [];

        // Determine where the upper left-hand corner is.
            bounds = map.getBounds();
            ne = bounds.getNorthEast();
            sw = bounds.getSouthWest();

            var point = new LatLon(ne.lat(), sw.lng());

            // ... Until we're at the bottom of the screen...
        while(point.lat > sw.lat()){
        // Keep this so that we know where to return to when we're done moving across to the right
            leftPoint =  new LatLon(point.lat, point.lon).destinationPoint(d, 150).destinationPoint(d, 210).destinationPoint(d, 270).destinationPoint(d, 90)

            step = 1;

            while(point.lon < ne.lng()){
              // Use the modulus of step to determing if we want to angle up or down
                if (step % 2 === 0){
                    point = new LatLon(point.lat, point.lon).destinationPoint(d, 30);
                } else {
                    point = new LatLon(point.lat, point.lon).destinationPoint(d, 150);
                }

                step++; // Increment the step

                // Draw the hexagon!
                // First, come up with the corners.
                vertices = [];
                for(v = 1; v < 7; v++){
                    angle = v * 60;
                    vertex = point.destinationPoint(d / Math.sqrt(3), angle);
                    vertices.push({lat: vertex.lat, lng: vertex.lon});
                }

          // Create the shape
                hexagon = new google.maps.Polygon({
                    map: map,
                    paths: vertices,
                    strokeColor: '#090',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#090',
                    fillOpacity: 0.1,
                    draggable: false,
                });

                // Push it to hexgrid so we can delete it later
                hexgrid.push(hexagon)
            }

            // Return to the left.
            point = leftPoint;
        }
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);

var-hexgrid=[]；
函数初始化（）{
//创建地图。
var map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:51.5，lng:0}，
滚轮：对，
缩放：8
});
//此侦听器等待贴图完成缩放或平移，
//然后清除所有现有多边形并重新绘制它们。
map.addListener（'idle'，function（））{
//弄清楚我们的电网需要多大
var spherical=google.maps.geometry.spherical，
bounds=map.getBounds（），
cor1=bounds.getNorthEast（），
cor2=bounds.getSouthWest（），
cor3=新的google.maps.LatLng（cor2.lat（），cor1.lng（）），
cor4=新的google.maps.LatLng（cor1.lat（），cor2.lng（）），
对角线=球形。计算的距离介于（cor1，cor2）之间，
网格大小=对角线/20；
//确定瓷砖之间的实际距离
var d=2*gridSize*Math.cos（Math.PI/6）；
//清除所有旧瓷砖
forEach（函数（六边形）{
hexagon.setMap（空）；
});
hexgrid=[]；
//确定左上角的位置。
bounds=map.getBounds（）；
ne=bounds.getNorthEast（）；
sw=bounds.getSouthWest（）；
var点=新拉特隆（东北拉特（），西南液化天然气（））；
//…直到我们在屏幕底部。。。
而（point.lat>sw.lat（））{
//保留这个，这样当我们移到右边时，我们就知道回到哪里去了
leftPoint=new LatLon（point.lat，point.lon）。destinationPoint（d150）。destinationPoint（d210）。destinationPoint（d270）。destinationPoint（d90）
步骤=1；
而（point.lon<代码> > P>请考虑谷歌地图是墨卡托投影。
您必须补偿投影上的球体。