关于地图坐标到屏幕坐标的转换

最新推荐文章于 2024-08-09 17:41:37 发布
原创 最新推荐文章于 2024-08-09 17:41:37 发布 · 2.8k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#算法 #手机

本文介绍了如何在二维坐标系统中进行地图坐标到屏幕坐标的转换，包括设置比例尺、地图中心和窗口中心的方法。核心算法是通过一对对应点和缩放因子确定坐标关系，具体转换公式为：wx = (mx - m_ptMapCenter.x) * Scale + m_ptWndCenter.x, wy = (my - m_ptMapCenter.y) * Scale + m_ptWndCenter.y。其中，m_ptMapCenter的x坐标为shapefile边界盒的中心，Scale由地图边界范围和屏幕宽度决定，用于控制缩放效果。" 123098054,11616133,AgileCDN：应对OTT-TV数据增长的创新解决方案,"['CDN服务', '流媒体技术', '视频交付', '数据管理', '互联网音视频']
部署运行你感兴趣的模型镜像

今天终于将多点画到屏幕上去了,十分开心,这里面最重要的是坐标系的转换.我讲讲坐标系的转换:

功能说明: 窗口坐标与地图坐标的转换

使用说明:

设置坐标转换的比例尺SetZoom以后，设置地图中心SetMapCenter和窗口中心SetWndCenter以后

Map2Wnd：地图坐标转换为窗口坐标

Wnd2Map：窗口坐标转换为地图坐标

原理：在二维坐标系统中的两个坐标系通过一对对应点和一个缩放因子即可确定两者的对应关系。

算法：确定地图坐标中的一点m_ptMapCenter和对应于窗口坐标中的一点m_ptWndCenter，从地图坐标到窗口坐标的系数Scale

地图坐标(mx, my)到窗口坐标(wx, wy)的转换方法为：

wx=( mx-m_ptMapCenter.x)* Scale+m_ptWndCenter.x

wy=( my-m_ptMapCenter.y)* Scale+m_ptWndCenter.y

在这里我想说明一下 m_ptMapCenter:  大家都知道shapefile有边界盒为Xmin, Ymin,Xmax,Ymin  我想说 m_ptMapCenter:的x= ( Xmax+Xmin)/2

y=(Ymax+Ymin)/2 

至于 Scale=(Xmax-Xmin)/(手机屏幕的宽度/2).

其实这个地图的原点与屏幕中心是重叠的,这个比值是个缩放因子,如果你想放大缩小地图 ,那么只要改变缩放因子即可.

 

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

Stable-Diffusion-3.5

图片生成
Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率

地图坐标与屏幕坐标的转换
creable的专栏
09-26 2150
 地图坐标与屏幕坐标的转换陈玉进 李泉 南京跬步科技有限公司（http://www.creable.cn） 再开始这个话题之前，先提出一个问题：给你一副地图，里面的每个要素的坐标都已知，怎么把这幅地图在屏幕上显示出来？由此就引出了地图坐标与屏幕坐标的转换，它是GIS底层实现中调用频率最高的运算，地图渲染、浏览、要素选择、编辑等都会涉及到它，这个算法的实现效率，直接关系到整个系统的性能。
【转载】地图坐标与屏幕坐标的转换&&控制地图显示范围的参数
weixin_34390996的博客
07-06 557
地图坐标与屏幕坐标的转换 原文链接：http://hi.baidu.com/geochenyj/blog/item/c5234d3825442a22b8998fc3.html 陈玉进 李泉 南京跬步科技有限公司（http://www.creable.cn） 再开始这个话题之前，先提出一个问题：给你一副地图，里面的每个要素的坐标都已知，怎么把这幅地图在屏幕上显示出来？由此就引出了地图坐标与屏幕...
ADF JavaScript获取地图坐标及与屏幕坐标的互转
weixin_34393428的博客
08-04 136
//在地图上单击画点 var map = $find('Map1');map.getGeometry(ESRI.ADF.Graphics.ShapeType.Point, usePoint, null, 'red', '#0000FF', 'pointer', true); //获取鼠标点击的位置的地图坐标 function usePoint(clickPoint) { //地理坐标转到屏...
地图坐标转屏幕坐标
皓月星辰
07-14 1850
服务器端处理public System.Drawing.Point MapToScreenPoint(double mapX, double mapY)        {            ESRI.ArcGIS.ADF.Web.Geometry.Point adf_point = new ESRI.ArcGIS.ADF.Web.Geometry.Point(mapX, mapY);     ...
地图坐标怎么转为屏幕坐标
chenshizero的专栏
09-18 1696
 FeatureLayer.DisplayTransform.ToDisplay 或者 Map.DisplayTransform.ToDisplay具体使用把点击的坐标记录到隐藏文本框function cc() { document.Form1.iPoint.Value=event.x+ | + event.y; document.Form1.txtSpotType.value=d
精选资源
76.（cesium篇）cesium笛卡尔坐标（世界坐标）与屏幕坐标转换.zip
04-27
该资源包的执行效果查看地址：https://blog.youkuaiyun.com/m0_60387551/article/details/123184049 “地图之家”专栏中的“76.（cesium篇）cesium笛卡尔坐标（世界坐标）与屏幕坐标转换”。如下载有问题，可联系博主。
地理坐标和屏幕坐标转换
01-02
在给定的代码中，我们可以看到三个方法，分别用于将地理坐标转换为屏幕坐标，地图坐标（一种特殊类型的地理坐标）转换为页面布局坐标，以及页面布局坐标转换回地图坐标。这些方法在ArcGIS ADF（ArcGIS Desktop ...
精选资源
易语言-地图坐标系转换模块
06-25
网上翻了好久，没找到易语言坐标系转换模块，正好最近需要，就参考网上java源码写了个易语言的模块，分享给大家，用户Google国内地图、高德、QQ地图转地球坐标系，国际通用坐标系，。有不对的地方也欢迎指正。 注：...
js地理坐标与屏幕坐标互转换
04-17
4. **屏幕坐标转地理坐标**：将屏幕坐标转换回地理坐标时，可以使用以下公式： - `lon = screenX * scaleX / 3600 + minLon`； - `lat = maxLat - screenY * scaleY / 3600`。 ### 三、具体实现细节 #### 1. ...
屏幕坐标系统与地理坐标系统转换方法
11-14
屏幕坐标系统与地理坐标系统 转换方法 屏幕坐标 地理坐标 转换方法
arcgis 9.2 地图坐标转换屏幕坐标
03-25
在ArcGIS 9.2中，地图坐标转换到屏幕坐标是一项关键操作，它涉及到将地理空间数据在二维屏幕上准确地呈现出来。地图坐标系统通常基于经纬度或其他投影系统，而屏幕坐标则是根据显示器的像素来定义的。进行这种转换...
地理坐标（经纬度坐标）和屏幕坐标（xy坐标）间的转换
热门推荐
lweiyue的专栏
10-28 4万+
在我们的屏幕上，有一张地图，这张地图经过缩放、平移、旋转，最终地理坐标和屏幕坐标的关系大致如下图所示： 这种关系要怎么描述呢？我们可以假设地图是一张纸，而屏幕是一堵墙。只要我们有两个图钉，我们就能把纸定在墙上。我们把这两个点称为锚点。锚点在屏幕坐标系上的坐标是(x1,y1)和(x2,y2)，对应在地理坐标系上的坐标是(lon1,lat1)和(lon2,lat2)。 那现在的问题就变成了，已...
[SharpMap] 屏幕坐标和Map坐标转换
weixin_33701251的博客
12-30 361
 1. SharpMap中屏幕坐标和地图Map坐标转换： 1 using System.Drawing; 2 using GeoAPI.Geometries; 3 4 namespace SharpMap.Utilities 5 { 6 /// <summary> 7 /// Class for transforming betwe...
《地理坐标（经纬度坐标）和屏幕坐标（xy坐标）间的转换》的读后笔记
喜爱设计架构，追求项目可控。
03-12 3530
原文给出了一种基于向量法的对于坐标点的映射方式，该方式可用且原理简单。本文对原文的数学公式做了说明，并附加了Java代码的实现。
将游戏坐标转化成屏幕鼠标坐标
wohaipagui的博客
08-09 1742
思路说明：转化其实是取得两点的相对位置，例如将游戏人物移动到另外一个位置（游戏人物初始位置坐标到目的位置坐标），鼠标需要移动到屏幕的某个位置。算出游戏的移动距离，游戏两个点之间的夹角（cos,sin）,然后映射到屏幕中的两个点。
arcgis 将地图点转换为屏幕坐标_ArcGIS地图投影和坐标转换方法
weixin_39586395的博客
12-29 893
1、动态投影(ArcMap)所谓动态投影是指ArcMap中的Data空间参考或是说坐标系统是默认为第一加载到当前工作区的那个文件的坐标系统，后加入的数据如果和当前工作区坐标系统不相同，则ArcMap会自动做投影变换，把后加入的数据投影变换到当前坐标系统下显示，但此时数据文件所存储的数据并没有改变，只是显示形态上的变化，因此叫动态投影，表现这一点最明显的例子就是在Export Data时，会让你选择...
ArcEngine 中把地图坐标转为屏幕坐标的方法
knqiufan的博客
10-19 2453
将地图坐标（x,y）转换为以MapControls左上角为原点，以像素为基本单位的屏幕坐标方法。 IPoint pt = new PointClass(); pt.X = x;//x为地图x坐标 pt.Y = y;//y为地图y坐标 int forx = 0;
将地图位置转为屏幕坐标
m0_72280720的博客
08-09 648
hwnd = app.top_window() # 获取顶层窗口句柄。time.sleep(1) # 窗口移植最前端需要时间。参数：class_name：窗口类别，title：窗口名称，模糊匹配。"""1、移动窗口至Z循序的最前端""""""2、点击屏幕点位"""title = 查询工具 9.1V。功能：将地图位置转为屏幕坐标。--此行为注释:-->
leaflet地图中转换地图坐标与屏幕坐标
最新发布
06-11
<think>我们正在讨论如何在Leaflet中实现地图坐标（经纬度）与屏幕坐标（像素）之间的相互转换。根据引用[1]的内容，我们知道在Leaflet中，Point表示的是像素坐标（相对于地图容器左上角的偏移量），LatLng表示的是经纬度坐标。并且，在zoom级别变化时，地图图层左上角的投影像素坐标（原点）会改变，所以转换时要注意当前的zoom级别。Leaflet提供了`map.latLngToLayerPoint`和`map.layerPointToLatLng`方法，但它们转换的是图层点的坐标（相对于地图容器左上角的像素坐标，即原点为(0,0)的地图图层坐标），而图层点与屏幕点之间通常只差一个地图容器的偏移量（即地图容器的位置）。然而，用户可能想要的是屏幕坐标（相对于整个浏览器视窗的坐标）与经纬度坐标之间的转换。此时，我们需要考虑地图容器相对于视窗的位置。有两种常用的转换：1.经纬度坐标（LatLng）转换为屏幕坐标（相对于整个视窗的坐标，即clientX,clientY）。2.屏幕坐标（相对于视窗）转换为经纬度坐标（LatLng）。Leaflet提供了以下方法：-`map.latLngToContainerPoint(latLng)`:将经纬度坐标转换为相对于地图容器（container）左上角的像素坐标（Point类型）。-`map.containerPointToLatLng(point)`:将相对于地图容器左上角的像素坐标（Point类型）转换为经纬度坐标（LatLng类型）。那么，如果我们有相对于视窗的屏幕坐标（比如鼠标事件的clientX和clientY），如何转换为经纬度呢？步骤：1.将屏幕坐标（相对于视窗）转换为相对于地图容器的坐标。因为地图容器是嵌入在网页中的，所以我们需要知道地图容器相对于视窗的位置（通过`getBoundingClientRect`）。2.使用`map.containerPointToLatLng`方法将相对于地图容器的坐标转换为经纬度。反之，如果我们要将经纬度转换为屏幕坐标（相对于视窗）：1.使用`map.latLngToContainerPoint`将经纬度转换为相对于地图容器的坐标（Point）。2.然后，利用地图容器的`getBoundingClientRect()`获取容器左上角的屏幕坐标，再加上容器内的点坐标，得到相对于视窗的坐标。具体实现如下：###1.屏幕坐标（视窗坐标）转经纬度```javascriptfunctionscreenToLatLng(map,clientX,clientY){//获取地图容器的位置（相对于视窗）constrect=map.getContainer().getBoundingClientRect();//计算相对于地图容器的坐标constx=clientX-rect.left;consty=clientY-rect.top;//使用容器坐标转经纬度returnmap.containerPointToLatLng([x,y]);}```###2.经纬度转屏幕坐标（视窗坐标）```javascriptfunctionlatLngToScreen(map,latLng){//将经纬度转换为容器内的点坐标（相对于地图容器左上角）constpoint=map.latLngToContainerPoint(latLng);//获取地图容器的位置（相对于视窗）constrect=map.getContainer().getBoundingClientRect();//计算该点在视窗中的坐标constx=rect.left+point.x;consty=rect.top+point.y;return{x,y};}```###注意-以上方法适用于当前地图的zoom级别和pan状态（因为地图容器位置和地图的投影状态都是实时的）。-如果地图容器位置发生变化（例如页面滚动、窗口大小改变），需要重新获取rect，所以建议在每次转换时都获取一次rect（确保实时准确）。###示例假设我们有一个鼠标点击事件：```javascriptmap.on('click',function(ev){//ev.latlng是经纬度//ev.containerPoint是相对于地图容器的点（但注意，事件对象还提供了originalEvent，其中包含clientX和clientY）constlatlng=ev.latlng;//获取该经纬度在屏幕上的坐标（视窗坐标）constscreenPos=latLngToScreen(map,latlng);console.log(screenPos.x,screenPos.y);//假设我们另外有一个屏幕坐标（比如鼠标位置，但注意这里的ev.originalEvent已经包含了clientX和clientY）constclientX=ev.originalEvent.clientX;constclientY=ev.originalEvent.clientY;//用我们的方法转换constconvertedLatLng=screenToLatLng(map,clientX,clientY);//理论上，convertedLatLng应该和ev.latlng非常接近（可能因为小数计算有微小差异）});```###另一种方法（直接使用事件对象）在事件处理函数中，我们可以直接使用事件对象提供的信息：-`ev.latlng`:事件发生的经纬度。-`ev.containerPoint`:事件相对于地图容器的坐标（Point类型）。-`ev.originalEvent.clientX`,`ev.originalEvent.clientY`:事件相对于视窗的坐标。因此，在事件处理函数中，我们无需自己转换，但如果是在非事件场景（如已知一个屏幕坐标，可能是通过其他方式获取的，需要转换），则需要使用上面的函数。###相关问题1.地图缩放级别变化对坐标转换有何影响？2.如何在Leaflet中实现自定义投影？3.Leaflet如何计算点与经纬度之间的对应关系？4.地图坐标转换在Leaflet性能优化中的应用？</think> ### Leaflet 地图坐标与屏幕坐标转换方法 在 Leaflet 中实现地图坐标（经纬度 LatLng）与屏幕坐标（像素坐标 Point）的相互转换，核心是使用地图对象的投影方法。以下是具体实现方式： #### 1. 经纬度转屏幕坐标 将地理坐标 (LatLng) 转换为相对于地图容器左上角的像素坐标 (Point)： ```javascript // 获取经纬度坐标 const latLng = L.latLng(39.9042, 116.4074); // 示例：北京坐标 // 转换为屏幕坐标 const screenPoint = map.latLngToContainerPoint(latLng); console.log(`屏幕坐标: X=${screenPoint.x}, Y=${screenPoint.y}`); ``` #### 2. 屏幕坐标转经纬度 将相对于地图容器的像素坐标 (Point) 转换为地理坐标 (LatLng)： ```javascript // 获取屏幕坐标（如来自鼠标事件） const point = L.point(300, 200); // 示例点 // 转换为经纬度 const latLng = map.containerPointToLatLng(point); console.log(`经纬度: 纬度=${latLng.lat}, 经度=${latLng.lng}`); ``` #### 3. 在事件处理中的应用 ```javascript map.on('click', (e) => { // 直接获取事件中的坐标 const screenPoint = e.containerPoint; // 屏幕坐标 const latLng = e.latlng; // 经纬度坐标 console.log('点击位置: ', screenPoint, latLng); }); ``` #### 4. 图层坐标转换 ```javascript const marker = L.marker([39.9, 116.4]).addTo(map); // 获取标记的屏幕位置 const markerPoint = map.latLngToContainerPoint(marker.getLatLng()); // 将图层坐标转换为地图坐标 const layerPoint = map.containerPointToLayerPoint(markerPoint); ``` ### 重要概念说明 1. **坐标系统差异** - **经纬度 (LatLng)**：`{ lat: 39.9, lng: 116.4 }` - **屏幕坐标 (Point)**：`{ x: 300, y: 200 }`（像素值，相对于地图容器左上角） 2. **缩放级别的影响** $$ Point = LatLng × 2^{zoom} × tileSize $$ 缩放级别变化会改变屏幕坐标与地理坐标的对应关系[^1] 3. **常用转换方法** | 方法 | 参数 | 返回 | 说明 | |---|---|---|---| | `latLngToContainerPoint()` | LatLng | Point | 经纬度→容器坐标 | | `containerPointToLatLng()` | Point | LatLng | 容器坐标→经纬度 | | `latLngToLayerPoint()` | LatLng | Point | 经纬度→图层坐标 | ### 实际应用场景 1. **自定义覆盖物定位**：精确放置HTML元素到地理位置 ```javascript const element = document.getElementById('custom-overlay'); const position = map.latLngToContainerPoint(latLng); element.style.left = `${position.x}px`; element.style.top = `${position.y}px`; ``` 2. **动态标注计算**： ```javascript function getMarkerScreenPosition(layer) { return map.latLngToContainerPoint(layer.getLatLng()); } ``` ### 常见问题解答 **Q: 缩放时坐标变化如何处理？** A: 监听`zoomend`事件重新计算坐标： ```javascript map.on('zoomend', () => { updatePositions(); // 重新计算所有元素的坐标 }); ``` **Q: 如何获取地图容器的偏移量？** ```javascript const containerOffset = map.getContainer().getBoundingClientRect(); // 用于绝对定位元素时的精确调整 ``` ### 相关问题 1. 如何处理地图平移时的坐标转换性能问题？ 2. Leaflet中自定义投影如何影响坐标转换？ 3. 如何实现经纬度坐标与WGS84坐标系的转换？ 4. 地图坐标转换在大规模数据可视化中的应用？
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值