OpenLayers地图坐标转换屏幕坐标

最新推荐文章于 2025-06-05 20:10:51 发布
原创 最新推荐文章于 2025-06-05 20:10:51 发布 · 5.9k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#地图

本文记录如何在OpenLayers中将地图坐标转换为屏幕坐标，涉及的关键步骤包括获取投影对象、获取投影范围、计算地图宽度，并提供了一个转换公式。作者分享了自己在解决这个问题过程中的经验和心得。

最近因工作原因开始接触OpenLayers地图，遇到需要将地图坐标转换成屏幕坐标，因为技术有限，在大量查看API、与大神写的文章时候还是有写地方疏忽了，先将整个地图坐标转换地图坐标进行记录。

第一步为指定的代码获取投影对象。

ol.proj.get('EPSG:4326') 在得到投影对象后需要

最低0.47元/天 解锁文章
openlayers：实现地图地理坐标和屏幕像素坐标相互转换（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-12 625
openlayers：实现地图地理坐标和屏幕像素坐标相互转换（附完整源码）
openlayers：实现将图像坐标直接转换为地图的投影坐标 (附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-30 211
openlayers：实现将图像坐标直接转换为地图的投影坐标 (附完整源码）
openlayers加载天地图
du_5pet的博客
12-17 1030
var projection = ol.proj.get("EPSG:4326"); var projectionExtent = projection.getExtent(); var res = [ 1.40625, 0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, ...
openlayers加载百度地图作为底图坐标偏移的解决办法
u013594477的专栏
11-12 1万+
openlayers加载天地图作为底图，在网上找了公开的服务资源，要做到百度地图与天地图之间切换，同样也从网上找到百度地图的服务资源但是在地图上坐标总是有偏差，最初的代码是这样的： var projection = ol.proj.get("EPSG:3857"); //加载百度地图采用3857坐标系 var resolutions = []; for(var i=0; i<19...
openlayers地图坐标coordinate转换为屏幕像素坐标pixel
xxloveivy的博客
03-27 8907
openlayers地图坐标coordinate转换为屏幕像素坐标pixel 网上查资料试了很多人的方法，需要各种转换但没成功，后来发现openlayers的map对象自带该方法，记录下来，希望帮助到大家！ 方法说明： 获取坐标的像素坐标。这将获取地图视图投影中的坐标并返回相应的像素。 map.getPixelFromCoordinate(coordinate) 参数coordinate: 地图当...
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 地图投影转换
最新发布
GIS之路
06-05 489
OpenLayers中提供了Projection类设置地图地图坐标系，此类可以结合Proj4地图投影库进行使用。其中，用于对坐标进行转换。使用proj4.defs定义投影，其中投影参数可以在查看。第一个参数为EPSG CODE，如WGS84坐标系为，第二个参数从网站上查看。// 定义投影注册投影参数并实现Projection类。// 注册投影参数code: 'ESRI:53009', //编号。
Openlayers显示地理位置坐标的方法
10-14
它支持多种地图数据源，包括WMS、WMTS等，并且能够轻松地处理地理坐标系统（如EPSG:4326）与屏幕像素之间的转换。本篇文章将详细讲解如何使用OpenLayers显示地理位置坐标。 首先，要使用OpenLayers显示地理位置坐标...
174：vue+openlayer: 经纬度坐标与屏幕坐标pixel转换，transformExtent将区间坐标由4326转换为3857
大剑师兰特的GIS世界
11-24 1405
第174个本示例的目的是介绍如何在vue+openlayer中使用draw来绘制矩形，获取到左上点的经纬度坐标和桌面坐标，并将extent的4326转换为3857坐标系。
openlayers 坐标转换
Nicole Cao的博客
06-05 5404
openlayers通过监听地图事件获取的经纬度坐标是经过加密算法偏移的数值，因此在使用坐标之前需要将其转化成为正确的经纬度坐标：var coordinate = map.getEventCoordinate(e); var lonlat= ol.proj.transform(coordinate ,'EPSG:3857' ,'EPSG:4326'); coordinate 是需要转化的坐标，...
openlayer屏幕坐标和经纬度互转
qq_39330397的博客
07-12 1219
开发过程中总会忘记，记录一下。
OpenLayers 实用属性方法及代码实例
AE_yang的博客
09-26 2227
1.ol.interaction.Pointer 是管理地图down、move、up事件的基类，也用于管理地图拖拽事件。 构造函数结构如下： new ol.interaction.Pointer(opt_options) options包括的属性有： handleDownEvent：处理地图的down事件。如果该事件返回true，drag队列开始执行。 handleDragEvent：处理地图的drag事件。当down事件返回true，鼠标在拖拽过...
openlayers 地图地理坐标、屏幕像素坐标相互转换（实际应用）
qq_45560350的博客
04-11 2273
反馈问题，希望点击阀门要素后，地图比例尺不改变，也就是地图不再缩放，这时再写死向下移动的0.001，在不同的比例尺下会出现要素飞出屏幕的情况。而 k点 的地理坐标可以从t点地理坐标推过来，但是地图的比例尺发生改变，两个地理坐标之间的数值关系就不能写死，但屏幕的像素坐标可以。方法用于移动地图中心至传入的地理坐标处，也就是说，只要我拿到A’页面的 k点 处的地理坐标，就能够实现。可以看到 t点 在A面的右下位置，我想让它到移动到页面的中上位置，也就是A‘页面的上中位置。
OpenLayers：加载GeoServer发布的WMTS、TMS服务
热门推荐
Puzzle的博客
11-17 1万+
# 数据 ## 数据说明：广州天河区路网.shp ## 坐标系：EPSG:3857 ## 坐标系范围：[-20037508.34, -20037508.34, 20037508.34, 20037508.34] ## 数据范围：[12612071.934997188, 2644615.605161872, 12628768.72360215, 2660183.6516002486] ## 数据中心：[12620420.32929967, 2652399.6283810604].....
OpenLayers下将浮云框显示位置固定
Web GIS前端研究
07-18 2482
OpenLayers下对 OpenLayers.Popup.FramedCloud.prototype.fixedRelativePosition = true; OpenLayers.Popup.FramedCloud.prototype.relativePosition = "tr";
`ol/proj`简介
05-23 461
axisOrientation: 'enu' // 东-北-上});// 添加到全局投影列表。
OpenLayers 比较有用的对象和属性
weixin_33995481的博客
03-15 365
1.ol.interaction.Pointer     是管理地图down、move、up事件的基类，也用于管理地图拖拽事件。     构造函数结构如下： new ol.interaction.Pointer(opt_options)     options包括的属性有：    handleDownEvent：处理地图的down事件。如果该事件返回true，drag队列开始执行。     h...
openlayers6加载百度在线地图
weixin_44957818的博客
09-15 1208
var projection = new ol.proj.get("EPSG:3857"); var resolutions = []; for (var i =0;i< 19; i++){ resolutions[i] = Math.pow(2,18-i); } var tilegrid = new ol.tilegrid.TileGrid({ origin: [-1657,26456], resolutions...
OpenLayers 中的 `ol/proj/Projection` 深度解析
05-23 792
OpenLayers 内置了许多常见的投影定义，可以通过- WGS84 经纬度坐标- Web Mercator 投影（Google Maps 使用）- 世界墨卡托投影- Google Maps 的旧版 EPSG 代码（已弃用，但仍有使用）axisOrientation: 'enu' // 东-北-上});// 添加到全局投影列表// 创建自定义投影});正确显示不同来源的地理数据实现自定义地图投影。
屏幕坐标获取与转换方法教程
将地理坐标转换为屏幕坐标是地理信息系统（GIS）中常见的任务，也是增强现实（AR）、移动地图应用等技术的基础。 为了深入理解屏幕坐标以及如何获取和转换这些坐标，以下是一系列详细的知识点： ### 屏幕坐标的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值