How to distribute points evenly inside a polygon?

Question

How to distribute points evenly inside a polygon?

Navigation

#1 by (0 votes)

3

Using the Google Maps API , I'm creating some random (custom markers) points within a polygon. I created, at first, a function in which I run a loop of 100 positions and randomly distribute the points inside the polygon. If the generated coordinate falls outside the polygon, it is not even drawn on the map, so it does not always generate 100 points inside it. Look at the magic happening:

function initialize() {
  var bounds = new google.maps.LatLngBounds();
  var i;

  var polygonCoords = [
    new google.maps.LatLng(-23.554548, -46.607911),
    new google.maps.LatLng(-23.556043, -46.595058),
    new google.maps.LatLng(-23.564403, -46.593942),
    new google.maps.LatLng(-23.567884, -46.604757)
  ];


  for (i = 0; i < polygonCoords.length; i++) {
    bounds.extend(polygonCoords[i]);
  }

  var map = new google.maps.Map(document.getElementById("map_canvas2"), {
    zoom: 14,
    center: bounds.getCenter(),
    mapTypeId: "roadmap"
  });

  var sp_mooca = new google.maps.Polygon({
    paths: polygonCoords,
    strokeColor: '#000000',
    strokeOpacity: 0.5,
    strokeWeight: 2,
    fillColor: '#000000',
    fillOpacity: 0.2
  });
  sp_mooca.setMap(map);

  gerarPontosAleatoriosNoPoligono(sp_mooca, map)
}

function gerarPontosAleatoriosNoPoligono(poli, map) {

  var bounds = new google.maps.LatLngBounds();

  for (var i = 0; i < poli.getPath().getLength(); i++) {
    bounds.extend(poli.getPath().getAt(i));
  }
  var sw = bounds.getSouthWest();
  var ne = bounds.getNorthEast();

  for (var i = 0; i <= 100; i++) {

    var ptLat = Math.random() * (ne.lat() - sw.lat()) + sw.lat();
    var ptLng = Math.random() * (ne.lng() - sw.lng()) + sw.lng();
    var point = new google.maps.LatLng(ptLat, ptLng);

    if (google.maps.geometry.poly.containsLocation(point, poli)) {

      var marker = new google.maps.Marker({
        position: point,
        map: map,
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          fillColor: "#0000ff",
          fillOpacity: 0.8,
          strokeColor: 'white',
          strokeWeight: .5,
          scale: 4
        }
      });
    }
  }
}

#map {
  height: 100%;
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script><bodyonload="initialize()">
  <div id="map_canvas2" style="height: 100vh; width:100vw"></div>
</body>

However, in reality I would like these points to be distributed evenly, with equal spacing, within this polygon, and not randomly, such as 50 meters apart. How could I do that? How can I distribute points (markers) evenly inside a polygon?

javascript google-maps google-maps-api-3

asked by anonymous 23.10.2017 / 05:27

1 answer

Audio plays in editor, but not on mobile The form gets stuck / stuck when I click the datetimepicker

score 0 · Answer 1

You can use the while function instead of using for , thus:

var contador = 0;

while(contador <= 100){

    var ptLat = Math.random() * (ne.lat() - sw.lat()) + sw.lat();
    var ptLng = Math.random() * (ne.lng() - sw.lng()) + sw.lng();
    var point = new google.maps.LatLng(ptLat, ptLng);

    if (google.maps.geometry.poly.containsLocation(point, poli)) {

      contador++;

      var marker = new google.maps.Marker({
        position: point,
        map: map,
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          fillColor: "#0000ff",
          fillOpacity: 0.8,
          strokeColor: 'white',
          strokeWeight: .5,
          scale: 4
        }
      });
    }
  }

In this way it will repeat the while until it reaches 100 and only one more countable counter will be added if it enters the if and create a marker.