3

Usando a API do Google Maps, estou criando alguns pontos (marcadores customizados) aleatórios dentro de um polígono. Criei, a princípio, uma função no qual percorro um laço de 100 posições e distribuo aleatoriamente os pontos dentro do polígono. Caso a coordenada gerada caia fora do polígono, essa mesma nem é desenhada no mapa, fazendo com que nem sempre gere 100 pontos dentro do mesmo. Vejam a mágica acontecendo:

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>

<body onload="initialize()">
  <div id="map_canvas2" style="height: 100vh; width:100vw"></div>
</body>

No entanto, na realidade eu gostaria que esses pontos fossem distribuídos uniformemente, com espaçamentos iguais, dentro desse polígono, e não aleatoriamente, como por exemplo 50 metro de distância um do outro. Como eu poderia fazer isso? Como posso distribuir pontos(marcadores) uniformemente dentro de um polígono?

4
  • Já tentou a boa e velha grade cartesiana? Aí você identifica de está dentro do polígono e, se estiver, não desenha. Commented 23/10/2017 às 4:26
  • 1
    @JeffersonQuesado A logica do desenho está certa, esse código a cima já faz. O que de fato faltaria seria criar de fato uma grade, ou algo semelhante. xD
    – viana
    Commented 23/10/2017 às 4:28
  • Muito JavaScript para eu tentar do celular... mas pode ajudar: pegue a coordenada mais à esquerda e a mais à direita, tire dez fatias da diferença; faço o mesmo para as coordenadas mais ao sul é mais ao norte; utilize o menor desses fatores encontrados. Para NS indo do mais ao sul até o mais ao norte nesse passo, para LO indo do mais ao oeste até o mais ao leste nesse passo, verifique se NS,LO está dentro do polígono e se sim desenhe esse ponto Commented 23/10/2017 às 4:32
  • 1
    Não é uma coisa tão simples, e depende da "precisão" desejada. Você pode partir de um grid pré definido e alterar a escala até caber o número desejado de pontos (por exemplo um "grid de triangulos", se é que dá pra chamar de grid), ou algo mais complexo (quem sabe até adaptar algo "maluco" como floyd-steinberg que não foi feito pra isso...). Talvez aqui ache algo duckduckgo.com/?q=evenly+points+polygon
    – Largato
    Commented 23/10/2017 às 8:14

1 Resposta 1

0

Você pode utilizar a função while, ao em vez de usar o for, ficando desta forma:

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

Desta maneira ele vai repetir o while até chegar a 100 e apenas será somado mais um a varável contador se ele entrar no if e criar um marcador.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .