在Google地圖中拼貼連續的多邊形

Question

我試圖在Google地圖中繪製六邊形網格。我想出了一個基於this answer的解決方案，在較高的縮放比例下看起來不錯，但當進一步放大時，我發現經典的「桔皮」問題發生：六邊形不再像以前一樣適合：

我使用this rather cool geodesy library基於橢圓體模型（因爲二維模型顯然並不現實世界的地圖上工作）來計算六邊形中心，但縮小時，它仍然看起來相當糟糕。

優選地，我想繪製六邊形以這樣的方式使得它們完全一樣的形狀和尺寸在屏幕上。

下面是我一直在使用的代碼，也可以作爲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

請考慮谷歌地圖是在墨卡託投影。 你必須在投影上補償地球的球體。 https://en.wikipedia.org/wiki/Mercator_projection