Vue 3 + Vite + Openlayers + Element Plus：打造你的第一个地图应用

Vue 3 + Vite + Openlayers + Element Plus：打造你的第一个地图应用

作为一名前端工程师，你是否想过如何在自己的项目中集成地图功能？今天，就让我们一起探索如何使用 Vue 3、Vite、Openlayers 和 Element Plus 快速搭建一个地图应用，实现地图展示、放大缩小等基础功能。

前言

在现代的前端项目中，地图功能常常是不可或缺的一部分，无论是展示地理位置信息，还是实现导航功能，地图都扮演着重要的角色。Openlayers 是一个强大的开源地图库，支持多种地图源和丰富的交互功能。而 Vue 3 和 Element Plus 则为我们提供了高效的框架和优雅的 UI 组件，结合 Vite 的快速开发体验，我们可以轻松构建现代化的前端应用。

项目搭建

1. 创建 Vue 3 + Vite 项目

首先，我们需要创建一个基于 Vue 3 和 Vite 的项目（pnpm版本：20+）

pnpm create vite my-vue-app --template vue

进入项目目录：

cd openlayers-map-app

2. 安装依赖

安装 Openlayers 和 Element Plus：

pnpm add ol element-plus -D

3. 配置 Element Plus

在 main.js 中引入 Element Plus：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

地图展示

1. 创建地图基础组件

在 src/components 目录下创建一个名为 MapComponent.vue 的文件，用于封装地图功能：

<template>
  <div id="map" class="map"></div>
</template>

<script setup>
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import { defaults as defaultControls, Zoom } from "ol/control";
import { ref, onMounted } from "vue";
let map = ref(null);
function initMap() {
  map.value = new Map({
    target: "map",
    layers: [
      new TileLayer({
        source: new OSM(),
      }),
    ],
    view: new View({
      center: [0, 0], // 地图中心点坐标
      zoom: 2, // 初始缩放级别
    }),
    controls: defaultControls({
      zoom: false,  //缩放隐藏
      rotate: false,  //旋转隐藏
      attribution: false,  //标注隐藏
    }),
  });
}
onMounted(() => {
  initMap();
});
</script>

<style scoped>
.map {
  height: 600px;
  width: 100%;
}
</style>

2. 在主页面中使用地图组件

在 src/App.vue 中引入并使用 MapComponent：

<template>
  <div id="app">
    <el-container>
      <el-header>
        <h1>Openlayers 地图应用</h1>
      </el-header>
      <el-main>
        <MapComponent />
      </el-main>
    </el-container>
  </div>
</template>
<script setup>
import MapComponent from "./components/MapComponent.vue";
</script>

地图放大缩小功能

1. 添加缩放控件

Openlayers 默认提供了缩放控件，我们可以通过配置 controls 来启用它。修改 MapComponent.vue 中的 initMap 方法：

import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import { defaults as defaultControls, Zoom } from "ol/control";
import { ref, onMounted } from "vue";
let map = ref(null);
function initMap() {
  map.value = new Map({
    target: "map",
    layers: [
      new TileLayer({
        source: new OSM(),
      }),
    ],
    view: new View({
      center: [0, 0], 
      zoom: 2,
    }),
    controls: defaultControls({
      zoom: true, //为true 添加系统默认的放大缩小控件
      rotate: false,
      attribution: false,
    }),
  });
}

2. 自定义缩放按钮

如果你想要更灵活地控制缩放功能，可以通过 Element Plus 提供的按钮组件来实现。在 MapComponent.vue 中添加以下代码：

<template>
  <div id="map" class="map"></div>
  <div class="zoom-controls">
    <el-button type="primary" @click="zoomIn">放大</el-button>
    <el-button type="primary" @click="zoomOut">缩小</el-button>
  </div>
</template>

<script setup>
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import { defaults as defaultControls, Zoom } from "ol/control";
import { ref, onMounted } from "vue";
let map = ref(null);
function initMap() {
  map.value = new Map({
    target: "map",
    layers: [
      new TileLayer({
        source: new OSM(),
      }),
    ],
    view: new View({
      center: [0, 0], // 地图中心点坐标
      zoom: 2, // 初始缩放级别
    }),
    controls: defaultControls({
      zoom: false,
      rotate: false,
      attribution: false,
    }),
  });
}
function zoomIn() {
  map.value.getView().setZoom(map.value.getView().getZoom() + 1);
}
function zoomOut() {
  map.value.getView().setZoom(map.value.getView().getZoom() - 1);
}
onMounted(() => {
  initMap();
});
</script>

<style scoped>
.map {
  height: 600px;
  width: 100%;
}
</style>

总结

通过上述步骤，我们成功地在 Vue 3 + Vite 项目中集成了 Openlayers 地图，并实现了地图展示、放大缩小等功能。Openlayers 提供了丰富的地图功能，结合 Vue 3、Vite 和 Element Plus 的强大生态，我们可以轻松构建出功能强大的地图应用。希望这篇文章能帮助你快速入门，开启你的地图开发之旅！

如果你对这个项目感兴趣，或者有任何问题，欢迎在评论区留言交流。如果你觉得这篇文章对你有帮助，别忘了点赞关注哦！

项目代码

你可以在 gitee 上查看完整的项目代码。如果链接无法访问，请检查链接的合法性，并确保网络连接正常。如果仍然有问题，可以评论区留言或者私信。