105.在 Vue 3 中使用 OpenLayers 加载静态图片作为地图底图

前言

在 WebGIS 开发中，我们通常需要加载不同类型的地图底图，如瓦片地图、影像地图等。但有时，我们也需要使用静态图片作为底图，比如在工厂、商场、室内导航等场景中。本文将介绍如何在 Vue 3 项目中，使用 OpenLayers 加载静态图片，并将其作为地图底图展示。

最终效果

技术栈

Vue 3 + Composition API
OpenLayers（适用于 WebGIS 开发的 JavaScript 库）
Vite（快速构建 Vue 3 项目）

项目初始化

首先，我们使用 Vite 创建一个 Vue 3 项目（如果已有项目，可以跳过此步骤）。

复制代码

npm create vite@latest my-vue3-openlayers --template vue
cd my-vue3-openlayers
npm install

然后安装 OpenLayers 依赖：

复制代码

npm install ol

静态图片准备

在 src/assets/OpenLayers/ 目录下放置一张静态地图图片，例如 satellite-map.jpg。

代码实现

在 src/components/OpenLayersStaticMap.vue 文件中，实现加载静态图片作为 OpenLayers 地图底图的逻辑。

1. 创建 Vue 组件

javascript 复制代码

<!--
 * @Author: 彭麒
 * @Date: 2025/3/24
 * @Email: [email protected]
 * @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。
 -->
<template>
  <div class="container">
    <div class="w-full flex justify-center">
      <div class="font-bold text-[24px]">在Vue3中使用OpenLayers加载静态图片，使其变成地图底图</div>
    </div>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import "ol/ol.css";
import { Map, View } from "ol";
import Image from "ol/layer/Image";
import ImageStatic from "ol/source/ImageStatic";
import Projection from "ol/proj/Projection";
import UrlImg from '@/assets/OpenLayers/satellite-map.jpg';
const initMap = () => {
  let extent = [0, 0, 601, 476];
  let projection = new Projection({
    code: "proj",
    units: "pixels",
    extent: extent,
  });

  let myLayer = new Image({
    source: new ImageStatic({
      url: UrlImg,
      projection: projection,
      imageExtent: extent,
    }),
  });

  new Map({
    target: "vue-openlayers",
    layers: [myLayer],
    view: new View({
      projection: projection,
      center: [300, 238],
      zoom: 3,
    }),
  });
};

onMounted(() => {
  initMap();
});
</script>

<style scoped>
.container {
  width: 840px;
  height: 570px;
  margin: 50px auto;
  border: 1px solid #42B983;
}
#vue-openlayers {
  width: 800px;
  height: 450px;
  margin: 0 auto;
  border: 1px solid #42B983;
  position: relative;
}
</style>

2. 代码解析

Projection 定义 ：由于 OpenLayers 默认使用地理坐标系（经纬度），而静态图片通常使用像素坐标，我们需要创建一个自定义的 Projection。
ImageStatic 配置 ：使用 ImageStatic 作为图片数据源，并指定 imageExtent 来定义图片的边界。
View 配置 ：设置 center 为图片中心，zoom 级别适配图片大小。
生命周期管理：
- onMounted：组件加载时初始化 OpenLayers 地图。
- onUnmounted：组件销毁时清理 map，避免内存泄漏。

组件引入与使用

在 App.vue 或其他页面组件中引入 OpenLayersStaticMap.vue。

复制代码

<template>
  <div>
    <OpenLayersStaticMap />
  </div>
</template>

<script setup>
import OpenLayersStaticMap from "@/components/OpenLayersStaticMap.vue";
</script>

运行项目

复制代码

npm run dev

在浏览器打开 http://localhost:5173/（端口可能不同），即可看到 OpenLayers 以静态图片作为地图底图的效果。

总结

本文介绍了如何在 Vue 3 中使用 OpenLayers 加载静态图片，使其作为地图底图。

关键点：

使用 ImageStatic 作为 OpenLayers 的数据源。
通过 Projection 自定义投影，使图片坐标适配 OpenLayers。
结合 Vue 3 Composition API 编写代码，使组件更加清晰、易维护。

这种方法适用于工厂平面图、商场导览图、室内导航等场景，希望对大家有所帮助！🚀