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

2025/5/14 22:07:59 来源：https://blog.csdn.net/Miller777_/article/details/146475537 浏览: 次关键词：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 组件

<!--* @Author: 彭麒* @Date: 2025/3/24* @Email: 1062470959@qq.com* @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>