使用Google地圖創建點密度地圖

Question

我想使用Google地圖創建點密度地圖。我列出了我所在州的所有縣以及相應的人口。我想知道如何在每個縣內隨機放置一些點來代表該縣的人口。我們想製作一個點密度圖而不是一個等值線圖，因爲我們更喜歡這種表示方法，但我無法弄清楚如何在多邊形輪廓之間分配點。

這是我想要做的一個糟糕的例子。

Answer 1

好吧，我來一個非常低效而且適用解決我的問題。如果有人願意幫我改進我的方法或自己使用它，這就是我所做的。

我用this answer作爲指導來測試點是否落入特定的多邊形。當我創建勾畫出我州州縣邊界的多邊形時，我將每個緯度添加到一個數組，並將每個經度添加到另一個數組。然後，我確定每個陣列的最小值和最大值作爲邊界框，爲了落入縣線內，必須要有一個點。然後我在這些分鐘和最大值之間選擇隨機數，並測試它們是否屬於縣內。如果他們這樣做，我在那裏添加一個標記。我在一個循環內做這些事情，計算添加了多少標記，直到它與該特定縣的人口成比例。這裏是代碼：

function addMarkers() { 
      var loc = "Resources/CaliforniaCounties.json"; 

      $.getJSON(loc, function (data) { 
       $.each(data.features, function (key, val) { 

        var xArray = []; // 
        var yArray = []; // 

        var coords = []; 
        var latlng; 
        var bounds = new google.maps.LatLngBounds(); 
        var polygon; 

        $.each(val.geometry.coordinates[0], function (i, item) { 
         latlng = new google.maps.LatLng(item[1], item[0]); 
         xArray.push(item[0]); // 
         yArray.push(item[1]); // 
         coords.push(latlng); 
         bounds.extend(latlng); 
        }); 

        var nverts = xArray.length; // 
        var maxX = Math.max.apply(null, xArray); // 
        var maxY = Math.max.apply(null, yArray); // 
        var minX = Math.min.apply(null, xArray); // 
        var minY = Math.min.apply(null, yArray); // 


        polygon = new google.maps.Polygon({ 
         paths: coords, 
         strokeColor: "#000000", 
         strokeOpacity: 1, 
         strokeWeight: 01, 
         fillColor: "#cccccc", 
         fillOpacity: .5 
        }); 

        polygon.center = bounds.getCenter(); 
        addPolygonClickListener(polygon, val); 
        polygon.setMap(map); 

        polygonArray[val.properties.Name] = polygon; 


        var i = 1; 
        while(i < populations[val.properties.Name]/10000){ 
         var testX = Math.random() * (maxX - minX) + minX; // 
         var testY = Math.random() * (maxY - minY) + minY; // 

         if(pnpoly(nverts, xArray, yArray, testX, testY) == 1){ // 
          var mlatlng = new google.maps.LatLng(testY, testX); // 
          var marker = new google.maps.Marker({ position: mlatlng, icon: "Resources/dot.png", map: map }); // 
          i++; 
         } 
        } 



       }); 
      }); 

     function pnpoly(nvert, vertx, verty, testx, testy) 
     { 
      var i, j, c = 0; 
      for (i = 0, j = nvert-1; i < nvert; j = i++) 
      { 
       if (((verty[i]>testy) != (verty[j]>testy)) && 
       (testx < (vertx[j]-vertx[i]) * (testy-verty[i])/(verty[j]-verty[i]) + vertx[i])) 
       { 
       c = !c; 
       } 
      } 
      return c; 
     } 

Answer 2

我有一個更有效的方式來做到這一點。您可以使用相同的功能創建顏色貼圖，這是第二個隱形畫布元素。在這裏，每個縣是從它的特徵列表中的索引派生的唯一顏色。使用getImageData（），你可以得到畫布的位圖。然後，您可以使用它來檢查您的隨機邊界框約束座標是否屬於該縣，方法是檢查該座標處的顏色映射的顏色。這個測試是O（1）操作，其中你的看起來像是O（n）。

我使用這種技術來創建中國縣縣的點密度圖，性能很好。我開始與這傢伙的代碼示例：

https://gist.github.com/awoodruff/94dc6fc7038eba690f43