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

最新推荐文章于 2023-02-09 15:54:07 发布

置顶嚜溟

最新推荐文章于 2023-02-09 15:54:07 发布

阅读量842

点赞数

分类专栏： openlayers 文章标签： ol4 屏幕鼠标位置地图坐标坐标转换

本文链接：https://blog.csdn.net/lvjinhu/article/details/79106937

版权

openlayers 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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>

效果图

嚜溟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ol4鼠标移动事件，将鼠标位置px转换为地图坐标

经纬度转换坐标 var mapContainer = document.getElementById('map'); var map = new ol.Map({ layers:[new ol.layer.Tile({ source:new ol.source.OSM()
复制链接

扫一扫