How to count the points that fall into a polygon?

M

Mikhail Korolkov2020-06-01 19:15:52

JavaScript

Mikhail Korolkov, 2020-06-01 19:15:52

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <style>
        html,
        body,
        #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <div id="map"></div>
    <!-- Replace the value of the key parameter with your own API key. -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDyAnMcgQ4TqGttyFKA5hxWYxIkzZpo3V8&callback=initMap" async defer></script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {
        lat: 50.475713,
        lng: 30.516879
    },
    mapTypeId: 'terrain'
});
var infoWindow = new google.maps.InfoWindow();
var coords = [{
    "id": "1",
    "delete": "0",
    "date": "0000-00-00 00:00:00",
    "altered": "0000-00-00 00:00:00",
    "region": "\u041a\u0438\u0435\u0432",
    "number": "71",
    "number_avto": "A\u04109612MO",
    "company": "\u041e\u0445\u0440\u0430\u043d\u043d\u044b\u0439 \u0425\u043e\u043b\u0434\u0438\u043d\u0433",
    "polygon": "[{\"lat\": 50.47674958836734, \"lng\": 30.493953871490476}, {\"lat\": 50.475309302071445, \"lng\": 30.495704056793215}, {\"lat\": 50.474063853648836, \"lng\": 30.49422466986084}, {\"lat\": 50.47320895722949, \"lng\": 30.49427891026312}, {\"lat\": 50.472572552772064, \"lng\": 30.49364650515747}, {\"lat\": 50.47134751780746, \"lng\": 30.492950323257446}, {\"lat\": 50.470256983547614, \"lng\": 30.491679552406367}, {\"lat\": 50.46924734941041, \"lng\": 30.490926149784173}, {\"lat\": 50.465116242336634, \"lng\": 30.487346890909294}, {\"lat\": 50.46388061190283, \"lng\": 30.487898233917235}, {\"lat\": 50.45984277476289, \"lng\": 30.48338869568056}, {\"lat\": 50.456463079337894, \"lng\": 30.480110179491476}, {\"lat\": 50.452099445789955, \"lng\": 30.47760413949868}, {\"lat\": 50.44992157612657, \"lng\": 30.48818727949856}, {\"lat\": 50.44910997180602, \"lng\": 30.49383515491104}, {\"lat\": 50.44858801010621, \"lng\": 30.495888237251393}, {\"lat\": 50.448641710126985, \"lng\": 30.497545195589964}, {\"lat\": 50.44784190593388, \"lng\": 30.498376356968265}, {\"lat\": 50.446188077029404, \"lng\": 30.499153874166268}, {\"lat\": 50.4439110070313, \"lng\": 30.512129107715168}, {\"lat\": 50.44282764487858, \"lng\": 30.52010877441319}, {\"lat\": 50.44741131849923, \"lng\": 30.52222790929227}, {\"lat\": 50.447505359439624, \"lng\": 30.522281932987198}, {\"lat\": 50.44758412969209, \"lng\": 30.522497268737652}, {\"lat\": 50.44917635269867, \"lng\": 30.52372187410697}, {\"lat\": 50.45109683800667, \"lng\": 30.527276154959736}, {\"lat\": 50.451500702391556, \"lng\": 30.528142862379582}, {\"lat\": 50.45060659361875, \"lng\": 30.52935289255322}, {\"lat\": 50.45218456100838, \"lng\": 30.53454367481322}, {\"lat\": 50.453666840867605, \"lng\": 30.53721318059911}, {\"lat\": 50.45599925084942, \"lng\": 30.531309787612827}, {\"lat\": 50.456736277693906, \"lng\": 30.529893879363954}, {\"lat\": 50.457907029196186, \"lng\": 30.528081004180876}, {\"lat\": 50.460986779261845, \"lng\": 30.525619034416195}, {\"lat\": 50.4669647056591, \"lng\": 30.524616484466605}, {\"lat\": 50.47107157507795, \"lng\": 30.524606053741536}, {\"lat\": 50.47192786481432, \"lng\": 30.523308162689204}, {\"lat\": 50.476818524839466, \"lng\": 30.511938024810775}, {\"lat\": 50.477310557159385, \"lng\": 30.505297482376136}, {\"lat\": 50.4801236872805, \"lng\": 30.505281692665108}, {\"lat\": 50.48047892219089, \"lng\": 30.501360606628396}, {\"lat\": 50.4783080422313, \"lng\": 30.500625984901376}, {\"lat\": 50.47854039632276, \"lng\": 30.498861394912637}, {\"lat\": 50.479366623693544, \"lng\": 30.49759286182018}, {\"lat\": 50.4791687394576, \"lng\": 30.49769761974335}, {\"lat\": 50.48114192312777, \"lng\": 30.490249277080466}, {\"lat\": 50.47936012517129, \"lng\": 30.490096542938204}, {\"lat\": 50.47795928900465, \"lng\": 30.492904971771168}]",
    "color": "#fef200"
}, {
    "id": "2",
    "delete": "0",
    "date": "0000-00-00 00:00:00",
    "altered": "0000-00-00 00:00:00",
    "region": "\u041a\u0438\u0435\u0432",
    "number": "72",
    "number_avto": "\u0410\u04102363\u0420\u0410",
    "company": "\u041e\u0445\u0440\u0430\u043d\u043d\u044b\u0439 \u0425\u043e\u043b\u0434\u0438\u043d\u0433",
    "polygon": "[{\"lat\": 50.518486179037176, \"lng\": 30.459471392395017}, {\"lat\": 50.51360885678462, \"lng\": 30.456252157589006}, {\"lat\": 50.506110880829375, \"lng\": 30.459255647697432}, {\"lat\": 50.50012037289259, \"lng\": 30.460885262802094}, {\"lat\": 50.48961149033943, \"lng\": 30.4700668105163}, {\"lat\": 50.48786763996452, \"lng\": 30.478988530212405}, {\"lat\": 50.48847649762083, \"lng\": 30.483518483917237}, {\"lat\": 50.48618493179595, \"lng\": 30.489543321586552}, {\"lat\": 50.48460220660303, \"lng\": 30.48950875098035}, {\"lat\": 50.48214558580464, \"lng\": 30.489474180374145}, {\"lat\": 50.48076856089214, \"lng\": 30.49039209207922}, {\"lat\": 50.4811996902367, \"lng\": 30.49402678340539}, {\"lat\": 50.47939439932129, \"lng\": 30.49970651004992}, {\"lat\": 50.482340821721166, \"lng\": 30.501094702270507}, {\"lat\": 50.482936096904346, \"lng\": 30.515001658691403}, {\"lat\": 50.482429535005174, \"lng\": 30.52099967427057}, {\"lat\": 50.48246912376432, \"lng\": 30.52699768984985}, {\"lat\": 50.48128736691, \"lng\": 30.53276473734286}, {\"lat\": 50.48250871249031, \"lng\": 30.537845139328056}, {\"lat\": 50.48567253430273, \"lng\": 30.535643194782324}, {\"lat\": 50.48594183510836, \"lng\": 30.5297505306321}, {\"lat\": 50.48746716996721, \"lng\": 30.530423914150333}, {\"lat\": 50.48831173181515, \"lng\": 30.53239138899039}, {\"lat\": 50.48839176647237, \"lng\": 30.52594745635986}, {\"lat\": 50.48865820109151, \"lng\": 30.52845830754086}, {\"lat\": 50.48942975396104, \"lng\": 30.531248108459522}, {\"lat\": 50.49254402578211, \"lng\": 30.544530483387007}, {\"lat\": 50.49316007397842, \"lng\": 30.543758083076455}, {\"lat\": 50.493777985809984, \"lng\": 30.54370176617283}, {\"lat\": 50.49453239313523, \"lng\": 30.54278714238444}, {\"lat\": 50.49342031778105, \"lng\": 30.54104372549625}, {\"lat\": 50.49272500960682, \"lng\": 30.54176259545511}, {\"lat\": 50.49032415837577, \"lng\": 30.53161319242861}, {\"lat\": 50.49524550636781, \"lng\": 30.52260127368163}, {\"lat\": 50.5123059660119, \"lng\": 30.513933588317855}, {\"lat\": 50.51485116560912, \"lng\": 30.51615506446842}, {\"lat\": 50.52225314600434, \"lng\": 30.52275390573118}, {\"lat\": 50.53298205380208, \"lng\": 30.512229524642862}, {\"lat\": 50.53305387865268, \"lng\": 30.499500064201357}, {\"lat\": 50.53303523423201, \"lng\": 30.485839725459982}, {\"lat\": 50.54014970376445, \"lng\": 30.48536434185496}, {\"lat\": 50.54060870430012, \"lng\": 30.49209873608197}, {\"lat\": 50.55624544245322, \"lng\": 30.492333113066024}, {\"lat\": 50.571222847713784, \"lng\": 30.4888767704457}, {\"lat\": 50.57626535215849, \"lng\": 30.493119302760988}, {\"lat\": 50.586648111220214, \"lng\": 30.496846850945303}, {\"lat\": 50.591171316276174, \"lng\": 30.48366575349985}, {\"lat\": 50.58130802291522, \"lng\": 30.470312994677442}, {\"lat\": 50.567355114844794, \"lng\": 30.454152478186643}, {\"lat\": 50.562287573724355, \"lng\": 30.46818001698216}, {\"lat\": 50.55362327117492, \"lng\": 30.47331830075018}, {\"lat\": 50.548290036917756, \"lng\": 30.478788349731417}]",
    "color": "#008000"
}];




var object_in_array = [];
for (var i = 0; i < coords.length; i++) {
    var coord = coords[i];
    // TODO: исправить генерирование данных
    var coordinate = JSON.parse(coords[i].polygon);
    polygon = new google.maps.Polygon({
        paths: coordinate,
        strokeColor: coord.color,
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: coord.color,
        fillOpacity: 0.35,
        Editable: false,
        draggable: false
    });
    polygon.setMap(map);
    polygon.addListener('click', showNumber(coord.number));
};

function showNumber(number) {
    return function(event) {
        infoWindow.setContent(number);
        infoWindow.setPosition(event.latLng);
        infoWindow.open(map);
    }
}


var dots = [{
        'lat': 50.4584506,
        'lng': 30.522257
    },
    {
        'lat': 50.458615,
        'lng': 30.518116
    },
    {
        'lat': 50.456525,
        'lng': 30.494649
    },
    {
        'lat': 50.565899,
        'lng': 30.478956
    },
    {
        'lat': 50.505899,
        'lng': 30.478956
    }
]


console.log(typeof dots);
for (var i = 0; i < dots.length; i++) {
    var coords = dots[i];
    //                console.log(coords.lat);
    var latLng = new google.maps.LatLng(coords.lat, coords.lng);
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        animation: google.maps.Animation.DROP,

    });
};


}
</script>
</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

0

0xD34F, 2020-06-01
@misha1994

Iterate over an array of dots, counting the number of positive results from calls to containsLocation :

function showDotsCountInPolygon(e) {
  const dotsCountInPolygon = dots
    .filter(n => google.maps.geometry.poly.containsLocation(new google.maps.LatLng(n), this))
    .length;

  infoWindow.setContent(`Точек в полигоне: ${dotsCountInPolygon}`);
  infoWindow.setPosition(e.latLng);
  infoWindow.open(map);
}

polygon.addListener('click', showDotsCountInPolygon);

https://jsfiddle.net/awcu8de9/