174：vue+openlayer: 经纬度坐标与屏幕坐标pixel转换，transformExtent将区间坐标由4326转换为3857

已于 2024-05-09 22:43:03 修改
阅读量1.2k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： # openlayers综合教程300+ 文章标签： openlayer坐标转换 openlayers示例 大剑师 openlayers坐标 openlayers坐标转换
于 2022-11-24 12:02:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/128015664
本博客由高级前端工程师大剑师兰特分享，介绍在Vue+OpenLayers中如何进行经纬度坐标与屏幕像素坐标的转换，以及如何将4326坐标系的extent转换为3857坐标系。提供详细示例源代码，包括绘制矩形、获取坐标点信息等操作。

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

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

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

文章目录

一、示例效果图

二、示例简介

本示例介绍如何在vue+openlayer中使用draw来绘制矩形，获取到左上点的经纬度坐标和桌面坐标，并将extent的4326转换为3857坐标系

直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果

三、配置方式

1）查看基础设置：https://xiaozhuanlan.co

了解本专栏 订阅专栏 解锁全文
vue结合openlayers根据返回的经纬度坐标完成锚地标记、绘制多边形区域
总结前端开发中遇到的问题，分享前端知识
07-28 2256
关于数据渲染的问题：这里前端采用的是获取左下角和右上角经纬度作为参数传递给后台获取当前屏幕显示的区域的数据。利用滑动地图区域来请求接口渲染数据，这样就很好的解决了一次性加载很多的数据的问题。............
139：vue+openlayers 单击某点，获取当前坐标-多层重叠下的所有features信息
大剑师兰特的GIS世界
09-30 1397
本示例的目的是介绍如何在vue+openlayer中获取某个点坐标下所有的features。点击某一个点，获取位置pixel，根据pixel来获取所有的features。点击查看本专栏内容目录列表。
openlayers 根据经纬度转换为屏幕坐标
xuhaiyan8825的专栏
02-11 1万+
如下， centerLon ，centerLat  为获取到的经纬度； dx ，dy为该点相对于地图左上角的像素差 tmap.div.offsets[0]，tmap.div.offsets[1] 为地图左上角的屏幕坐标。 PosX， PosY 为该经纬度的屏幕坐标。 IE，360，firefox，google浏览器测试通过。 var feature = e.featur
openlayers在vue中像素与经纬度互转
larea的博客
02-28 357
【代码】openlayers在vue中像素与经纬度互转。
OpenLayers 地图投影转换
GIS之路
06-05 397
OpenLayers中提供了Projection类设置地图地图坐标系，此类可以结合Proj4地图投影库进行使用。其中，用于对坐标进行转换。使用proj4.defs定义投影，其中投影参数可以在查看。第一个参数为EPSG CODE，如WGS84坐标系为，第二个参数从网站上查看。// 定义投影注册投影参数并实现Projection类。// 注册投影参数code: 'ESRI:53009', //编号。
地图坐标系转换(4326与3857转换)
热门推荐
vagabond_的博客
12-02 1万+
gis坐标系转换 4326与3857转换
openlayer屏幕坐标和经纬度互转
qq_39330397的博客
07-12 1120
开发过程中总会忘记，记录一下。
openlayers 地图地理坐标、屏幕像素坐标相互转换（实际应用）
qq_45560350的博客
04-11 2145
反馈问题，希望点击阀门要素后，地图比例尺不改变，也就是地图不再缩放，这时再写死向下移动的0.001，在不同的比例尺下会出现要素飞出屏幕的情况。而 k点 的地理坐标可以从t点地理坐标推过来，但是地图的比例尺发生改变，两个地理坐标之间的数值关系就不能写死，但屏幕的像素坐标可以。方法用于移动地图中心至传入的地理坐标处，也就是说，只要我拿到A’页面的 k点 处的地理坐标，就能够实现。可以看到 t点 在A面的右下位置，我想让它到移动到页面的中上位置，也就是A‘页面的上中位置。
140：vue+openlayers 右键点击定位，获取某一点下多层features信息
大剑师兰特的GIS世界
09-30 943
本示例的目的是介绍如何在vue+openlayer中右键点击获取某个点坐标下所有的features。右键点击某一个点，获取位置pixel，根据pixel来获取所有的features。点击查看本专栏内容目录列表。
Vue2+OpenLayers添加/删除点、点击事件功能实现（提供Gitee源码）
黄团团的个人博客
01-13 727
在OpenLayers中，Feature（要素）是地图上表示一个空间实体的对象，它包含的类型有： Point（点） LineString（线段） Polygon（多边形）。首先新增一个图层，我们所有的点信息都存放在这个图层上，你也可以添加一个点就新增一个图层，看各自需求，然后初始化经纬度变量。VectorLayer是一个用于在地图上渲染矢量数据的层，支持显示点、线和面等几何图形。可以新增/删除标记点，点击标记点可以获取到当前标记点的经纬度信息（绑定了点击事件）。
OpenLayers地图坐标转换屏幕坐标
cong517yang的专栏
06-09 5860
最近因工作原因开始接触OpenLayers地图，遇到需要将地图坐标转换成屏幕坐标，因为技术有限，在大量查看API、与大神写的文章时候还是有写地方疏忽了，先将整个地图坐标转换地图坐标进行记录。
墨卡托投影（102100）与地理坐标系（4326）互转工具javascript版本
07-29
墨卡托投影（102100）与地理坐标系（4326）互转工具javascript版本
openlayers 坐标转换
Nicole Cao的博客
06-05 5330
openlayers通过监听地图事件获取的经纬度坐标是经过加密算法偏移的数值，因此在使用坐标之前需要将其转化成为正确的经纬度坐标：var coordinate = map.getEventCoordinate(e); var lonlat= ol.proj.transform(coordinate ,'EPSG:3857' ,'EPSG:4326'); coordinate 是需要转化的坐标，...
Vue+openlayers+projs4实现坐标转换
chenwei1113的博客
10-20 986
Vue+openlayers+projs4实现坐标转换
openlayers：实现地图地理坐标和屏幕像素坐标相互转换（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-12 531
openlayers：实现地图地理坐标和屏幕像素坐标相互转换（附完整源码）
GIS中EPSG4326与EPSG3857的区别及转换关系-20220830更新
jadesl的专栏
04-11 8524
​ EPSG4326是基于WGS84椭球的经纬度坐标系（BL）； EPSG3857是基于球体的、web墨卡托投影（伪墨卡托投影）的投影坐标系，范围为纬度85度以下，由于google地图最先使用而成为实施标准，至今，大多互联网地图都使用EPSG3857。该投影是等角投影，适合地图定向及导航，纬度越高，面积变形越大。 GIS坐标系转换(EPSG:4326与EPSG:3857相互转换 ...............
openlayer 加载高德地图（EPSG:3857）和GeoJSON图层（EPSG:4326）
imxiezy的博客
12-26 1493
基于openlayer实现高德底图（墨卡托投影，3857）和GeoJSON图层（4326坐标系）的叠加显示，并实现GeoJSON图层的数据变换。
openlayers6踩坑系列（七）坐标经纬度转换公式
qq_39404437的博客
03-09 4464
坐标经纬度转换公式
openlayers地图坐标转换为屏幕像素坐标，屏幕像素坐标转成地图实际坐标
浩星
11-26 6230
前言： openlayers的地图坐标的转换，地图坐标与屏幕像素坐标的互转。 具体方法： 地图坐标转屏幕像素（getPixelFromCoordinate）：入口 屏幕像素转地图坐标（getCoordinateFromPixel）：入口 封装方法源码： 参数 Coordinate_arr:[ [116.33272829555995,39.893308222194946], //右上 [116.33272829555995,39.85376168646...
在vue中的openlayer添加多个点
最新发布
06-26
使用 `fromLonLat()` 将经纬度转换为 OpenLayers 坐标系（默认为 EPSG:3857） 3. **自定义标记样式**（可选扩展） ```javascript import { Style, Icon } from 'ol/style'; // 在addMarkers循环内添加： marker....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

还是大剑师兰特

打赏一杯可口可乐

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

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

打赏作者

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

抵扣说明：

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

余额充值