openlayer4中获取地图坐标的方法

最新推荐文章于 2025-07-15 10:06:52 发布

浪子边

最新推荐文章于 2025-07-15 10:06:52 发布

阅读量6.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： webgis 文章标签： openlayer4

本文链接：https://blog.youkuaiyun.com/qq_31805885/article/details/78795835

webgis 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在OpenLayer中正确处理地图点击事件，并解决使用默认事件监听导致的问题。通过示例展示了如何自定义事件监听器来获取点击坐标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <title>WFS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="ol.css" type="text/css">
    <script src="ol-debug.js"></script>
    <script src="jquery.min.js"></script>
</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>