将 lat/lng 坐标转换为给定地图上的像素（使用 JavaScript）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8898120/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Conversion of lat/lng coordinates to pixels on a given map (with JavaScript)
提问by matsko
I have put together a cities database from MaxMind and it includes the lat/lng values for each city in the database. I have also put together a map of North/America and I would like to have a icon appear on the x/y coordinates of the map which are derived from the lat/lng coordinates of the city database record.
我已经从 MaxMind 整理了一个城市数据库，它包括数据库中每个城市的纬度/经度值。我还制作了一张北美/美国地图，我希望在地图的 x/y 坐标上显示一个图标，该图标源自城市数据库记录的 lat/lng 坐标。
From my understanding I need to find the left/top bounds of the map first (lat/lng -> x/y) and then use that as a difference for the linear relationship between any of the north american city x/y coords. Finally, depending on the size of the map, its just a few simple division and subtraction operations to figure out where to place the point.
根据我的理解，我需要首先找到地图的左/上边界（lat/lng -> x/y），然后将其用作任何北美城市 x/y 坐标之间线性关系的差异。最后，根据地图的大小，只需进行一些简单的除法和减法运算即可确定该点的位置。
However I can't seem to figure out how todo the following:
但是我似乎无法弄清楚如何执行以下操作：
- I'm not sure what the lat/lng mapping system is. How do I find this out?
- Using a JavaScript library, how do I convert the lat/lng to pixels for the 0,0 coord and each of the city coords. I've tried Proj4js, but they require that you specify your coordinate map types and so on. Here is another question that asked something similar. Convert long/lat to pixel x/y on a given picture
- 我不确定 lat/lng 映射系统是什么。我怎么知道这个？
- 使用 JavaScript 库，如何将 lat/lng 转换为 0,0 坐标和每个城市坐标的像素。我试过 Proj4js，但它们要求您指定坐标图类型等。这是另一个提出类似问题的问题。 在给定图片上将 long/lat 转换为像素 x/y
Any ideas?
有任何想法吗？
-- EDIT --
- 编辑 -
The output map (of North America) is a continuous cylinder: "Miller cylindrical projection". http://en.wikipedia.org/wiki/Miller_cylindrical_projection
输出地图（北美）是一个连续的圆柱体：“米勒圆柱投影”。http://en.wikipedia.org/wiki/Miller_cylindrical_projection
回答by Krishna sagar
Latitude and Longitude are imaginary lines drawn on earth so that you can accurately pinpoint any location on the world . simply put they are the X and Y coords of a plane. Latitude is a vertical line running from north to south with its 90 deg at the north pole and -90deg at the south pole.
纬度和经度是在地球上绘制的假想线，以便您可以准确地确定世界上的任何位置。简单地说，它们是平面的 X 和 Y 坐标。纬度是一条从北到南的垂直线，其北极为 90 度，南极为 -90 度。
Longitude on the other hand is a horizontal line running east to south with -180deg in the west and 180deg in the east.
另一方面，经度是一条从东到南的水平线，西为 -180 度，东为 180 度。
you can convert the latLng into pixel coords as by assuming that the width of the html container is the width of the world and the same applies to the the height.
您可以将 latLng 转换为像素坐标，假设 html 容器的宽度是世界的宽度，同样适用于高度。
Formula - Longitude - pixel
公式 - 经度 - 像素
(givenLng*widthOfContainerElement)/360
where 360 is the total longitude in degrees
其中 360 是以度为单位的总经度
Formula -Latitude - pixed
公式 - 纬度 - 像素
(givenLat*heightOfContainerElement)/180
where 360 is the total longitude in degree
其中 360 是以度为单位的总经度
//Height is calculated from the bottom
let me know if you still need any clarifications.
如果您还需要任何说明，请告诉我。
回答by ow3n
Here is a Javascript implementation of a Mercator projectionthat returns only positive values (cartesian coordinate system of screens) and accounts for the sphere > flat conversion:
这是墨卡托投影的 Javascript 实现，它仅返回正值（屏幕的笛卡尔坐标系）并考虑球体 > 平面转换：
// get x
var x = (lng + 180) * (mapWidth / 360);
// convert from degrees to radians
var latRad = lat * Math.PI / 180;
// get y value
var mercN = Math.log(Math.tan((Math.PI / 4) + (latRad / 2)));
var y = (mapHeight / 2) - (mapWidth * mercN / (2 * Math.PI));
回答by WebWanderer
This is a very old question, but the accepted answer has some... nuances...
这是一个非常古老的问题，但接受的答案有一些......细微差别......
Typically, this is done for satellite/aerial imagery, which is usually accompanied by a "zoom-level."
通常，这是针对卫星/航空图像完成的，通常伴随着“缩放级别”。
This zoom-level roughly (and I mean roughly) translates to the "ground-sample-distance" or GSD, which, when provided, represents the centimeters per pixel in an image.
这个缩放级别粗略地（我的意思是粗略地）转换为“地面样本距离”或 GSD，当提供时，它表示图像中每像素的厘米。
You'll often see zoom-levels of 18, 19, 20, or 21.
您经常会看到 18、19、20 或 21 的缩放级别。
One of the issues to note is that the Earth is not flat nor perfectly spherical, therefore, there are many different "projection" methods available to translate from a three-dimensional coordinate of the Earth's surface to a two-dimensional image on a screen. The most popular and widely used of these projection methods is the Mercator projection.
需要注意的问题之一是地球既不是平面也不是完美的球形，因此，有许多不同的“投影”方法可以将地球表面的三维坐标转换为屏幕上的二维图像。这些投影方法中最流行和最广泛使用的是墨卡托投影。
Google provides a methodthat uses the Mercator projection to provide a pixel coordinate of xand y.
谷歌提供了一种方法，它使用墨卡托投影提供的像素坐标x和y。
We can then use the "zoom-level" to scale the coordinate to fit our image.
然后我们可以使用“缩放级别”来缩放坐标以适合我们的图像。
interface LatLngLiteral {
lat: number;
lng: number;
}
interface Coordinate {
x: number;
y: number;
}
const project = (latLng: LatLngLiteral): Coordinate => {
const TILE_SIZE: number = 256;
let siny: number = Math.sin((latLng.lat * Math.PI) / 180);
// Truncating to 0.9999 effectively limits latitude to 89.189. This is
// about a third of a tile past the edge of the world tile.
siny = Math.min(Math.max(siny, -0.9999), 0.9999);
return {
x: TILE_SIZE * (0.5 + latLng.lng / 360),
y: TILE_SIZE * (0.5 - Math.log((1 + siny) / (1 - siny)) / (4 * Math.PI))
};
};
export function formatToPoint(latLng: LatLngLiteral, zoom: number): Coordinate {
// Get the world coordinates in pixels
const worldCoordinate: Coordinate = project(latLng);
// Scale to fit our image
const scale: number = Math.pow(2, zoom);
// Apply scale to world coordinates to get image coordinates
return {
x: Math.floor(worldCoordinate.x * scale),
y: Math.floor(worldCoordinate.y * scale)
}
}
