Vue 3 中使用 OpenLayers 實時顯示 zoom 及四角坐標的實現(xiàn)代碼

更新時間：2025年04月01日 10:14:25 作者：吉檀迦俐

本文介紹了如何在 Vue 3 中使用 OpenLayers 來獲取地圖的 zoom 值以及四角坐標信息,并實時更新數(shù)據(jù),這種方式可以用于 GIS 應用開發(fā),幫助用戶更好地了解當前地圖范圍,感興趣的朋友一起看看吧

在 Vue 3 中使用 OpenLayers 實時顯示 zoom 及四角坐標

1. 引言

在前端開發(fā)中，OpenLayers 是一個強大的開源地圖庫，可以用于 WebGIS 開發(fā)。在 Vue 3 中，我們可以結合 OpenLayers 來實現(xiàn)地圖的交互功能，比如獲取當前地圖的縮放級別（zoom）以及地圖邊界的坐標信息。

本篇文章將介紹如何在 Vue 3 中使用 OpenLayers，實時獲取地圖的 zoom 值，并顯示地圖視圖的左上、左下、右上、右下四個角的坐標。

2. 項目環(huán)境

Vue 3
OpenLayers
Vite（可選）

3. 代碼實現(xiàn)

3.1 安裝 OpenLayers

如果你的 Vue 3 項目還沒有安裝 OpenLayers，可以使用 npm 進行安裝：

npm install ol

3.2 代碼實現(xiàn)

創(chuàng)建一個 Vue 組件（OpenLayersMap.vue），用于渲染地圖，并監(jiān)聽 moveend 事件來獲取 zoom 值和四角坐標。

組件代碼：

<!--
 * @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>

3.3 代碼解析

初始化地圖
- initMap 方法創(chuàng)建了 OpenLayers 地圖實例，添加了 OSM（OpenStreetMap）作為底圖。
- 設置 EPSG:4326 投影坐標系。
監(jiān)聽 moveend 事件
- moveend 事件觸發(fā)時調(diào)用 updateCoordinates 方法，計算地圖視圖的 zoom 值和四個角的坐標。
獲取地圖范圍
- 使用 getTopLeft、getTopRight、getBottomLeft、getBottomRight 獲取當前地圖視圖的四個角的坐標，并格式化數(shù)據(jù)。