使用谷歌地图创建点密度图

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