OpenLayer4——獲取滑鼠點選的座標
阿新 • • 發佈：2022-05-20
<!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="width: 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>