98.在 Vue3 中使用 OpenLayers 根据 Resolution 的不同显示不同的地图

news2025/3/12 2:12:34

在 Vue3 中使用 OpenLayers 根据 Resolution 的不同显示不同的地图

前言

在 Web GIS（地理信息系统）应用开发中，地图的 Resolution（分辨率）是一个重要的概念。不同的 Resolution 适用于不同的地图层级，有时我们希望在不同的 Resolution 范围内切换不同的地图源，以优化用户体验。例如，在小尺度时使用 OpenStreetMap（OSM），在大尺度时使用高德地图（Amap）。

本文将介绍如何在 Vue 3 组合式 API（Composition API）中，使用 OpenLayers 实现一个根据 Resolution 自动切换地图源的示例。

1. 初始化 Vue 3 项目

首先，我们需要创建一个 Vue 3 项目。如果你还没有 Vue 3 的开发环境，可以使用 Vite 快速搭建：

npm create vite@latest vue3-openlayers --template vue
cd vue3-openlayers
npm install

然后，安装 OpenLayers：

npm install ol

2. 编写 Vue 组件

在 src/components/OpenLayersMap.vue 文件中，我们创建一个 Vue 组件，该组件会根据当前 Resolution 选择不同的地图源。

完整代码

<template>
  <div class="container">
    <div class="w-full flex justify-center">
      <div class="font-bold text-[24px]">
        在 Vue3 中使用 OpenLayers 根据 Resolution 的不同，显示不同的地图
      </div>
    </div>
    <h4>Resolution 分界点：3000， 当前 Resolution 值：{{ cResolution }}</h4>
    <div id="vue-openlayers"></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 OSM from 'ol/source/OSM';
import XYZ from 'ol/source/XYZ';

const map = ref(null);
const cResolution = ref(6);

const initMap = () => {
  const osmLayer = new Tile({
    source: new OSM(),
    minResolution: 30,
    maxResolution: 3000,
  });

  const amapLayer = new Tile({
    source: new XYZ({
      url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6",
    }),
    minResolution: 3000,
    maxResolution: 30000,
  });

  map.value = new Map({
    target: "vue-openlayers",
    layers: [osmLayer, amapLayer],
    view: new View({
      center: [663600, 4723680],
      zoom: 6,
      projection: 'EPSG:3857',
    }),
  });

  // 监听地图移动结束事件
  map.value.on('moveend', () => {
    const resolution = map.value?.getView()?.getResolution();
    if (resolution) {
      cResolution.value = Math.round(resolution);
    }
  });
};

onMounted(initMap);
</script>

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

#vue-openlayers {
  width: 800px;
  height: 420px;
  margin: 0 auto;
  border: 1px solid #42B983;
  position: relative;
}
</style>