javascript - 在谷歌地图中平铺连续的多边形

Question

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

我正在使用 this rather cool geodesy library基于椭圆模型计算六边形中心(因为 2d 模型显然不适用于真实世界的 map )，但缩小时看起来仍然很糟糕。

最好，我想以这样的方式绘制六边形，使它们在屏幕上的形状和大小完全相同。

这是我一直在使用的代码，也可以作为 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 map 采用墨卡托投影。您必须在投影上补偿地球的球体。 https://en.wikipedia.org/wiki/Mercator_projection