Openlayers中点击地图获取坐标并输出

向右看齐 2022-10-18 15:58 323阅读 0赞

# 场景 #

Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/118492511][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118492511]

在上面加载离线瓦片地图显示的基础上怎样在地图上点击并能获取到坐标。

实现效果如下：

![20210708162501921.gif][]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi ][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

# 实现 #

通过ol.Map新建Openlayers的核心组件。

//Map Openlayers的核心组件，包含图层、交互事件、UI控制元素等。
            var map = new ol.Map({
                layers: [layer,lineVector],
                target: 'map',
                view: view
            });

然后设置其单击事件，在控制台输出坐标。

//单击获取地图坐标
            map.on('singleclick',(evt)=>{
            console.log(evt.coordinate);
            });

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118492511]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118492511
[20210708162501921.gif]: /images/20221005/ee609c3cf85a465ea0f8ac16d58784aa.png
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi

发表评论取消回复

表情：

评论列表（有 0 条评论，323人围观）

还没有评论，来说两句吧...

相关阅读

相关 Openlayers实战：点击某点，overlay显示经纬度坐标

在之前的实战中，我们在某个固定的位置[显示鼠标位置的经纬度][Link 1]，今天改变一种形式，即采用overlay的方式，点击某处，获得到经纬度坐标，显示在overlay层

比眉伴天荒/ 2024年03月17日 16:38/ 0 赞/ 51 阅读

相关获取地图多边形点坐标

一、百度地图AK密钥申请 1、密钥申请地址：http://lbsyun.baidu.com/apiconsole/key 2、密钥申请配置：（1）应用类型：浏览器端；

水深无声/ 2023年03月14日 05:30/ 0 赞/ 308 阅读

相关 Openlayers中点击地图获取坐标并输出

场景 Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示： [https://blog.csdn.net/BADAO\_LIUM

向右看齐/ 2022年10月18日 15:58/ 0 赞/ 324 阅读

相关 JavaScript 获取鼠标点击位置坐标

对于获取鼠标点击位置的坐标我们经常遇到，但是在不同的浏览器下会有不同的结果，让我们很苦恼；下面做一些简单的总结：相对于屏幕事件screenX，screenY获取的是

墨蓝/ 2022年06月17日 00:15/ 0 赞/ 269 阅读

相关获取View点击位置坐标(详解)

在做一个view背景特效的时候被坐标的各个获取方法搞晕了，几篇抄来抄去的博客也没弄很清楚。现在把整个总结一下。其实只要把下面这张图看明白就没问题了。

一时失言乱红尘/ 2022年06月05日 01:36/ 0 赞/ 428 阅读

相关 OpenLayers 在地图上画线，获取点坐标（以天地图为例）

应用场景：最近在开发过程中，有个需求，需要在天地图中画线，结束后获取对应的坐标集合，查阅 OpenLayers API 和网上的相关资料后得以实现，特此记录

亦凉/ 2022年05月27日 23:39/ 0 赞/ 3649 阅读

相关高德地图点击获取坐标

<link href="<?=Yii::getAlias('@resUrl/css/manage.css');?>" rel="stylesheet">

刺骨的言语ヽ痛彻心扉/ 2022年05月17日 11:09/ 0 赞/ 499 阅读

相关百度地图鼠标点击或者移动获取坐标经纬度

var map = new BMap.Map('map'); var poi = new BMap.Point(112.53, 37.87); map.

﹏ヽ暗。殇╰゛Y/ 2022年05月17日 00:21/ 0 赞/ 556 阅读

相关获取点击坐标（脚本代码记录）

RaycastHit hit; Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);

梦里梦外;/ 2021年12月14日 12:35/ 0 赞/ 241 阅读

相关 Vue - 高德地图获取所点击位置的经纬度坐标

一. 在最外层的html.js中引入高德key ![在这里插入图片描述][20200519103055746.png] ![在这里插入图片描述][watermark_t

本是古典何须时尚/ 2021年07月26日 02:52/ 0 赞/ 2023 阅读