ol4鼠标移动事件，将鼠标位置px转换为地图坐标

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>经纬度转换坐标</title><link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css"><!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --><script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script><script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script><style></style>
</head>
<body>
<div id="map" style="width: 100%;height: 100%"></div>
<script>var mapContainer = document.getElementById('map');var map = new ol.Map({layers:[new ol.layer.Tile({source:new ol.source.OSM()})],target:'map',view:new ol.View({center: [12950000, 4860000],zoom:7})});mapContainer.addEventListener("mousemove", mousemove, false);function mousemove(e){// 采用屏幕坐标计算得到地图坐标var pos = {x:e.clientX-mapContainer.offsetLeft,y:e.clientY-mapContainer.offsetTop};//以左上为原点//地图大小var mapSize = map.getSize();//图片的经纬度，即左下角的经纬度和右上角的经纬度var temp = map.getView().calculateExtent(mapSize);var mapExtentL = {x:temp[0],y:temp[1]};//左下var mapExtentR = {x:temp[2],y:temp[3]};//右上//左下将坐标由3857投影转换为4326temp = ol.proj.transform([ mapExtentL.x, mapExtentL.y], 'EPSG:3857', 'EPSG:4326');var mapPosL = {x:temp[0],y:temp[1]};//右上将坐标由3857投影转换为4326temp = ol.proj.transform([ mapExtentR.x, mapExtentR.y], 'EPSG:3857', 'EPSG:4326');var mapPosR = {x:temp[0],y:temp[1]};pos = {lon:mapPosL.x+pos.x*(mapPosR.x-mapPosL.x)/mapSize[0],lat:mapPosR.y+pos.y*(mapPosL.y-mapPosR.y)/mapSize[1]};console.log("经度："+pos.lon.toFixed(6) +" 纬度："+pos.lat.toFixed(6));}
</script>
</body>
</html>

效果图

ol4鼠标移动事件，将鼠标位置px转换为地图坐标相关推荐

css标签鼠标移动事件,CSS鼠标响应事件经过、移动、点击示例介绍
几种鼠标触发CSS事件. 说明: onMouseDown 按下鼠标时触发 onMouseOver 鼠标经过时触发 onMouseUp 按下鼠标松开鼠标时触发 onMouseOut 鼠标移出时触发 on ...
重新认识键盘与鼠标——键盘事件与鼠标事件
目录一.键盘事件 1.1 详解VB提供三种键盘事件:KeyPress.KeyDown和KeyUp. 1.2 KeyPress事件 1.3 KeyDown和KeyUp事件二.鼠标事件 MouseDo ...
java监听鼠标双击_java鼠标双击事件 java鼠标双击监听
爱学习的小伙伴们,可能都学习过java,但是你知道java鼠标双击事件是怎么实现的吗?不知道的话跟着小编一起来学习了解java鼠标双击事件吧. java鼠标双击事件实例介绍 public class ...
Qt：鼠标事件（鼠标移动事件、鼠标按下事件、鼠标释放事件、进入窗口区域、离开窗口区域）
鼠标事件,本质是重写重写QWidgt中虚函数. 以下程序是获取鼠标坐标: mylabel.h #ifndef MYLABEL_H #define MYLABEL_H #include <QLab ...
html鼠标滑轮事件,js鼠标滚轮上下滚动监听事件应用实例（跨浏览器，亲测）
最近做项目涉及到多个DIV切换效果,包括普通按钮点击切换和鼠标滚轮上下滚动切换等:其主要涉及到的内容就是鼠标滚轮上下切换的事件监听,在此记录一下:也希望能帮到各位有需要的朋友. 以下为项目实例: $( ...
鼠标滚动事件，鼠标滚动一下，屏幕滑动一屏
思路:1.判断鼠标向上还是向下滚动 2.执行鼠标事件鼠标滚动事件注册事件资料:https://www.cnblogs.com/wsoft/articles/2856861.html <!DOC ...
java响应鼠标滚轮事件_鼠标滚轮事件MouseWheel
其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox ...
鼠标移动事件（鼠标移动到主菜单上显示子菜单）
mouseenter():当鼠标指针穿过元素时,会发生 mouseenter 事件.与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件.如果鼠标指针穿 ...
html文本框鼠标离开事件,html鼠标事件_文本框事件
该楼层疑似违规已被系统折叠隐藏此楼查看此楼今天57号网络技术分享给大家介绍html鼠标事件,就是当前文本框获得焦点时,里面的原有文本清零. 首先我们来看一看源代码运行后的效果图片: 你也可以[点击 ...

ol4鼠标移动事件，将鼠标位置px转换为地图坐标

ol4鼠标移动事件，将鼠标位置px转换为地图坐标相关推荐

最新文章

热门文章