您的位置：首页 > 其它

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

2018-01-19 15:07 603 查看

<!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投影转换为4326
temp = ol.proj.transform([ mapExtentL.x, mapExtentL.y], 'EPSG:3857', 'EPSG:4326');

var mapPosL = {x:temp[0],y:temp[1]};
//右上将坐标由3857投影转换为4326
temp = 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 屏幕鼠标位置地图坐标坐标转换

相关文章推荐

新的分享

章节导航