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

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

1 个答案: