首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue 3使用 OpenLayers

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

2025-04-01 10:14:25 作者：吉檀迦俐

本文介绍了如何在 Vue 3 中使用 OpenLayers 来获取地图的 zoom 值以及四角坐标信息,并实时更新数据,这种方式可以用于 GIS 应用开发,帮助用户更好地了解当前地图范围,感兴趣的朋友一起看看吧

在 Vue 3 中使用 OpenLayers 实时显示 zoom 及四角坐标

1. 引言

在前端开发中，OpenLayers 是一个强大的开源地图库，可以用于 WebGIS 开发。在 Vue 3 中，我们可以结合 OpenLayers 来实现地图的交互功能，比如获取当前地图的缩放级别（zoom）以及地图边界的坐标信息。

本篇文章将介绍如何在 Vue 3 中使用 OpenLayers，实时获取地图的 zoom 值，并显示地图视图的左上、左下、右上、右下四个角的坐标。

2. 项目环境

Vue 3
OpenLayers
Vite（可选）

3. 代码实现

3.1 安装 OpenLayers

如果你的 Vue 3 项目还没有安装 OpenLayers，可以使用 npm 进行安装：

npm install ol

3.2 代码实现

创建一个 Vue 组件（OpenLayersMap.vue），用于渲染地图，并监听 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 方法创建了 OpenLayers 地图实例，添加了 OSM（OpenStreetMap）作为底图。
- 设置 EPSG:4326 投影坐标系。
监听 moveend 事件
- moveend 事件触发时调用 updateCoordinates 方法，计算地图视图的 zoom 值和四个角的坐标。
获取地图范围
- 使用 getTopLeft、getTopRight、getBottomLeft、getBottomRight 获取当前地图视图的四个角的坐标，并格式化数据。

4. 运行效果

运行项目后，你将看到 OpenLayers 地图，并且随着地图缩放或移动，当前 zoom 值和四角坐标会实时更新。

5. 总结

本文介绍了如何在 Vue 3 中使用 OpenLayers 来获取地图的 zoom 值以及四角坐标信息，并实时更新数据。这种方式可以用于 GIS 应用开发，帮助用户更好地了解当前地图范围。

到此这篇关于Vue 3 中使用 OpenLayers 实时显示 zoom 及四角坐标的实现代码的文章就介绍到这了,更多相关Vue 3使用 OpenLayers内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！