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 编写代码,使组件更加清晰、易维护。

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

相关推荐
yuehua_zhang13 分钟前
uni app 的app端 写入运行日志到指定文件夹。
前端·javascript·uni-app
豆浩宇18 分钟前
学习PaddlePaddle--环境配置-Windows 11 + RTX 4060
人工智能·windows·深度学习·学习·目标检测·计算机视觉·paddlepaddle
qq_3391911419 分钟前
深度学习玩游戏, 模型玩游戏,大模型+游戏 llm+game, 机器学习玩游戏,人工智能游戏陪伴,模型陪玩游戏
人工智能·深度学习·玩游戏
WangYan202237 分钟前
MATLAB 2023a深度学习工具箱全面解析:从CNN、RNN、GAN到YOLO与U-Net,涵盖模型解释、迁移学习、时间序列预测与图像生成的完整实战指南
深度学习·matlab·matlab 2023a
IT_陈寒1 小时前
SpringBoot 3.x实战:5种高并发场景下的性能优化秘籍,让你的应用快如闪电!
前端·人工智能·后端
麦文豪(victor)1 小时前
自动化流水线
前端
JarvanMo2 小时前
Flutter. FractionallySizedBox
前端
EndingCoder3 小时前
调试技巧:Chrome DevTools 与 Node.js Inspector
javascript·网络·electron·node.js·vim·chrome devtools
知识分享小能手3 小时前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
卓码软件测评3 小时前
第三方web测评机构:【WEB安全测试中HTTP方法(GET/POST/PUT)的安全风险检测】
前端·网络协议·安全·web安全·http·xss