在 Vue 3 中使用 OpenLayers 加载地图瓦片

本文旨在介绍如何在 Vue 3 中使用 OpenLayers 加载地图瓦片。

• 首先，我们需要确保已经安装了 OpenLayers。
• 然后，我们将在 Vue 3 项目中创建一个地图容器，并配置地图视图和瓦片层。
• 最后，我们将用代码创建地图并添加到我们的页面中。

第一步：安装 OpenLayers

通过以下命令安装 OpenLayers：

使用 npm：

npm i ol

或者，使用 yarn：

yarn add ol

第二步：在页面中定义一个地图容器

我们需要在页面上定义一个容器，这个容器将用于显示我们的地图。请确保容器有足够的宽度和高度。

<div id="map" ref="mapRef"></div>

第三步：引入 OpenLayers 依赖

导入以下内容：

import { Map, View } from 'ol'        // 导入 Map 和 View 模块，分别用于创建地图和设置地图视图
import TileLayer from 'ol/layer/Tile' // 从 导入 TileLayer 模块，用于创建地图的瓦片图层
import { fromLonLat } from 'ol/proj'  // 导入 fromLonLat 函数，用于将经纬度坐标转换为地图坐标
import { XYZ } from 'ol/source'       // 导入 XYZ 模块，用于从 XYZ 服务加载瓦片

第四步：配置地图

我们需要配置地图视图和图层。在这个例子中，我们使用的是瓦片图层，从特定的URL获取数据。

<script setup>
import { ref, reactive } from 'vue'
import { Map, View } from 'ol'        // 导入 Map 和 View 模块，分别用于创建地图和设置地图视图
import TileLayer from 'ol/layer/Tile' // 从 导入 TileLayer 模块，用于创建地图的瓦片图层
import { fromLonLat } from 'ol/proj'  // 导入 fromLonLat 函数，用于将经纬度坐标转换为地图坐标
import { XYZ } from 'ol/source'       // 导入 XYZ 模块，用于从 XYZ 服务加载瓦片

let lon = 114.35687768 // 经度值，这里需要替换为你自己的经度值
let lat = 37.97758489 // 纬度值，这里需要替换为你自己的纬度值
let satelliteTilesUrl = '' // 卫星图瓦片URL
let overlayTilesUrl = '' // 叠加图瓦片URL

const mapView = reactive({
    center: fromLonLat([lon, lat]), // 地图中心点，这里需要替换为你自己的经纬度
    zoom: 12, // 初始缩放级别
    minZoom: 2, // 最小缩放级别
    maxZoom: 15 // 最大缩放级别
})

// 创建一个新的瓦片图层，用于显示卫星图像
const satelliteLayer = new TileLayer({
  source: new XYZ({
    url: satelliteTilesUrl
  })
})

// 创建一个新的瓦片图层，用于显示叠加的图像
const overlayLayer = new TileLayer({
  source: new XYZ({
    url: overlayTilesUrl
  })
})

// 创建一个引用 (ref)，用于在 Vue 组件中引用地图元素
const mapRef = ref(null)


mapRef.value = new Map({
  layers: [satelliteLayer, overlayLayer], // 设置地图的图层
  view: new View(mapView), // 设置地图视图
  target: 'map' // 设置目标容器的ID
})

return { mapRef }
</script>

你可以根据需要修改经度、纬度、瓦片URL等配置。

结果展示

总结

以上是在 Vue 3 中使用 OpenLayers 加载地图瓦片的基础示例。 通过这个示例，你可以在 Vue 3 项目中方便快捷地使用 OpenLayers 来显示和操作地图。

1. 内容很基础，是现实使用的一个记录，如果对你有帮助更好
2. 此文提交时ol的版本是^7.4.0
3. 欢迎评价、批评