149：vue+leaflet 地理坐标 to 屏幕坐标

于 2025-06-30 00:00:00 发布
阅读量243 收藏 9
点赞数 16
CC 4.0 BY-SA版权
分类专栏： # leaflet综合教程150+ 文章标签： 大剑师 leaflet示例 leaflet教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuclife/article/details/148904116

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

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

文章目录

一、示例效果图:

在这里插入图片描述

二、示例简介

本示例演示如何在vue+leaflet中将地理坐标转换为屏幕像素坐标。
在使用 Leaflet（一个流行的开源 JavaScript 地图库）时，你可能会遇到需要将地理坐标（经纬度）转换为屏幕上的像素坐标的场景。这在绘制自定义覆盖物、进行交互或动画时非常有用。

三、配置方式

1）查看基础设置：https://xiaozhuanlan.com/topic/4190537826
或者同样查看：https://blog.csdn.net/cuclife/article/details/126745283
2）将上述的源代码，粘贴到src/views/Home.vue中，npm run serve 运行即可。

四、例源代码（共80行）


/*
* @Author: 大剑师兰特（xiaozh
了解本专栏 订阅专栏 解锁全文
041：vue+leaflet 中 Point 和 LatLng 坐标互相转换
大剑师兰特的GIS世界
11-20 1978
第041个本示例的目的是介绍演示如何在vue+leaflet中使用Point和LatLng，这里做了两者之间的转换。注意 两者转换后的值，返回相对于原点像素的相应像素坐标或经纬度坐标。zoom改变，原点（地图图层左上角的投影像素坐标）的值会改变，所以获得的值也会变化。表示具有 x 和 y 坐标（以像素为单位）的点。**LatLng：**表示具有一定经纬度的地理点。
150：vue+leaflet 屏幕坐标 to 地理坐标
大剑师兰特的GIS世界
06-30 351
本文介绍了如何在Vue+Leaflet框架中将屏幕像素坐标转换为地理坐标。作者大剑师兰特（GIS领域高级前端工程师）通过一个80行代码示例，演示了使用map.containerPointToLatLng()方法实现坐标转换的过程。示例效果直观展示了点击地图时像素坐标与地理坐标的实时转换，并提供了相关API参考。该技术对GIS开发具有实用价值，适用于地图交互等场景。文中还包含CSDN专栏链接及基础配置说明，方便开发者快速实现。
经纬度坐标转换为屏幕坐标
SchnecKen的专栏
11-22 7410
<br />经纬度坐标转换成屏幕坐标<br />地理坐标定义规则：X轴(代表经度)向右递增，Y轴(纬度)向上递增，就好比小学学过的平面坐标。向左、向下的规则。屏幕坐标定义规则：X轴向右递增，Y轴向下递增。<br /> 可以看出，地理坐标和屏幕坐标的区别仅仅只是在于Y轴递增方向是相反的(这就是不同)。<br /> 这里强调一点的就是为了保证精度，地理坐标的度*3600换算成秒，所有的取值用double来计算，最后的结果再转换成int。<br /> 1 已知道屏幕的高(y
openlayer屏幕坐标和经纬度互转
qq_39330397的博客
07-12 1202
开发过程中总会忘记，记录一下。
前端绘制地图中的地理坐标到屏幕坐标转换的简单思路--放大、缩小、移动
yatsov的博客
04-03 4673
前端绘制地图中的地理坐标到屏幕坐标转换的简单思路–放大、缩小、移动 前言 为了让自己熟悉地图的绘制，我想手绘一个地图如何绘制的工具。使用了zrender库，这是一个canvas库，Echart基于此做。数据的来源则是一个geojson文件。下面就要解决一下如何进行绘制的问题包括： 1、地理坐标如何与屏幕坐标转换。 2、如何放大、缩小。 3、如何移动。 问题1 地理坐标系与屏幕坐...
Leaflet 入门系列教程（十四）：数据转换
大剑师兰特的GIS世界
05-20 2624
Leaflet库本身提供了几个内置的方法来处理地图上的数据转换，主要涉及从地理坐标（经纬度）到图层坐标（像素坐标）以及容器坐标之间的转换。
137：vue+leaflet 经纬度坐标转为地址，点击鼠标显示地址信息
大剑师兰特的GIS世界
12-06 1134
第137个本示例的目的是介绍演示如何在vue+leaflet中将经纬度坐标转化为地址，点击鼠标显示某地的地址信息。主要利用mapbox的api将坐标转化为地址，然后在固定的位置显示出来。
143：vue+leaflet 在25833投影坐标下，加载一小块图像叠层数据
大剑师兰特的GIS世界
03-08 890
本示例是介绍如何在vue+leaflet, 自定义CRS，形成新的投影，这里是25833投影，并使用 L.Proj.imageOverlay的方法在地图上加载载一小块图像叠层数据。
012：vue+leaflet移动鼠标显示经纬度坐标
大剑师兰特的GIS世界
09-14 1702
本示例的目的是介绍演示在vue+leaflet中移动鼠标，显示点击位置的经纬度信息，通过toFixed（5）函数将小数点后数字固定在5位。点击查看本专栏内容目录列表。
leaflet地图坐标和经纬度转换
qq_29579625的博客
03-01 905
经纬度和Leaflet地图坐标之间的转换涉及地理坐标系与投影坐标系之间的转换。Leaflet提供了简单的方法来在经纬度坐标和Leaflet坐标对象之间进行转换。对于需要将经纬度转换为特定投影坐标系的平面坐标（x, y）的情况，可以使用地图对象的project()方法。相反，可以使用地图对象的方法将平面坐标转换回经纬度坐标。在处理不同地理坐标系之间的转换时，可以使用专门的坐标转换插件。
js地理坐标与屏幕坐标互转换
04-17
arcgis js地理坐标与屏幕坐标互转换
《Leaflet 基础知识点》- 投影坐标与经纬度坐标互转 L.CRS
前端技术
07-19 4172
官网 API 链接 使用 L.CRS，此示例的场景是使用 L.map 的 options.crs 属性，且 crs 已被设置为自定义坐标系。 // 经纬度 -> 投影坐标系 let latLng = L.latLng([31.16805008228939, 121.6205847571635]); map.options.crs.project(latLng); // 投影坐标系 -> 经纬度 map.options.crs.unproject({x: 14707.156411458
经纬度转换成屏幕坐标
热门推荐
liqiancao的专栏
01-08 2万+
学期projet总结： 当把点的数据和线的数据读进来之后，为了画出地图还有最重要的一步就是把实际的经纬度转换成屏幕像素点的坐标。在找老师讨论之前，我在网上查资料，找到了下边链接的文章，并按照这个方法画出了地图。 相关文章链接1月4号，新年后第一天上课，我去找导师让他看做出来的软件的效果，画出来的地图明显和他的不一样，他就把他的方法分享了。 他的方法的主要思路就是找到一个城市所有点里面经度和纬度
leaflet坐标系的设置和切换
weixin_42066016的博客
09-24 1万+
leaflet坐标系的设置 提示： 文章目录leaflet坐标系的设置前言一、如何设置leaflet坐标系？扩充：图片的数据叠加坐标系问题二、如何切换leaflet坐标系1.引入库2.读入数据总结 前言 本篇文章主要是leaflet的应用讲解，最好先对leaflet和坐标系有一定的了解。 坐标系相关可以参考我之前写的文章 https://blog.csdn.net/weixin_42066016/article/details/120371884?spm=1001.2014.3001.5501 一、如
汽车内饰皮革，全球前34强生产商排名及市场份额（by QYResearch）.pdf
最新发布
12-18
汽车内饰皮革，全球前34强生产商排名及市场份额（by QYResearch）.pdf
VUE+leaflet实现图层控制
11-23
Vue.js 和 Leaflet 是两个流行的前端开发框架，Vue用于构建用户界面，而Leaflet是一个强大的JavaScript库，专用于创建交互式的地图应用。要在Vue项目中结合Leaflet实现图层控制，你可以按照以下步骤操作： 1. **安装依赖**：首先，在Vue项目中通过npm或yarn安装`vue-leaflet`插件，这将提供Leaflet组件的集成支持。例如： ```bash npm install vue-leaflet leaflet --save ``` 2. **引入并配置**：在你的Vue组件中导入`VueMap`组件，并在`<template>`中添加一个`<div>`来容纳地图： ```html <template> <div id="map" ref="map"></div> </template> ``` 3. **设置地图**： ```javascript <script> import { VueMap } from 'vue-leaflet'; export default { components: { VueMap }, data() { return { map: null, layers: [ // 初始化地图所需的图层列表 { name: '基础图层', layer: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }) } ] }; }, mounted() { this.map = new VueMap({ el: '#map', center: [51.505, -0.09], // 地理坐标 zoom: 13, layers: this.layers }); } }; </script> ``` 4. **图层控制**：在Vue中可以动态管理图层，比如添加、删除或者显示隐藏。你可以为每个图层设置一个开关，监听用户的操作来控制图层状态。 ```html <template> ... <button v-for="(layer, index) in layers" :key="index" @click="toggleLayer(layer.name)"> {{ layer.name }} </button> ... </template> <script> ... methods: { toggleLayer(name) { this.map.layers.eachLayer((layer) => { if (layer.options.name === name) { layer.setOpacity(!layer.getOpacity()); layer.setVisible(!layer.getVisible()); } }); } } ... </script> ```
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

还是大剑师兰特

打赏一杯可口可乐

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

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

打赏作者

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

抵扣说明：

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

余额充值