Как получить квадратный метр или квадратный километр используя html5 / ionic - PullRequest
Новая
       15

Как получить квадратный метр или квадратный километр используя html5 / ionic

0 голосов
/ 25 мая 2018

Вот о чем я думаю.Я хочу получить местоположение пользователя с помощью GPS.Вместо отправки текущей позиции я хочу вычислить квадратный километр или метр. 

----------------------------------
|                                |
|                                |
|                                | 
|                                |
|              .                 |
|              ^                 |
|      My current position       |
|                                |
|                                |
|                                |
----------------------------------

Как вы можете видеть на рисунке выше, моя текущая позиция, но я хочу вычислить всю область вокруг нее в HTML5 или Ionic, будетболее предпочтительный.

Обновление

enter image description here

На изображении выше красная точка - это моя позиция, и мне нужно, чтобы вся область была краснойпрямоугольник.Получите этот магазин в базе данных.Я посмотрел формулы площади многоугольника, но для этого требуется несколько вершин, а при геолокации я получаю только долготу и широту только две координаты.Как мне это сделать, используя эти две точки?

ОБНОВЛЕНИЕ

Я нашел решение здесь , но это решение - отслеживать текущее местоположение пользователя и в функции calculateDistanceВ формуле используются как текущее местоположение (долгота и широта), так и местоположение отслеживания (долгота и широта), т.е. Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * Math.sin(dLon/2) * Math.sin(dLon/2);

Это отлично работает для моего второго сценария, но сначала я не хочу сначала отслеживать местоположение пользователя.Сначала я просто получаю текущее местоположение пользователя (долготу и широту), вычисляю площадь и отправляю его на сервер.Теперь я не уверен, как мне этого добиться.Любая помощь?

Ответы [ 2 ]

0 голосов
/ 04 июня 2018

Я создал круг на картах Google, а затем получил его границы, которые возвращают квадратные ограничивающие прямоугольники. 

function getBounds(latLng, radius) {
  /*
  * Params:
  *     latLng: google maps LatLng object or object literal  // example: { lat: -34.397, lng: 150.644 }
  *     radius: Number(int) in Miters. For example 1000 will be 1 sq Kilometer
  * Returns:
  *     object literal in the following format:
  *         {
                northEast: {
                  lat: (float),
                  lng: (float),
                },
                southWest: {
                  lat: (float),
                  lng: (float),
                },
            }
  * */

  const circle = new google.maps.Circle({
    center: latLng,
    radius: radius
  });
  const bounds = circle.getBounds();
  const northEast = bounds.getNorthEast();
  const southWest = bounds.getSouthWest();
  return {
    northEast: {
      lat: northEast.lat(),
      lng: northEast.lng(),
    },
    southWest: {
      lat: southWest.lat(),
      lng: southWest.lng(),
    },
  };
}

Я взял библиотеку, чтобы добавить короткий фрагмент кода, чтобы вы могли убедиться, что это правильный ответ для того, что вы искали.После нажатия на карту вы увидите маркер и треугольник вокруг него.

Примечание : скопируйте код и добавьте свой ключ API карты Google. Без вашего ключа API карта не загрузится. 

let map;
let marker;
let rectangle;

function initMap() {
  const latLng = {
    lat: -34.397,
    lng: 150.644
  };
  const radius = 1000;
  map = new google.maps.Map(document.getElementById('map'), {
    center: latLng,
    zoom: 11,
  });
  google.maps.event.addListener(map, 'click', function(event) {
    const location = event.latLng;
    const bounds = getBounds(location, 1000);
    console.log(bounds);
    addRectangle(bounds);
    addMarker(location);
  });
}

function addMarker(location) {
  if (marker) {
    marker.setMap(null);
  }
  marker = new google.maps.Marker({
    position: location,
    map: map,
  });
}

function addRectangle(bounds) {
  if (rectangle) {
    rectangle.setMap(null);
  }
  rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      north: bounds.northEast.lat,
      south: bounds.southWest.lat,
      east: bounds.northEast.lng,
      west: bounds.southWest.lng,
    },
  });
}

function getBounds(latLng, radius) {
  /*
  * Params:
  *     latLng: google maps LatLng object or object literal  // example: { lat: -34.397, lng: 150.644 }
  *     radius: Number(int) in Miters. For example 1000 will be 1 sq Kilometer
  * Returns:
  *     object literal in the following format:
  *         {
                northEast: {
                  lat: (float),
                  lng: (float),
                },
                southWest: {
                  lat: (float),
                  lng: (float),
                },
            }
  * */

  const circle = new google.maps.Circle({
    center: latLng,
    radius: radius
  });
  const bounds = circle.getBounds();
  const northEast = bounds.getNorthEast();
  const southWest = bounds.getSouthWest();
  return {
    northEast: {
      lat: northEast.lat(),
      lng: northEast.lng(),
    },
    southWest: {
      lat: southWest.lat(),
      lng: southWest.lng(),
    },
  };
}
/* Always set the map height explicitly to define the size of the div
         * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<div id="map"></div>
0 голосов
/ 04 июня 2018

Вот функция (с использованием ES6), которая принимает широту, долготу и площадь в квадратных километрах от квадрата и возвращает объект, содержащий четыре стороны квадрата (две широты и две долготы) с центром в этом месте.

function getBoundaries(lat, lon, area) {
  // angle conversions
  const toRad = t => t * Math.PI / 180;
  const toDeg = t => t * 180 / Math.PI;

  // radius of the Earth (km)
  const radius = 6371;

  // calculate distance to the sides of the square
  const dist = Math.sqrt(area)/2;

  // calculate change in coordinates
  const dLat = toDeg(dist / (radius * Math.cos(toRad(lon))));
  const dLon = toDeg(dist / radius);

  return {
    north: lat + dLat,
    south: lat - dLat,
    east: lon + dLon,
    west: lon - dLon
  }
}

Так, например, если вам нужен квадрат площадью 10 квадратных километров с центром в 40 ° северной широты и 74 ° западной долготы, ваш квадрат будет равен 

const square = getBoundaries(40, -74, 10);
// {north: 40.051587793956195, south: 39.948412206043805, east: -73.98578047688149, west: -74.01421952311851}
...