041：vue+leaflet 中 Point 和 LatLng 坐标互相转换

已于 2024-05-11 09:44:29 修改
阅读量1.8k 收藏 21
点赞数 26
CC 4.0 BY-SA版权
分类专栏： # leaflet综合教程150+ 文章标签： leaflet示例 leaflet坐标转换
于 2022-11-20 07:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/127927530
本文由高级前端工程师分享，详细解析在Vue+Leaflet中Point和LatLng坐标之间的转换，包括示例代码和配置步骤，帮助开发者快速实现地图坐标系统的交互功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，优快云知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 041个示例

文章目录

一、示例效果图

二、示例简介

本示例演示如何在vue+leaflet中使用Point和LatLng，这里做了两者之间的转换。 注意 两者转换后的值，返回相对于原点像素的相应像素坐标或经纬度坐标。zoom改变，原点（地图图层左上角的投影像素坐标）的值会改变，所以获得的值也会变化。

Point： 表示具有 x 和 y 坐标（以像素为单位）的点。
**LatLng：**表示具有一

了解本专栏 订阅专栏 解锁全文
150：vue+leaflet 屏幕坐标 to 地理坐标
大剑师兰特的GIS世界
06-30 265
本文介绍了如何在Vue+Leaflet框架中将屏幕像素坐标转换为地理坐标。作者大剑师兰特（GIS领域高级前端工程师）通过一个80行代码示例，演示了使用map.containerPointToLatLng()方法实现坐标转换的过程。示例效果直观展示了点击地图时像素坐标与地理坐标的实时转换，并提供了相关API参考。该技术对GIS开发具有实用价值，适用于地图交互等场景。文中还包含优快云专栏链接及基础配置说明，方便开发者快速实现。
149：vue+leaflet 地理坐标 to 屏幕坐标
最新发布
大剑师兰特的GIS世界
06-30 165
本文介绍如何在Vue+Leaflet中实现地理坐标与屏幕像素坐标的转换。作者大剑师兰特（GIS领域高级前端工程师）通过示例演示了使用Leaflet的latLngToContainerPoint方法，将点击地图获取的经纬度坐标转换为像素坐标，并显示在页面上。示例包含80行源代码，涵盖地图初始化、点击事件处理和坐标转换等关键功能。文中还提供了相关API参考，包括多种坐标转换方法，适用于自定义覆盖物绘制、交互实现等场景。读者可通过配置基础设置运行该示例，进一步掌握Leaflet的坐标转换技术。
leaflet坐标系的设置和切换
热门推荐
weixin_42066016的博客
09-24 1万+
leaflet坐标系的设置 提示： 文章目录leaflet坐标系的设置前言一、如何设置leaflet坐标系？扩充：图片的数据叠加坐标系问题二、如何切换leaflet坐标系1.引入库2.读入数据总结 前言 本篇文章主要是leaflet的应用讲解，最好先对leaflet和坐标系有一定的了解。 坐标系相关可以参考我之前写的文章 https://blog.youkuaiyun.com/weixin_42066016/article/details/120371884?spm=1001.2014.3001.5501 一、如
经纬度坐标转换为屏幕坐标
SchnecKen的专栏
11-22 7303
<br />经纬度坐标转换成屏幕坐标<br />地理坐标定义规则：X轴(代表经度)向右递增，Y轴(纬度)向上递增，就好比小学学过的平面坐标。向左、向下的规则。屏幕坐标定义规则：X轴向右递增，Y轴向下递增。<br /> 可以看出，地理坐标和屏幕坐标的区别仅仅只是在于Y轴递增方向是相反的(这就是不同)。<br /> 这里强调一点的就是为了保证精度，地理坐标的度*3600换算成秒，所有的取值用double来计算，最后的结果再转换成int。<br /> 1 已知道屏幕的高(y
Vue-Leaflet地图组件开发（一）基础地图框架搭建与配置指南
runepic的博客
06-02 544
本文介绍了使用Vue-Leaflet搭建基础地图框架的完整流程。首先讲解环境准备，包括安装Vue-Leaflet、Leaflet等核心依赖和CSS配置。然后详细说明基础地图组件的搭建，包括模板结构、地图容器样式和常见问题解决方案。重点解析了地图核心配置选项，如交互控制、UI设置和坐标系选择。最后展示了如何添加OSM和天地图等常用底图，并提供了完整的示例代码。
leaflet地图坐标和经纬度转换
qq_29579625的博客
03-01 619
经纬度和Leaflet地图坐标之间的转换涉及地理坐标系与投影坐标系之间的转换。Leaflet提供了简单的方法来在经纬度坐标和Leaflet坐标对象之间进行转换。对于需要将经纬度转换为特定投影坐标系的平面坐标（x, y）的情况，可以使用地图对象的project()方法。相反，可以使用地图对象的方法将平面坐标转换回经纬度坐标。在处理不同地理坐标系之间的转换时，可以使用专门的坐标转换插件。
Leaflet 底图切换更新坐标系
潜心学习
04-08 513
Leaflet 底图切换更新坐标系
聊聊iClient for Leaflet坐标转换问题
SuperMap技术控
03-16 8141
作者：非法小恋 背景 SuperMap iClient for JavaScript 9D产品想必大伙都用了一段时间了，针对新推出的三款客户端产品，Leaflet，OpenLayaers，MapboxGL，各自的特点，之前的文章也都有聊。 Leaflet：http://blog.youkuaiyun.com/supermapsupport/article/details/78403044 ...
147：vue+leaflet 使用glify加载geojson数据，显示海量多边形组合
大剑师兰特的GIS世界
05-09 244
本文由大剑师兰特撰写，介绍了如何在Vue.js框架下结合Leaflet地图库，使用Leaflet.glify插件高效加载并渲染GeoJSON数据中的多边形组合。文章详细展示了示例效果图、配置方式、源代码及API参考。通过示例代码，开发者可以学习如何在Leaflet地图上使用L.glify.shapes模块渲染大量地理空间数据，并了解相关参数的配置与优化技巧。文章适合GIS领域的前端开发者参考，旨在提升地图数据可视化的性能与效果。
040：vue+leaflet使用circle加载显示多个点
大剑师兰特的GIS世界
11-19 597
第040个本示例的目的是介绍演示如何在vue+leaflet中加载多个点，这里使用的是circle的方法，坐标点填充红颜色。使用循环添加到map的方式。
57.（leaflet篇）leaflet高德坐标转天地图坐标（gcj02转大地2000）.zip
12-10
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.youkuaiyun.com/QQ98281642/article/details/121848484
56.（leaflet篇）leaflet百度坐标转天地图坐标（bd09转大地2000）.zip
12-09
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.youkuaiyun.com/QQ98281642/article/details/121832575
Proj4js一个JavaScript库用于将点坐标从一个坐标系转换到另一个坐标系包括基准变换
08-07
Proj4js 一个JavaScript库，用于将点坐标从一个坐标系转换到另一个坐标系，包括基准变换
js地理坐标与屏幕坐标互转换
04-17
arcgis js地理坐标与屏幕坐标互转换
VUE 使用 leaflet
11-04
在vue中使用leaflet，底图引入了天地图,高德,Google等，对leafletApi做了简单封装，可以方便的调用相关Api。 封装的常用方法有： 测距、测面、地图切换、画多边形、画矩形、在地图中添加arcgis服务等
044：vue+leaflet 中将地址转换为坐标，弹出marker
大剑师兰特的GIS世界
12-26 650
第044个本示例的目的是介绍演示如何在vue+leaflet中使用esri的一个插件将一个地址转换为坐标，然后在坐标点上标记marker。
Leaflet中L.Point与L.LatLng的区别联系
weixin_34255055的博客
03-05 2904
Leaflet an open-source JavaScript library for mobile-friendly interactive maps   Leaflet中有两种表示坐标点的数据结构，一种是最常用的LatLng，另一种则是Point。 L.LatLng   LatLng是表示一个具有纬度(lat)和经度(lng)的地...
leaflet 转化坐标系 加载超图
weixin_43903629的博客
10-24 552
leaflet 转化坐标系 加载超图
003：vue+leaflet 清除所有图层的通用方法
大剑师兰特的GIS世界
09-08 3512
本示例的目的是介绍演示如何在vue+leaflet中添加各种地图，并清除所有的图层。貌似很简单的一个示例，但是在学习和工作中非常重要，往往会根据项目的需要来删除图层，达到预期效果。点击查看本专栏内容目录列表。
canvas实现地图
01-03
### 使用HTML5 Canvas API 实现地图绘制或展示 为了使用 HTML5 的 `<canvas>` 元素实现地图的绘制或展示，需先确保网页中已正确包含带有适当属性的 `<canvas>` 标签[^1]。 ```html <canvas id="mapCanvas" width="800" height="600" style="border:1px solid #d3d3d3;"> 您的浏览器不支持Canvas元素。 </canvas> ``` 接着，在JavaScript 中获取该 `canvas` 对象及其上下文环境： ```javascript const canvas = document.getElementById('mapCanvas'); const ctx = canvas.getContext('2d'); ``` 对于地图数据可视化而言，通常涉及以下几个方面的工作流程[^2]: - **加载地理JSON (GeoJSON)** 数据文件作为基础的地图结构描述。这些文件定义了地球表面不同特征的位置和形状。 - 计算地图的比例尺以及中心点坐标以便适配至目标显示区域大小。此过程可能涉及到解析 GeoJSON 文件中的几何对象，并据此调整视窗尺寸与位置。 - 将地理位置（经度/纬度）转换为屏幕上的像素坐标系下的相应数值。这一步骤利用投影变换算法完成，例如墨卡托投影法是最常用的方案之一。 - 利用 Canvas 提供的各种图形操作接口来描绘路径、填充颜色等效果，从而形成具体的地形轮廓或其他要素表示形式。比如通过调用 `beginPath()` 开始一条新路径；使用 `moveTo(x,y)` 和 `lineTo(x,y)` 方法构建线段连接各个顶点构成闭合多边形；最后以 `fillStyle` 设置内部色彩并通过 `fill()` 命令执行实际渲染工作。 - 添加交互功能如点击检测等功能，则可以通过监听鼠标的动作事件配合 `isPointInPath()` 函数测试光标所在之处是否位于某个特定区域内来进行逻辑判断。 #### 示例代码片段：基于Canvas绘制简单矩形代表地块边界 假设有一个简单的矩形地块信息，其左下角经纬度为(116.4, 39.9)，右上角经纬度为(116.7, 40.2)。那么可以按照上述提到的方法将其转化为屏幕上对应的四个角落点并画出来: ```javascript function latLngToPoint(latlng){ let point={}; // 这里的比例因子需要根据实际情况设定 const scale=1e4; point.x=(latlng.lng+180)*scale/(Math.PI*6371); point.y=(-latlng.lat*Math.PI*6371)/scale; return point; } // 定义两个对角点 let bottomLeft={lng:116.4,lat:39.9}, topRight={lng:116.7,lat:40.2}; // 获取它们在屏幕空间内的位置 let pBL=latLngToPoint(bottomLeft),pTR=latLngToPoint(topRight); ctx.beginPath(); ctx.rect(pBL.x,pBL.y,(pTR.x-pBL.x),(pTR.y-pBL.y)); ctx.fillStyle='rgba(255,0,0,.3)'; ctx.fill(); console.log(`Drawn rectangle from (${bottomLeft.lng},${bottomLeft.lat}) to (${topRight.lng},${topRight.lat}).`); ``` 这段脚本展示了如何将一对经纬度值映射到二维平面上的具体位置，并创建了一个半透明红色矩形框用来示意一片土地的大致范围。当然真实场景中还需要考虑更多细节因素，像不同的投影方式所带来的差异等问题都需要妥善解决。
评论 22
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值