openlayers获取简单坐标

390 阅读1分钟
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>