从两个标记中查找静态地图图像坐标
Find static map image coordinates from two markers
我的想法很简单:
- 我有一张地图作为图像,可以是打印地图的扫描,也可以是维基百科的SVG地图,或者是谷歌地图的屏幕截图
- 我有两个lat/lon坐标,用户点击他们在地图上的位置,所以我知道他们在图像上对应的X/Y位置
现在有趣的部分是:我需要在这张地图上放置一个新的标记,只知道它的纬度/经度坐标。
我不能使用任何Google Maps API或其他JS API,因为地图可以是任何比例的,并且通常不会有相应的缩放因子。
我相信我需要找到图像边界来在地图上定位标记,为此我需要知道地图的比例。我想我有了这个代码,但我没有得到NE经度的准确结果。
// Get NE and SW boundaries for the two known markers
var ne = {lat: Math.max(map.a.lat, map.b.lat), lon: Math.max(map.a.lon, map.b.lon),
x: Math.min(pos.a.x, pos.b.x), y: Math.min(pos.a.y, pos.b.y)};
var sw = {lat: Math.min(map.a.lat, map.b.lat), lon: Math.min(map.a.lon, map.b.lon),
x: Math.max(pos.a.x, pos.b.x), y: Math.max(pos.a.y, pos.b.y)};
// Get boundaries box width and height
var box = {width: sw.x - ne.x, height: sw.y - ne.y};
box.lat_delta = ne.lat - sw.lat;
box.lon_delta = ne.lon - sw.lon;
// Map scale
box.lat_ratio = box.lat_delta / box.height;
box.lon_ratio = box.lon_delta / box.width;
// Get Top-Left and Bottom-Right coordinates of the map
var tl = {
lat: ne.lat + (box.lat_ratio * ne.y),
lon: ne.lon - (box.lon_ratio * ne.x)};
var br = {
lat: sw.lat + (box.lat_ratio * (box.height - sw.y)),
lon: sw.lon - (box.lon_ratio * (box.width - sw.x))};
然后,我如何得到第三个标记的X/Y坐标?我想过做这样的事情:
var x=(map.c.lon-tl.lon)*box.lon_ratio;var y=(map.c.lat-tl.lat)*box.lat_ratio;
但结果没有任何意义。所以我有点迷路了。
答案是:
karto.prototype.getStaticMapBoundingBoxFromTwoPoints = function (point1, point2, width, height)
{
// Coordinates of the inner bounding box containing the two points
var box = {};
var map = {};
// Top left, with lat/longitude as pixel coordinates on full-size Mercator projection
box.tl = {
lat: this.latToY(Math.max(point1.lat, point2.lat)),
lon: this.lonToX(Math.min(point1.lon, point2.lon)),
x: Math.min(point1.x, point2.x),
y: Math.min(point1.y, point2.y)
};
// Bottom right, with lat/longitude as pixel coordinates on full-size Mercator projection
box.br = {
lat: this.latToY(Math.min(point1.lat, point2.lat)),
lon: this.lonToX(Math.max(point1.lon, point2.lon)),
x: Math.max(point1.x, point2.x),
y: Math.max(point1.y, point2.y)
};
// Box width and height
box.width = box.br.x - box.tl.x;
box.height = box.br.y - box.tl.y;
// Horizontal and vertical distance in pixels on full-size projection
var v_delta = box.br.lat - box.tl.lat;
var h_delta = box.br.lon - box.tl.lon;
// Get scale from the distance applied to map size
map.v_scale = v_delta / box.height;
map.h_scale = h_delta / box.width;
// Get map top left
map.topLeft = {
x: box.tl.lon - (box.tl.x * map.h_scale),
y: box.tl.lat - (box.tl.y * map.v_scale)
};
map.topLeft.lat = this.YToLat(map.topLeft.y);
map.topLeft.lon = this.XToLon(map.topLeft.x);
map.bottomRight = {
x: box.br.lon + ((box.width - box.br.x) * map.h_scale),
y: box.br.lat + ((box.height - box.br.y) * map.v_scale)
};
map.bottomRight.lat = this.YToLat(map.bottomRight.y);
map.bottomRight.lon = this.XToLon(map.bottomRight.x);
return map;
};
karto.prototype.getPointXYOnStaticMap = function (lat, lon, map)
{
return {
x: (this.lonToX(lon) - map.topLeft.x) / map.h_scale,
y: (this.latToY(lat) - map.topLeft.y) / map.v_scale
};
};
karto.prototype.getPointLatLongOnStaticMap = function (x, y, map)
{
return {
lat: this.YToLat(map.topLeft.y + (y * map.v_scale)),
lon: this.XToLon(map.topLeft.x + (x * map.h_scale))
};
};
相关文章:
- 正在全局范围中查找JavaScript函数
- Javascript(Angular)从一个对象数组到第二个数组查找值
- 在不使用jquery的情况下查找页面中的所有锚点并附加函数
- es6 相当于下划线查找位置
- 在DOM中查找一个模式并替换它's的内容使用jquery
- 如何处理10页以上的静态页眉/页脚
- 如何使用jquery迭代具有相同属性的html元素并查找onclick事件
- 如何在不传递此信息的情况下查找被调用的元素
- Lodash 从值数组中查找数组中的值
- 如何使用JavaScript查找1和N之间的所有数字的总和
- 使用RegExp查找url中的字符
- 查找元素高度,包括边距
- Grunt-connect在根目录之外提供静态文件
- 使用JS查找数组的平均值
- 查找最短和最长日期
- 来自文档或下一个静态父级的事件委派
- 猫鼬在特定记录中查找嵌套记录
- 使用javascript在MVC中查找网格长度时出错
- 从两个标记中查找静态地图图像坐标
- 浏览器在页面上按ctrl+f查找显示静态标题后面的结果