javascript - 使用 Google map 创建点密度图

Question

我想使用 Google map 创建点密度图。我列出了我所在州的所有县及其相应的人口。我想知道如何在每个县内随机放置一些点来代表该县的人口。我们想要制作点密度图而不是分区统计图，因为我们更喜欢这种表示形式，但我不知道如何在多边形轮廓之间分布点。

对于我想要做的事情来说，这是一个很糟糕的例子。

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;
        }