141.在 Vue 3 中使用 OpenLayers Link 交互：把地图中心点 / 缩放级别 / 旋转角度实时写进 URL，并同步解析显示

本文分享一个前端小技巧：借助 OpenLayers 的 Link 交互 在浏览器地址栏实时记录地图状态，同时把这些参数解析出来展示在页面上。

• ✨ 双向同步：拖动、缩放、旋转地图时，URL 自动更新；手动修改 URL 或后退 / 前进，也能把地图状态恢复。

• ✨ Vue 3 + Composition API 全家桶写法，代码易拆易扩展。

• ✨ 无需后端，纯前端即可玩转「场景定位」功能，适合 DEMO 分享、地图书签、协同定位等场景。

1️⃣ 效果演示

2️⃣ 技术栈 & 版本

3️⃣ 原理概述

1. Link 交互

   import Link from 'ol/interaction/Link'
   map.addInteraction(new Link())
   

   • 监听 moveend、rotateend 等事件，把 中心坐标（经纬度）、缩放级别、旋转角 写入 URL（?x=...&y=...&z=...&r=...）。

   • 支持浏览器前进 / 后退，自动恢复地图状态。

2. window.addEventListener('popstate', …)

   • 捕捉地址栏变动（包括用户手动编辑 / 点击历史栈按钮）。

   • 调用自定义 parseUrlParams() 更新页面侧栏信息。

3. 解析展示
   使用 URLSearchParams + 可选哈希解析，将参数列表渲染到 <div class="url-info"> 中，实时可视化。

4️⃣ 完整代码

4.1 目录结构建议

src/
  assets/
  components/
  pages/
    MapLinkDemo.vue   <- 本文示例
  main.js

4.2 MapLinkDemo.vue

一口气粘贴即可跑通（若使用 TS，把 ref、map 类型补上即可）。

<!--
 * @Author: 彭麒
 * @Date: 2025/7/1
 * @Email: 1062470959@qq.com
 * @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。
 -->
<template>
  <div class="container">
    <div class="w-full flex justify-center flex-wrap">
      <div class="font-bold text-[24px]">
        在Vue3中使用Link在URL地址栏上显示地图中心点、zoom level、旋转角度信息
      </div>
    </div>

    <!-- 添加URL参数显示区域 -->
    <div class="url-info">
      <h3>URL 参数信息：</h3>
      <div v-if="urlParams.length > 0">
        <div v-for="(param, index) in urlParams" :key="index" class="param-item">
          <span class="param-name">{{ param.name }}:</span>
          <span class="param-value">{{ param.value }}</span>
        </div>
      </div>
      <div v-else>无参数</div>
    </div>

    <div id="vue-openlayers" ref="mapEl"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import TileJSON from 'ol/source/TileJSON'
import Link from 'ol/interaction/Link' // 核心交互
import { DragRotateAndZoom, defaults as defaultInteractions } from 'ol/interaction'

const mapEl = ref(null)
const urlParams = ref([])
let map = null

// 解析 URL 参数
function parseUrlParams() {
  const searchParams = new URLSearchParams(window.location.search)
  const params = []

  searchParams.forEach((value, key) => {
    params.push({ name: key, value: value })
  })

  // 也可以提取哈希部分的参数
  const hash = window.location.hash.substring(1)
  if (hash) {
    const hashParams = new URLSearchParams(hash)
    hashParams.forEach((value, key) => {
      params.push({ name: `hash:${key}`, value: value })
    })
  }

  urlParams.value = params
}

// 初始化底图
function loadMapTiler(type = 'streets') {
  // 清空原有图层
  map.getLayers().getArray().forEach((layer) => {
    if (layer) map.removeLayer(layer)
  })

  const url = `https://api.maptiler.com/maps/${type}/tiles.json?key=RbTrJIUQMw0c6xtn6kZr`

  const source = new TileJSON({
    url: url,
    tileSize: 512,
    crossOrigin: 'anonymous'
  })

  const tileLayer = new Tile({ source })
  map.addLayer(tileLayer)
}

// 初始化地图
function initMap() {
  map = new Map({
    target: mapEl.value,
    layers: [],
    view: new View({
      center: [13247019.404399557, 4721671.572580107],
      zoom: 3
    }),
    interactions: defaultInteractions().extend([new DragRotateAndZoom()])
  })

  // 添加 Link 交互：将地图状态同步到 URL
  map.addInteraction(new Link())

  // 加载默认地图图层
  loadMapTiler('streets')

  // 初始解析URL参数
  parseUrlParams()

  // 添加URL变化监听
  window.addEventListener('popstate', parseUrlParams)

  // 监听地图移动事件，以便在地图变化时更新URL参数显示
  map.on('moveend', parseUrlParams)
}

onMounted(() => {
  initMap()
})
</script>

<style scoped>
.container {
  width: 840px;
  margin: 50px auto;
  border: 1px solid #42B983;
}

#vue-openlayers {
  width: 800px;
  height: 470px;
  margin: 0 auto;
  border: 1px solid #42B983;
  position: relative;
}

.url-info {
  width: 800px;
  margin: 10px auto;
  padding: 10px;
  border: 1px dashed #42B983;
  background-color: #f5f5f5;
}

.param-item {
  margin: 5px 0;
}

.param-name {
  font-weight: bold;
  margin-right: 5px;
}

.param-value {
  color: #1976d2;
}
</style>

5️⃣ 关键点拆解

6️⃣ 常见问题 & 解决方案

7️⃣ 延伸玩法

1. 地图书签分享
   把当前 URL 发给同事 / 客户，打开即定位到同一视角。

2. 集成后台数据
   后端记录重要坐标 → 前端读取 URL → 打开地图直达目标区域。

3. 批量截图脚本
   借助无头浏览器 + URL 参数，批量生成不同视角的静态地图图片。

8️⃣ 结语

一行 new Link()，即可为地图加上「自带 GPS」的能力。
如果本文对你有帮助，别忘了 点赞 👍、收藏 ⭐、评论 💬 —— 你的支持是我持续分享的最大动力！