<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="ol/ol.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="ol/ol.js" charset="utf-8"></script> </head> <body> <div id="map" style=" 100%;height: 100%"></div> <script> var image = new ol.layer.Image({ source: new ol.source.ImageStatic({ url: "img/cloud.png", imageExtent: [15550000, 7250000, 7660000, 1560000] }) }); var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM(), }) //使用层 , image ], target: 'map', view: new ol.View({ center: [12950000, 4860000], zoom: 7 }) }); //openlayer4只有针对整个地图事件监听，可以通过以下方式达到对feature监听，也可对feature自定义点击事件。 // map.on('click', function(evt) { // map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) { // console.log(feature); // console.log(layer) // }); // }); map.on('click', function (e) { let coor = e.coordinate; let lonlat = ol.proj.transform(coor, 'EPSG:3857', "EPSG:4326"); console.log(e.coordinate) console.log("lon:" + lonlat[0] + ",lat:" + lonlat[1]); }) </script> </body> </html>