4

Tenho um polígono formado, a princípio, com 3 arestas, basicamente criado usando 3 locais: Maiami, Porto Rico e Bermudas. Peguei o exemplo na documentação que mostra como criar um polígono simples. Porém, por padrão exigida da API, deve-se centralizar o mapa em algum lugar (senão nem abre o mapa), no qual centralizei no Rio de Janeiro, através das coordenadas. Veja abaixo e dê zoom:

function initialize() {
  var map = new google.maps.Map(document.getElementById("map_canvas"), {
    zoom: 10,
    center: new google.maps.LatLng(-22.91711261458102, -43.16944599151611),
    mapTypeId: "roadmap"
  });

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [{
      lat: 25.774,
      lng: -80.190
    },
    {
      lat: 18.466,
      lng: -66.118
    },
    {
      lat: 32.321,
      lng: -64.757
    },
    {
      lat: 25.774,
      lng: -80.190
    }
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

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

Uma forma que encontrei foi apontar o centro do mapa para qualquer ponto do polígono, porém não estará totalmente centralizado (baita perfeccionismo). A questão é que, gostaria de centralizar o mapa no meio do polígono, no qual estarei criando dinamicamente.

Qual seria melhor forma de fazer isso? Como centralizar mapa no meio do polígono?

3
  • Já tentou calcular o baricentro do polígono? No caso de um triângulo (polígono de 3 arestas), já há uma fórmula para isso (talvez precise adaptar para a geometria esférica); fórmula para geometria plana Commented 22/06/2017 às 2:16
  • @JeffersonQuesado mas ai teria que me retornar em formato de latitude e longitude. =D entendes isso ?
    – viana
    Commented 22/06/2017 às 2:19
  • pois é, essa seria uma das adaptações para geometria esférica... Já tentou tirar a média aritmética de todos os pontos? (exclua o primeiro/último porque ele é repetido) Tipo, centro = (sum(p[i].lat)/size(p), sum(p[i].lon)/size(p)) Commented 22/06/2017 às 2:24

1 Resposta 1

7

A ideia é calcular o baricentro de um polígono e usar isso como coordenada do mapa.

O baricentro de um polígono é dado pela média aritmética das coordenadas (cartesianas!, detalhe importante para depois) dos pontos do polígono. De grosso modo, o seguinte algoritmo calcula isso:

x_baricentro = somatório (x dos pontos) / tamanho(pontos)
y_baricentro = somatório (y dos pontos) / tamanho(pontos)

O problema, entretanto, está que as coordenadas são dadas por coordenadas esféricas em graus! Para resolver isso, precisamos transformar essas coordenadas em radianos (180 graus vale pi radianos). A fórmula geral é essa:

theta_rad = theta_graus * pi / 180

A conversão oposta é:

theta_graus = theta_rad *180/pi

Ok, agora temos a conversão para radianos. Agora, precisamos converter de radianos para um ponto no espaço cartesiano. Usei as fórmulas contidas nessa pergunta do SO internacional.

x = cos(lat) * cos(lon)
y = cos(lat) * sin(lon)
z = sin(lat)

Com isso, obtenho a média de (x,y,z), vou chamar de (x_c,y_c,z_c) aqui na explicação. A partir desses valores, preciso converter de volta para radianos:

lon_rad = atan2(y, x)
hyp_rad = sqrt(x * x + y * y)
lat_rad = atan2(z, hyp)

Daí, só transformar para graus e ser feliz. O código abaixo está meio sujo e poluído, mas faz esses cálculos do jeito que foi mostrado.

function initialize() {
  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [{
      lat: 25.774,
      lng: -80.190
    },
    {
      lat: 18.466,
      lng: -66.118
    },
    {
      lat: 32.321,
      lng: -64.757
    },
    {
      lat: 25.774,
      lng: -80.190
    }
  ];

  var x_cart = 0;
  var y_cart = 0;
  var z_cart = 0;
  var i;

  // ignorando primeiro elemento
  for (i = 1; i < triangleCoords.length; i++) {
      var x, y, z;
      var lat, lon;

      lat = triangleCoords[i].lat * Math.PI / 180; // transforma para radianos
      lon = triangleCoords[i].lng * Math.PI / 180; // transforma para radianos

      // obtém as coordenadas cartesianas
      x = Math.cos(lat) * Math.cos(lon);
      y = Math.cos(lat) * Math.sin(lon);
      z = Math.sin(lat);

      x_cart += x;
      y_cart += y;
      z_cart += z;
  }

  // média das coordenadas cartesianas
  x_cart = x_cart/(triangleCoords.length - 1.0);
  y_cart = y_cart/(triangleCoords.length - 1.0);
  z_cart = z_cart/(triangleCoords.length - 1.0);

  // processo para voltar a coordenadas esféricas
  var lng_c, hyp, lat_c;

  lng_c = Math.atan2(y_cart, x_cart);
  hyp = Math.sqrt(x_cart * x_cart + y_cart * y_cart);
  lat_c = Math.atan2(z_cart, hyp);

  // de volta para graus, saindo dos radianos

  lng_c = lng_c * 180.0/Math.PI;
  lat_c = lat_c * 180.0/Math.PI;

  var center = {
     lat: lat_c,
     lng: lng_c
 };
 console.log('lat lng' + lat_c + ',' + lng_c);

  var map = new google.maps.Map(document.getElementById("map_canvas"), {
    zoom: 4,
    center: new google.maps.LatLng(center.lat, center.lng),
    mapTypeId: "roadmap"
  });

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

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


O @viana descobriu depois a função da própria API do GoogleMaps que faz o cálculo do baricentro.

Essa função é bounds.getCenter(), sendo var bounds = new google.maps.LatLngBounds(). Note que é necessário adicionar os pontos desejados nessa borda para pegar o centro.

function initialize() {
  // Define the LatLng coordinates for the polygon's path.
  var bounds = new google.maps.LatLngBounds();
  var i;

  var polygonCoords = [
     new google.maps.LatLng(25.774252, -80.190262),
     new google.maps.LatLng(18.466465, -66.118292),
     new google.maps.LatLng(32.321384, -64.757370),
     new google.maps.LatLng(25.774252, -80.190262)
  ];

  // ignorando o primeiro elemento
  for (i = 1; i < polygonCoords.length; i++) {
     bounds.extend(polygonCoords[i]);
  }

  // Aqui imprime a coordenada central em relação ao poligono - (25.3939245, -72.473816)
  console.log(bounds.getCenter());

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

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: polygonCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

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

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 .