OpenLayers学习笔记----二.获取点击位置的经纬度

最新推荐文章于 2024-07-29 17:39:23 发布
最新推荐文章于 2024-07-29 17:39:23 发布
阅读量9.1k 收藏 5
点赞数
分类专栏： OpenLayers-学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chuanren1991/article/details/80485419
版权 
获取点击位置的经纬度
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="css/ol/ol.css" rel="stylesheet" />
    <script src="scripts/ol/ol.js"></script>
    <script src="scripts/jquery1.9.1.min.js"></script>
    <title></title>
</head>
<body>
    <div id="map" style="width: 100%"></div>
    <script type="text/javascript">
        var map = new ol.Map({
            layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
            ],
            target: 'map',
            view: new ol.View({
                center: ol.proj.transform(
                [104, 30], 'EPSG:4326', 'EPSG:3857'),
                zoom: 10
            })
        });
        // 监听singleclick事件
        /*
        map.on('click', function(event){
        //alert('触发点击事件' + event.clientX);  event.clienX 为undefined
        var t = ol.proj.transform(map.getEventCoordinate(event), 'EPSG:3857', 'EPSG:4326')
        alert(t);
        })
        */
        $("#map").click(function (e) {
            // alert('X ; '+ e.clientX  + 'Y: '+e.clientY);
            var t = ol.proj.transform(map.getEventCoordinate(e), 'EPSG:3857', 'EPSG:4326');
            alert(t);
        })
    </script>
</body>
</html>

阿发博客
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Openlayers实战：点击某点，overlay显示经纬度坐标
大剑师兰特的GIS世界
07-09 687
在之前的实战中，我们在某个固定的位置， 今天改变一种形式，即采用overlay的方式，点击某处，获得到经纬度坐标，显示在overlay层上面。
openlayers：实现显示经纬度信息（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-31 164
openlayers：实现显示经纬度信息（附完整源码）
openlayers 显示点击位置的经纬度
cc1314_工作、学习有感
11-23 8222
openlayers 显示点击位置的经纬度
A010：vue+openlayers中根据地图上的矢量地块定位
最新发布
jiadsadfasfs的博客
07-29 644
vue+openlayers中根据地图上的矢量地块定位
OpenLayers 点击显示经纬度Demo
林恒的博客
06-17 1397
这里给大家分享我在OpenLayers地图开发工作中总结出的一下代码和注意点，希望对大家有所帮助 效果如下： 核心代码展示：附带讲解注释 var map = new ol.Map({ // 初始化地图 target: 'map',// 选择地图对象 layers: [ new ol.layer.Tile(...
OpenLayers实战，Openlayers获取浏览器当前用户的经纬度位置并定位到对应位置
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
06-12 1923
本篇讲一下Openlayers获取浏览器当前用户的经纬度位置并定位到对应位置，会像高德地图一样触发浏览器左上角位置权限，确认后就可以获取位置并控制地图中心点到用户所在位置。适用于Edge、firefox和移动端浏览器，pc端的chrome即使允许获取位置也会显示超时无法获取到位置。
Openlayers获取鼠标点击时的经纬度
weixin_30820151的博客
03-25 1806
在Openlayers点击事件中，常常需要获取当前点击点的经纬度，可以用此方法获取： map.events.register('click', map, function (e) { var pixel = new OpenLayers.Pixel(e.xy.x,e.xy.y); var lonlat = map.getLonLatFromPixel(pi...
OpenLayers入门，OpenLayers地图鼠标点击事件使用，点击地图后弹框并显示当前位置经纬度
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-30 1840
本章主要讲解OpenLayers地图点击事件的使用，以及监听地图点击事件后进行简单弹框并获取当前点击位置的经纬度并显示wgs84坐标位置和度分秒格式经纬度信息。
openlayers点击获取坐标Demo
08-29
openlayers点击获取坐标Demo ，本地即可运行
Openlayers实战：地图上显示经纬度坐标
大剑师兰特的GIS世界
07-05 611
Openlayers地图中，鼠标移动，其位置的经纬度坐会经常显示在页面中。在我们的实战课程里，详细讲一下其做法，成为一个主力的应用。
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实现根据经纬度范围在地图上定位并画出区域
第七天堂
03-29 6163
昨天完成了在页面上展现WMS服务地图。之后的业务是在地图上定位数据的显示区域。用于定位的元数据在新建时会初始化一个经纬度范围，定位的原理是根据这个经纬度范围确定在地图上显示的范围，并将区域用一个矩形框起来。由于是头一次做地图定位，走了很多的冤枉路。下面把过程记录下来，和大家一起分享。 尝试1：在得到经纬度（四个点，分别是东经，西经，南纬，北纬），根据上述的经纬度取区域中心点的经纬度，然后根据这个...
OpenLayers学习笔记-点位聚合
人与人之间最小的差别是智商，最大的差别是坚持。
07-12 861
用户点击行政区划等操作后，从后台获取区域内的点位数据，在地图上聚合显示。用户手动取消聚合，点位直接渲染在地图上。
OpenLayers学习笔记中级篇（五、地图事件）
MagicMHD的博客
06-10 3466
事件让很多业务的东西串联在一起，在前端中起着非常重要的作用，比如鼠标点击，移动事件。但其应用远不仅如此，现实生活中就存在很多大大小小的事件。 在OpenLayers 3中，同样存在非常多的事件，比如鼠标左键单击，双击等等。 同时还有一些用于各个模块之间进行协作使用的事件，比如ol.Map的postrender和propertychange事件。 通过这些事件，OpenLayers 3的功能模块协作...
openlayers学习笔记（十三）—异步调用JSON数据画点、文字标注与连线
sueRimn的博客
09-02 684
使用Openlayers 3实现调用本地json数据在地图上添加点、文字标注以及连线。 生成底图地图 首先得有一个地图作为底图，代码如下： let vectorSource = new ol.source.Vector({ wrapX: false }); const rootLayer = new ol.layer.Tile({ source:...
OpenLayers学习笔记（十二）— 飞机速度矢量线预测（二）
sueRimn的博客
05-22 464
之前有一篇博客简单写了一个模拟demo，根据物体当前的速度和方向预测多少时间后所在的位置，具体计算是参考《(译)计算距离、方位以及更多经纬度之间的点》，现在重新用计算公式实现，代码如下：　 let from, to; let createVelLine = obj => { const DEG2RAD = Math.PI / 180; const RAD2DEG = 1...
OpenLayers学习笔记中级篇（三、地图的分辨率设置）
MagicMHD的博客
06-10 4156
LOD是Levels of Detail的简写，用于根据当前的环境，渲染不同的图像，用于降低非重要的细节度，从而提高渲染效率，在电子游戏中经常运用，对于需要显示全球地图的GIS系统而言，更需要应用这项技术。 在不同的细节层次下，自然分辨率就可能不一样，这两者是紧密结合在一起的。 对于图形显示系统而言，分辨率作为屏幕坐标和世界坐标之间计算的纽带，其作用是非常重要的。 本节将以实例的方式深入浅出的讲解...
vue + openlayers鼠标移动获取地图经纬度格式化的两种方式
JunRoyal
07-29 1945
一：格式：经度:119.93 纬度:33.93 import { format } from 'ol/coordinate'; import MousePosition from "ol/control/MousePosition.js"; //鼠标获取坐标控件 const mousePositionControl = new MousePosition({ coordinateFormat: function (coordinate) { return format(coordin
openlayers教程openlayer点击气泡显示气泡信息/显示经纬度
weixin_44550643的博客
07-02 196
【代码】openlayers教程openlayer点击气泡显示气泡信息/显示经纬度。
openlayers Gateway Time-out
10-27
OpenLayers是一个用于在Web浏览器中显示交互式地图的JavaScript库。它支持多种地图提供商，包括Google Maps、Bing Maps和OpenStreetMap等。OpenLayers还提供了许多功能，例如地图缩放、地图旋转、标记、矢量图形和地图交互等。如果您遇到了“Gateway Time-out”错误，这通常意味着服务器无法在规定的时间内响应请求。这可能是由于服务器过载、网络问题或其他原因引起的。您可以尝试重新加载页面或稍后再试。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值