在 Google 地图中平铺连续的多边形

Question

我正在尝试在 Google 地图中绘制六边形网格。我提出了一个基于this answer 的解决方案，它在更高的缩放比例下看起来不错，但是当进一步放大时，我发现出现了经典的“橘皮”问题：六边形不再像它们应该的那样组合在一起：

我正在使用this rather cool geodesy library 来计算基于椭圆体模型的六边形中心（因为 2d 模型显然不适用于现实世界的地图），但缩小后看起来仍然很糟糕。

最好是绘制六边形，使它们在屏幕上的形状和大小完全相同。

这是我一直在使用的代码，也可以作为 Plunker here. 提供'缩小时看起来不正确。

  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);

Answer 1

请考虑 Google 地图是墨卡托投影。 您必须在投影上补偿地球的球体。 https://en.wikipedia.org/wiki/Mercator_projection