经纬度坐标转换成px_将纬度/经度转换为像素坐标?

本文介绍了如何将经纬度坐标转换为像素坐标,特别是在使用Mercator投影时。通过一个JavaScript函数展示了转换过程,并解释了代码中的一些变量。还提供了计算Mercator投影的通用方法,以及如何调整地图的宽高比。最后,讨论了保持地图投影比例的重要性。
摘要由CSDN通过智能技术生成

I'm trying to convert a lat/lon pair to a pixel coordinate. I have found this mercator projection but I don't understand the code. What is the factor,x_adj, y_adj variable?

When I run the code without those constants my lat/lon pair is not on my map and the x and y pixel coordinate is not what I want.

function get_xy(lat, lng)

{

var mapWidth=2058;

var mapHeight=1746;

var factor=.404;

var x_adj=-391;

var y_adj=37;

var x = (mapWidth*(180+lng)/360)%mapWidth+(mapWidth/2);

var latRad = lat*Math.PI/180;

var mercN = Math.log(Math.tan((Math.PI/4)+(latRad/2)));

var y = (mapHeight/2)-(mapWidth*mercN/(2*Math.PI));

return { x: x*factor+x_adj,y: y*factor+y_adj}

}

解决方案

Where did those variables come from

These variables are chosen to match the computed coordinates to the background image of the map. If the projection parameters of the map were known, they could be computed. But I believe it is far more likely that they were obtained through trial and error.

How to compute a Mercator projection

If you want a more general method to describe the section of the world a given (not transverse) Mercator map shows, you can use this code:

// This map would show Germany:

$south = deg2rad(47.2);

$north = deg2rad(55.2);

$west = deg2rad(5.8);

$east = deg2rad(15.2);

// This also controls the aspect ratio of the projection

$width = 1000;

$height = 1500;

// Formula for mercator projection y coordinate:

function mercY($lat) { return log(tan($lat/2 + M_PI/4)); }

// Some constants to relate chosen area to screen coordinates

$ymin = mercY($south);

$ymax = mercY($north);

$xFactor = $width/($east - $west);

$yFactor = $height/($ymax - $ymin);

function mapProject($lat, $lon) { // both in radians, use deg2rad if neccessary

global $xFactor, $yFactor, $west, $ymax;

$x = $lon;

$y = mercY($lat);

$x = ($x - $west)*$xFactor;

$y = ($ymax - $y)*$yFactor; // y points south

return array($x, $y);

}

A demo run of this code is available at http://ideone.com/05OhG6.

Regarding aspect ratio

A setup with $xFactor != $yFactor produces a kind of stretched Mercator projection. This is not conformal (angle-preserving) any more. If one wants a true Mercator projection, one can omit any of the first six variable assignments, i.e. those defining the bounding box or those describing the size of the resulting map, and then use some computation too choose it satisfying $xFactor == $yFactor. But since the choice which to omit is kind of arbitrary, I feel that the above code is the most symmetric way to describe things.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这是一个关于使用 JavaScript 编写程序在手机或电脑上访问 URL 并在高德地图中标记点和连接线的问题。我可以回答这个问题。 首先,我们需要在 HTML 中引入高德地图的 JavaScript 库,然后使用 AJAX 技术访问给定的 URL,获取点的经纬度数据。接着,我们可以使用高德地图的 API,在地图上添加点标记和连接线,并按照顺序为每个点标记添加数字。 以下是示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>高德地图示例</title> <script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY"></script> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <div id="map" style="height: 500px;"></div> <script> var map = new AMap.Map('map', { zoom: 10, center: [113.51299368367913, 22.28335787192102] }); $.ajax({ url: 'http://emojikeyboard.cn:808/v2/gaode/list', type: 'GET', dataType: 'json', success: function(data) { var points = []; for (var i = ; i < data.length; i++) { var point = new AMap.Marker({ position: [data[i].longitude, data[i].latitude], map: map, label: { content: i + 1, offset: new AMap.Pixel(, -20) } }); points.push([data[i].longitude, data[i].latitude]); } var polyline = new AMap.Polyline({ path: points, strokeColor: '#3366FF', strokeWeight: 5, strokeOpacity: .8 }); map.add(polyline); }, error: function(xhr, status, error) { console.log('Error:', error); } }); </script> </body> </html> ``` 请注意,这里的 `YOUR_KEY` 需要替换为你自己的高德地图 API Key。此外,为了演示方便,这里使用了 jQuery 库来进行 AJAX 请求。 最后,我们可以将结果截图并发送给您。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值