27.在 Vue 3 中使用 OpenLayers 加载显示热力图（使用 GeoJSON 数据）

前言

随着 Web 地图技术的快速发展，前端开发者可以使用多种库和框架来处理地图数据。其中，OpenLayers 是一个强大的开源库，提供了丰富的地图和空间数据处理功能。而 Vue 3 作为现代化的前端框架，其 Composition API 提供了更加灵活和清晰的结构，使得开发者能够更加方便地进行状态管理和数据处理。

本文将介绍如何在 Vue 3 中使用 OpenLayers 加载和显示热力图数据，数据源为 GeoJSON 格式。你将学到如何初始化地图、加载热力图以及处理 GeoJSON 数据。

技术栈

Vue 3（使用 Composition API）
OpenLayers（地图展示与处理库）
GeoJSON（数据格式）
CSS（用于样式设置）

环境准备

首先，确保你的开发环境中已经安装了 Vue 3。如果还没有安装 Vue 3，你可以通过以下命令来创建一个新的 Vue 项目：

npm create vue@latest my-vue-project cd my-vue-project npm install

接着，你需要安装 OpenLayers：

npm install ol

实现步骤

1. 创建 Vue 组件

在 Vue 3 中，我们使用 Composition API 来管理状态和生命周期钩子。首先，我们需要创建一个组件来展示地图和热力图。

2. 初始化地图

我们使用 OpenLayers 创建一个基础的地图，地图加载 OSM（OpenStreetMap）底图，并设置初始视图中心及缩放级别。

3. 加载 GeoJSON 数据

我们将通过 GeoJSON 格式提供热力图数据。每个点将包含坐标（经纬度）和一个 count 值，表示该点的热度。

4. 添加热力图图层

通过 OpenLayers 的 HeatmapLayer，我们可以将这些 GeoJSON 数据转换为热力图图层，并将其添加到地图上。

5. 代码实现

以下是完整的代码实现：

<!--* @Author: 彭麒* @Date: 2024/12/14* @Email: 1062470959@qq.com* @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。-->
<template><button class="back-button" @click="goBack">返回</button><div class="container"><div class="w-full flex justify-center"><div class="font-bold text-[24px]">在Vue3中使用OpenLayers加载显示热力图一（使用geojson数据）</div></div><div id="vue-openlayers"></div></div>
</template><script setup>
import {onMounted, ref} from 'vue'
import 'ol/ol.css'
import Map from 'ol/Map'
import View from 'ol/View'
import VectorSource from 'ol/source/Vector'
import Tile from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import HeatmapLayer from 'ol/layer/Heatmap'
import GeoJSON from 'ol/format/GeoJSON'
const map = ref(null)
const heatmapData = ref({type: 'FeatureCollection',features: [{type: 'Point',coordinates: [116.40182752977934, 39.92476619935702],count: 100,},{type: 'Point',coordinates: [116.42764915596571, 39.949683921105375],count: 200,},{type: 'Point',coordinates: [116.48107607733336, 39.88376327014636],count: 300,},{type: 'Point',coordinates: [116.43154238235083, 39.94546346522044],count: 400,},{type: 'Point',coordinates: [116.40311901342001, 39.92316223836612],count: 500,},],
})// 初始化地图
const initMap = () => {map.value = new Map({target: 'vue-openlayers',layers: [new Tile({source: new OSM(),}),],view: new View({projection: 'EPSG:4326',center: [116.395645038, 39.9299857781],zoom: 12,}),})
}// 添加热力图层
const addHeatmap = () => {const heatMapLayer = new HeatmapLayer({source: new VectorSource({features: new GeoJSON().readFeatures(heatmapData.value),}),zIndex: 9,opacity: 0.5,name: '热力图',blur: 20, // 模糊尺寸radius: 20, // 热点半径})map.value.addLayer(heatMapLayer)
}onMounted(() => {initMap()addHeatmap()
})</script><style scoped>
.container {width: 840px;height: 520px;margin: 50px auto;border: 1px solid #42B983;
}#vue-openlayers {width: 800px;height: 400px;margin: 0 auto;border: 1px solid #42B983;position: relative;
}
</style>

6. 代码解释

地图初始化：在 initMap 方法中，我们使用 OpenLayers 的 Map 类来初始化地图，并加载 OSM 底图。View 配置了地图的中心和缩放级别。
热力图层添加：在 addHeatmap 方法中，我们创建了一个 HeatmapLayer 图层，并将通过 GeoJSON 格式读取的坐标点数据传入该图层，从而展示热力图。
热力图数据：heatmapData 中包含了多个地理坐标点以及一个 count 属性。count 值表示热度，数值越大，点的热度越高。
样式：在样式部分，我们定义了容器和地图的样式，确保它们在页面中正确显示。