openlayers的获取简单坐标
#map {
width: 100%;
height: 500px;
}
.all {
width: 200px;
height: 50px;
position: absolute;
right: 20px;
top: 20px;
z-index: 1;
text-align: center;
line-height: 50px;
background-color: rgba(255, 255, 255, 0.6);
display: none;
}
</style>
<div id="map">
<div class="all">
</div>
</div>
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
}),
}),
],
view: new ol.View({
center: ol.proj.transform([108, 34], 'EPSG:4326', 'EPSG:3857'),
zoom: 8
}),
});
// 创建节点
var all = document.querySelector('.all')
// 鼠标移动事件
map.on('pointermove', function (e) {
// 通过获取相关数据,并进行格式转换
var coor = ol.proj.transform(e.coordinate, "EPSG:3857", "EPSG:4326")
// 样式的调整
all.style.display = 'block'
// 数据进行填充
all.innerHTML = coor[0].toFixed(3) + ',' + coor[1].toFixed(3)
})
</script>