Google Maps V3 - Как рассчитать уровень масштабирования для заданных границ
Я ищу способ вычисления уровня масштабирования для заданных границ с помощью API Карт Google V3, аналогично getBoundsZoomLevel() в API V2.
Вот что я хочу сделать:
// These are exact bounds previously captured from the map object
var sw = new google.maps.LatLng(42.763479, -84.338918);
var ne = new google.maps.LatLng(42.679488, -84.524313);
var bounds = new google.maps.LatLngBounds(sw, ne);
var zoom = // do some magic to calculate the zoom level
// Set the map to these exact bounds
map.setCenter(bounds.getCenter());
map.setZoom(zoom);
// NOTE: fitBounds() will not work
К сожалению, я не могу использовать метод fitBounds() для моего конкретного случая использования. Это хорошо работает для подгонки маркеров на карте, но не очень хорошо для точных границ. Вот пример того, почему я не могу использовать метод fitBounds().
map.fitBounds(map.getBounds()); // not what you expect
14 ответов
Аналогичный вопрос был задан в группе Google: http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/e6448fc197c3c892
Уровни масштабирования дискретны, а масштаб увеличивается на каждом шаге. Таким образом, в общем случае вы не можете точно определить границы, которые хотите (если вам не очень повезло с определенным размером карты).
Другой проблемой является соотношение длин сторон, например, вы не можете точно вписать границы в тонкий прямоугольник внутри квадратной карты.
Нет простого ответа на вопрос о том, как установить точные границы, потому что даже если вы хотите изменить размер карты div, вам нужно выбрать, какой размер и соответствующий уровень масштабирования вы измените (грубо говоря, вы делаете его больше или меньше) чем это сейчас?).
Если вам действительно нужно вычислить масштаб, а не сохранить его, это должно сработать:
Проекция Меркатора деформирует широту, но любая разница в долготе всегда представляет одну и ту же долю ширины карты (разность углов в градусах / 360). При нулевом увеличении карта всего мира имеет размер 256x256 пикселей, а масштабирование каждого уровня удваивает ширину и высоту. Поэтому после небольшой алгебры мы можем вычислить масштаб следующим образом, при условии, что мы знаем ширину карты в пикселях. Обратите внимание, что поскольку долгота изменяется, мы должны убедиться, что угол положительный.
var GLOBE_WIDTH = 256; // a constant in Google's map projection
var west = sw.lng();
var east = ne.lng();
var angle = east - west;
if (angle < 0) {
angle += 360;
}
var zoom = Math.round(Math.log(pixelWidth * 360 / angle / GLOBE_WIDTH) / Math.LN2);
Спасибо Giles Gardam за его ответ, но он касается только долготы, а не широты. Полное решение должно рассчитать уровень масштабирования, необходимый для широты, и уровень масштабирования, необходимый для долготы, а затем взять меньшее (дальше) из двух.
Вот функция, которая использует широту и долготу:
function getBoundsZoomLevel(bounds, mapDim) {
var WORLD_DIM = { height: 256, width: 256 };
var ZOOM_MAX = 21;
function latRad(lat) {
var sin = Math.sin(lat * Math.PI / 180);
var radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
}
function zoom(mapPx, worldPx, fraction) {
return Math.floor(Math.log(mapPx / worldPx / fraction) / Math.LN2);
}
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var latFraction = (latRad(ne.lat()) - latRad(sw.lat())) / Math.PI;
var lngDiff = ne.lng() - sw.lng();
var lngFraction = ((lngDiff < 0) ? (lngDiff + 360) : lngDiff) / 360;
var latZoom = zoom(mapDim.height, WORLD_DIM.height, latFraction);
var lngZoom = zoom(mapDim.width, WORLD_DIM.width, lngFraction);
return Math.min(latZoom, lngZoom, ZOOM_MAX);
}
Параметры:
Значение параметра "bounds" должно быть google.maps.LatLngBounds объект.
Значение параметра "mapDim" должно быть объектом со свойствами "height" и "width", которые представляют высоту и ширину элемента DOM, отображающего карту. Вы можете уменьшить эти значения, если хотите обеспечить заполнение. То есть вы можете не захотеть, чтобы маркеры карты в пределах границ находились слишком близко к краю карты.
Если вы используете библиотеку jQuery, mapDim Значение можно получить следующим образом:
var $mapDiv = $('#mapElementId');
var mapDim = { height: $mapDiv.height(), width: $mapDiv.width() };
Если вы используете библиотеку Prototype, значение mapDim можно получить следующим образом:
var mapDim = $('mapElementId').getDimensions();
Возвращаемое значение:
Возвращаемое значение - это максимальный уровень масштабирования, который будет отображать все границы. Это значение будет между 0 и максимальный уровень масштабирования включительно.
Максимальный уровень масштабирования составляет 21. (Я полагаю, что это было только 19 для Google Maps API v2.)
Объяснение:
Карты Google используют проекцию Меркатора. В проекции Меркатора линии долготы расположены на одинаковом расстоянии, а линии широты - нет. Расстояние между линиями широты увеличивается по мере их продвижения от экватора к полюсам. На самом деле расстояние стремится к бесконечности, поскольку оно достигает полюсов. Карта Google Карты, однако, не показывает широты выше приблизительно 85 градусов северной широты или ниже -85 градусов южной широты. ( справка) (Я рассчитываю фактическую отсечку на +/-85.05112877980658 градусов.)
Это делает расчет дробей для границ более сложным для широты, чем для долготы. Я использовал формулу из Википедии для расчета доли широты. Я предполагаю, что это соответствует проекции, используемой Google Maps. В конце концов, страница документации Google Карт, на которую я ссылаюсь выше, содержит ссылку на ту же страницу Википедии.
Другие заметки:
- Уровни масштабирования варьируются от 0 до максимального уровня масштабирования. Уровень масштабирования 0 - карта полностью уменьшена. Более высокие уровни увеличивают карту дальше. ( ссылка)
- При уровне масштабирования 0 весь мир может отображаться в области размером 256 x 256 пикселей. ( ссылка)
- Для каждого более высокого уровня масштабирования количество пикселей, необходимых для отображения одной и той же области, удваивается как по ширине, так и по высоте. ( ссылка)
- Карты оборачивают в продольном направлении, но не в широтном направлении.
Для API версии 3 это просто и работает:
var latlngList = [];
latlngList.push(new google.maps.LatLng (lat,lng));
var bounds = new google.maps.LatLngBounds();
latlngList.each(function(n){
bounds.extend(n);
});
map.setCenter(bounds.getCenter()); //or use custom center
map.fitBounds(bounds);
и некоторые дополнительные приемы:
//remove one zoom level to ensure no marker is on the edge.
map.setZoom(map.getZoom()-1);
// set a minimum zoom
// if you got only 1 marker or all markers are on the same address map will be zoomed too much.
if(map.getZoom()> 15){
map.setZoom(15);
}
Версия Дротика:
double latRad(double lat) {
final double sin = math.sin(lat * math.pi / 180);
final double radX2 = math.log((1 + sin) / (1 - sin)) / 2;
return math.max(math.min(radX2, math.pi), -math.pi) / 2;
}
double getMapBoundZoom(LatLngBounds bounds, double mapWidth, double mapHeight) {
final LatLng northEast = bounds.northEast;
final LatLng southWest = bounds.southWest;
final double latFraction = (latRad(northEast.latitude) - latRad(southWest.latitude)) / math.pi;
final double lngDiff = northEast.longitude - southWest.longitude;
final double lngFraction = ((lngDiff < 0) ? (lngDiff + 360) : lngDiff) / 360;
final double latZoom = (math.log(mapHeight / 256 / latFraction) / math.ln2).floorToDouble();
final double lngZoom = (math.log(mapWidth / 256 / lngFraction) / math.ln2).floorToDouble();
return math.min(latZoom, lngZoom);
}
Вот версия функции Kotlin:
fun getBoundsZoomLevel(bounds: LatLngBounds, mapDim: Size): Double {
val WORLD_DIM = Size(256, 256)
val ZOOM_MAX = 21.toDouble();
fun latRad(lat: Double): Double {
val sin = Math.sin(lat * Math.PI / 180);
val radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
return max(min(radX2, Math.PI), -Math.PI) /2
}
fun zoom(mapPx: Int, worldPx: Int, fraction: Double): Double {
return floor(Math.log(mapPx / worldPx / fraction) / Math.log(2.0))
}
val ne = bounds.northeast;
val sw = bounds.southwest;
val latFraction = (latRad(ne.latitude) - latRad(sw.latitude)) / Math.PI;
val lngDiff = ne.longitude - sw.longitude;
val lngFraction = if (lngDiff < 0) { (lngDiff + 360) } else { (lngDiff / 360) }
val latZoom = zoom(mapDim.height, WORLD_DIM.height, latFraction);
val lngZoom = zoom(mapDim.width, WORLD_DIM.width, lngFraction);
return minOf(latZoom, lngZoom, ZOOM_MAX)
}
Ни один из высоко оцененных ответов не помог мне. Они выдавали различные неопределенные ошибки и в конечном итоге вычисляли inf/nan для углов. Я подозреваю, что поведение LatLngBounds со временем изменилось. В любом случае, я обнаружил, что этот код работает для моих нужд, возможно, он может кому-то помочь:
function latRad(lat) {
var sin = Math.sin(lat * Math.PI / 180);
var radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
}
function getZoom(lat_a, lng_a, lat_b, lng_b) {
let latDif = Math.abs(latRad(lat_a) - latRad(lat_b))
let lngDif = Math.abs(lng_a - lng_b)
let latFrac = latDif / Math.PI
let lngFrac = lngDif / 360
let lngZoom = Math.log(1/latFrac) / Math.log(2)
let latZoom = Math.log(1/lngFrac) / Math.log(2)
return Math.min(lngZoom, latZoom)
}
Спасибо, это очень помогло мне найти наиболее подходящий коэффициент масштабирования для правильного отображения полилинии. Я нахожу максимальные и минимальные координаты среди точек, которые я должен отслеживать, и, если путь очень "вертикальный", я просто добавил несколько строк кода:
var GLOBE_WIDTH = 256; // a constant in Google's map projection
var west = <?php echo $minLng; ?>;
var east = <?php echo $maxLng; ?>;
*var north = <?php echo $maxLat; ?>;*
*var south = <?php echo $minLat; ?>;*
var angle = east - west;
if (angle < 0) {
angle += 360;
}
*var angle2 = north - south;*
*if (angle2 > angle) angle = angle2;*
var zoomfactor = Math.round(Math.log(960 * 360 / angle / GLOBE_WIDTH) / Math.LN2);
На самом деле, идеальным коэффициентом увеличения является zoomfactor-1.
Поскольку у всех остальных ответов, похоже, есть проблемы с тем или иным набором обстоятельств (ширина / высота карты, ширина / высота границ и т. Д.), Я решил поместить свой ответ здесь...
Здесь был очень полезный файл javascript: http://www.polyarc.us/adjust.js
Я использовал это как основу для этого:
var com = com || {};
com.local = com.local || {};
com.local.gmaps3 = com.local.gmaps3 || {};
com.local.gmaps3.CoordinateUtils = new function() {
var OFFSET = 268435456;
var RADIUS = OFFSET / Math.PI;
/**
* Gets the minimum zoom level that entirely contains the Lat/Lon bounding rectangle given.
*
* @param {google.maps.LatLngBounds} boundary the Lat/Lon bounding rectangle to be contained
* @param {number} mapWidth the width of the map in pixels
* @param {number} mapHeight the height of the map in pixels
* @return {number} the minimum zoom level that entirely contains the given Lat/Lon rectangle boundary
*/
this.getMinimumZoomLevelContainingBounds = function ( boundary, mapWidth, mapHeight ) {
var zoomIndependentSouthWestPoint = latLonToZoomLevelIndependentPoint( boundary.getSouthWest() );
var zoomIndependentNorthEastPoint = latLonToZoomLevelIndependentPoint( boundary.getNorthEast() );
var zoomIndependentNorthWestPoint = { x: zoomIndependentSouthWestPoint.x, y: zoomIndependentNorthEastPoint.y };
var zoomIndependentSouthEastPoint = { x: zoomIndependentNorthEastPoint.x, y: zoomIndependentSouthWestPoint.y };
var zoomLevelDependentSouthEast, zoomLevelDependentNorthWest, zoomLevelWidth, zoomLevelHeight;
for( var zoom = 21; zoom >= 0; --zoom ) {
zoomLevelDependentSouthEast = zoomLevelIndependentPointToMapCanvasPoint( zoomIndependentSouthEastPoint, zoom );
zoomLevelDependentNorthWest = zoomLevelIndependentPointToMapCanvasPoint( zoomIndependentNorthWestPoint, zoom );
zoomLevelWidth = zoomLevelDependentSouthEast.x - zoomLevelDependentNorthWest.x;
zoomLevelHeight = zoomLevelDependentSouthEast.y - zoomLevelDependentNorthWest.y;
if( zoomLevelWidth <= mapWidth && zoomLevelHeight <= mapHeight )
return zoom;
}
return 0;
};
function latLonToZoomLevelIndependentPoint ( latLon ) {
return { x: lonToX( latLon.lng() ), y: latToY( latLon.lat() ) };
}
function zoomLevelIndependentPointToMapCanvasPoint ( point, zoomLevel ) {
return {
x: zoomLevelIndependentCoordinateToMapCanvasCoordinate( point.x, zoomLevel ),
y: zoomLevelIndependentCoordinateToMapCanvasCoordinate( point.y, zoomLevel )
};
}
function zoomLevelIndependentCoordinateToMapCanvasCoordinate ( coordinate, zoomLevel ) {
return coordinate >> ( 21 - zoomLevel );
}
function latToY ( lat ) {
return OFFSET - RADIUS * Math.log( ( 1 + Math.sin( lat * Math.PI / 180 ) ) / ( 1 - Math.sin( lat * Math.PI / 180 ) ) ) / 2;
}
function lonToX ( lon ) {
return OFFSET + RADIUS * lon * Math.PI / 180;
}
};
Вы, конечно, можете очистить или минимизировать это при необходимости, но я долго держал имена переменных, чтобы облегчить их понимание.
Если вам интересно, откуда взялся OFFSET, очевидно, что 268435456 - это половина окружности Земли в пикселях при уровне масштабирования 21 (согласно http://www.appelsiini.net/2008/11/introduction-to-marker-clustering-with-google-maps).
Рассчитайте уровень масштабирования, чтобы отобразить карту, включающую два поперечных угла области, и отобразить карту на части экрана с определенной высотой.
Две координаты макс. широта/долгота мин. широта/долгота
Область отображения в пикселях по высоте
double getZoomLevelNew(context,
double maxLat, double maxLong,
double minLat, double minLong,
double height){
try {
double _zoom;
MediaQueryData queryData2;
queryData2 = MediaQuery.of(context);
double _zLat =
Math.log(
(globals.factor(height) / queryData2.devicePixelRatio / 256.0) *
180 / (maxLat - minLat).abs()) / Math.log(2);
double _zLong =
Math.log((globals.factor(MediaQuery
.of(context)
.size
.width) / queryData2.devicePixelRatio / 256.0) * 360 /
(maxLong - minLong).abs()) / Math.log(2);
_zoom = Math.min(_zLat, _zLong)*globals.zoomFactorNew;
if (_zoom < 0) {
_zoom = 0;
}
return _zoom;
} catch(e){
print("getZoomLevelNew - excep - " + e.toString());
}
Валерио почти прав с его решением, но есть некоторая логическая ошибка.
Вы должны сначала проверить, больше ли angle2, чем угол, прежде чем добавить 360 к отрицательному значению.
в противном случае у вас всегда есть большее значение, чем угол
Итак, правильное решение:
var west = calculateMin(data.longitudes);
var east = calculateMax(data.longitudes);
var angle = east - west;
var north = calculateMax(data.latitudes);
var south = calculateMin(data.latitudes);
var angle2 = north - south;
var zoomfactor;
var delta = 0;
var horizontal = false;
if(angle2 > angle) {
angle = angle2;
delta = 3;
}
if (angle < 0) {
angle += 360;
}
zoomfactor = Math.floor(Math.log(960 * 360 / angle / GLOBE_WIDTH) / Math.LN2) - 2 - delta;
Дельта там, потому что у меня ширина больше, чем высота.
Пример работы, чтобы найти средний центр по умолчанию, на котором реагируют google-maps ES6:
const bounds = new google.maps.LatLngBounds();
paths.map((latLng) => bounds.extend(new google.maps.LatLng(latLng)));
const defaultCenter = bounds.getCenter();
<GoogleMap
defaultZoom={paths.length ? 12 : 4}
defaultCenter={defaultCenter}
>
<Marker position={{ lat, lng }} />
</GoogleMap>
map.getBounds() это не мгновенная операция, поэтому я использую в аналогичном случае обработчик событий. Вот мой пример в Coffeescript
@map.fitBounds(@bounds)
google.maps.event.addListenerOnce @map, 'bounds_changed', =>
@map.setZoom(12) if @map.getZoom() > 12
Расчет уровня масштабирования для долготы Джайлса Гардама у меня отлично работает. Если вы хотите рассчитать коэффициент масштабирования для широты, это простое решение, которое отлично работает:
double minLat = ...;
double maxLat = ...;
double midAngle = (maxLat+minLat)/2;
//alpha is the non-negative angle distance of alpha and beta to midangle
double alpha = maxLat-midAngle;
//Projection screen is orthogonal to vector with angle midAngle
//portion of horizontal scale:
double yPortion = Math.sin(alpha*Math.pi/180) / 2;
double latZoom = Math.log(mapSize.height / GLOBE_WIDTH / yPortion) / Math.ln2;
//return min (max zoom) of both zoom levels
double zoom = Math.min(lngZoom, latZoom);
Для быстрой версии
func getBoundsZoomLevel(bounds: GMSCoordinateBounds, mapDim: CGSize) -> Double {
var bounds = bounds
let WORLD_DIM = CGSize(width: 256, height: 256)
let ZOOM_MAX: Double = 21.0
func latRad(_ lat: Double) -> Double {
let sin2 = sin(lat * .pi / 180)
let radX2 = log10((1 + sin2) / (1 - sin2)) / 2
return max(min(radX2, .pi), -.pi) / 2
}
func zoom(_ mapPx: CGFloat,_ worldPx: CGFloat,_ fraction: Double) -> Double {
return floor(log10(Double(mapPx) / Double(worldPx) / fraction / log10(2.0)))
}
let ne = bounds.northEast
let sw = bounds.southWest
let latFraction = (latRad(ne.latitude) - latRad(sw.latitude)) / .pi
let lngDiff = ne.longitude - sw.longitude
let lngFraction = lngDiff < 0 ? (lngDiff + 360) : (lngDiff / 360)
let latZoom = zoom(mapDim.height, WORLD_DIM.height, latFraction);
let lngZoom = zoom(mapDim.width, WORLD_DIM.width, lngFraction);
return min(latZoom, lngZoom, ZOOM_MAX)
}