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/ 目录下放置一张静态地图图片，例如 satelli