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

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

相关推荐
毛骗导演15 小时前
从零构建现代化 CLI 应用:Claude CI 技术实现详解
前端·javascript
CUGGZ15 小时前
前端开发的物理外挂来了,爽到飞起!
前端·后端·程序员
xixixi7777716 小时前
LangChain(一个用于构建大语言模型(LLM)应用程序的开源框架)
人工智能·深度学习·机器学习·langchain·大模型·大模型框架
console.log('npc')16 小时前
前端性能优化,给录音播放的列表加个播放按键,点击之后再播放录音。减少页面的渲染录音文件数量过多导致加载缓慢
前端·javascript·vue.js·算法
江城开朗的豌豆16 小时前
React-Redux性能优化:告别"数据一变就刷屏"的烦恼!
前端·javascript·react.js
努力往上爬de蜗牛16 小时前
文件下载 针对安卓系统
前端·javascript·vue.js
一粒马豆16 小时前
excel表格通过前端fetch上传至后端flask处理流程示例
前端·python·flask·excel·h5·js·fetch
江城开朗的豌豆16 小时前
前端异步难题?用Redux-Thunk轻松搞定!
前端·javascript·react.js
正义的大古16 小时前
OpenLayers地图交互 -- 章节十二:键盘平移交互详解
javascript·vue.js·openlayers
CodeSheep16 小时前
稚晖君公司最新合伙人,公开了!
前端·后端·程序员