Vue 3 中使用 OpenLayers 实时显示 zoom 及四角坐标的实现代码

npm install ol

<!--
 * @Author: 彭麒
 * @Date: 2025/4/1
 * @Email: 1062470959@qq.com
 * @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。
 -->
<template>
  <div class="container">
    <div class="w-full flex justify-center flex-wrap">
      <div class="font-bold text-[24px]">在Vue3中使用OpenLayers实时显示zoom、左下、左上、右上、右下的坐标</div>
    </div>
    <h4>
      当前zoom值： {{ czoom }}; <br>
      左上{{ tl }} --- 左下{{ bl }} --- 右上{{ tr }} --- 右下{{ br }};
    </h4>
    <div id="vue-openlayers"></div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { getTopLeft, getBottomRight, getBottomLeft, getTopRight } from 'ol/extent';
const map = ref(null);
const czoom = ref(6);
const tl = ref([]);
const tr = ref([]);
const bl = ref([]);
const br = ref([]);
const updateCoordinates = () => {
  if (!map.value) return;
  czoom.value = map.value.getView().getZoom();
  const extent = map.value.getView().calculateExtent(map.value.getSize());
  tl.value = [Number(getTopLeft(extent)[0].toFixed(2)), Number(getTopLeft(extent)[1].toFixed(2))];
  tr.value = [Number(getTopRight(extent)[0].toFixed(2)), Number(getTopRight(extent)[1].toFixed(2))];
  bl.value = [Number(getBottomLeft(extent)[0].toFixed(2)), Number(getBottomLeft(extent)[1].toFixed(2))];
  br.value = [Number(getBottomRight(extent)[0].toFixed(2)), Number(getBottomRight(extent)[1].toFixed(2))];
};
const initMap = () => {
  map.value = new Map({
    target: "vue-openlayers",
    layers: [
      new TileLayer({
        source: new OSM()
      })
    ],
    view: new View({
      projection: "EPSG:4326",
      center: [116.15, 40.79],
      zoom: czoom.value
    }),
  });
  map.value.on('moveend', updateCoordinates);
};
onMounted(() => {
  initMap();
  updateCoordinates();
});
</script>
<style scoped>
.container {
  width: 840px;
  height: 630px;
  margin: 50px auto;
  border: 1px solid #42B983;
}
#vue-openlayers {
  width: 800px;
  height: 450px;
  margin: 0 auto;
  border: 1px solid #42B983;
  position: relative;
}
</style>