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: 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>

运行项目

复制代码
npm run dev

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

总结

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

关键点:

  1. 使用 ImageStatic 作为 OpenLayers 的数据源。

  2. 通过 Projection 自定义投影,使图片坐标适配 OpenLayers。

  3. 结合 Vue 3 Composition API 编写代码,使组件更加清晰、易维护。

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

相关推荐
小毛驴8507 分钟前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
go546315846517 分钟前
基于深度学习的食管癌右喉返神经旁淋巴结预测系统研究
图像处理·人工智能·深度学习·神经网络·算法
Blossom.11818 分钟前
基于深度学习的图像分类:使用Capsule Networks实现高效分类
人工智能·python·深度学习·神经网络·机器学习·分类·数据挖掘
宇称不守恒4.021 分钟前
2025暑期—05神经网络-卷积神经网络
深度学习·神经网络·cnn
誰能久伴不乏35 分钟前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
格林威1 小时前
Baumer工业相机堡盟工业相机如何通过YoloV8深度学习模型实现沙滩小人检测识别(C#代码UI界面版)
人工智能·深度学习·数码相机·yolo·计算机视觉
涔溪2 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾2 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句2 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架