vue3 openlayers经纬度转墨卡托坐标系

在 Vue 中使用 OpenLayers 转换经纬度到墨卡托坐标系

地图应用开发中，经常需要处理不同的坐标系。在 Web 地图开发中，最常见的坐标系是 WGS 84 经纬度坐标系（EPSG:4326）和 Web 墨卡托坐标系（EPSG:3857）。OpenLayers 作为一个功能丰富的地图库，提供了坐标转换的功能。本文将介绍如何在 Vue 应用中使用 OpenLayers 将经纬度坐标转换为墨卡托坐标系。

初始化 OpenLayers 地图

首先，我们需要在 Vue 组件中初始化 OpenLayers 地图。在 mounted 钩子函数中，我们创建了一个新的 Map 实例，并设置了地图的目标容器、图层和视图。

mounted() {
  this.initMap();
},
methods: {
  initMap() {
    const map = new Map({
      target: 'mapDiv',
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    });
    // ...
  },
},

监听地图点击事件

为了获取用户点击地图的位置，我们在地图实例上添加了一个 singleclick 事件监听器。当用户点击地图时，我们可以通过事件对象获取点击位置的像素坐标，并使用 getCoordinateFromPixel 方法将其转换为地图坐标。

map.on('singleclick', (event) => {
  const coordinates = map.getCoordinateFromPixel(event.pixel);
  // ...
});

转换坐标系

获取到地图坐标后，我们使用 transform 方法将其从 OpenLayers 默认的 EPSG:3857 坐标系转换为 WGS 84 经纬度坐标系。然后，我们再次使用 transform 方法将经纬度坐标转换为 Web 墨卡托坐标系。

const lonLat = transform(coordinates, 'EPSG:3857', 'EPSG:4326');
const mercatorCoords = transform(lonLat, 'EPSG:4326', 'EPSG:3857');

显示坐标信息

转换后的坐标信息被保存在 Vue 组件的数据属性中，并在模板中显示。我们为显示经纬度和墨卡托坐标的元素设置了样式，使其在地图的右下角以半透明的黑色背景显示。

<template>
  <div class="mapContainer" ref="mapContainer" id="mapDiv"></div>
  <div class="lonLatDisplay">
    {{ lonLatText }}<br>
    {{ mercatorText }}
  </div>
</template>

<style scoped lang="scss">
.lonLatDisplay {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 5px 10px;
  border-radius: 5px;
  z-index: 100;
  color: #fff;
}
</style>

结论

通过上述步骤，我们在 Vue 应用中成功实现了点击地图获取经纬度和墨卡托坐标的功能。这种坐标转换在开发需要处理多种坐标系的地图应用时非常有用。OpenLayers 提供的 transform 方法使得坐标转换变得简单快捷，极大地方便了开发者处理地理空间数据。

版本

在vue2项目中如果报错，可以适当降低版本号vue2 项目使用ol openlayers报错

"ol": "^9.0.0",

演示地址

vue3 openlayers经纬度转墨卡托坐标系

实例代码下载

代码运行环境vue3 vite js nodejs 16