官網demo地址：

Earthquakes Heatmap?

這篇主要介紹了熱力圖HeatmapLayer

HeatmapLayer 是一個用于在地圖上顯示熱力圖的圖層類型，通常用于表示地理數據中的密度或強度。例如，它可以用來顯示地震、人口密度或其他空間數據的熱點區域。在這個示例中，HeatmapLayer 被用來顯示從 KML 文件中提取的地震數據。?

 const vector = new HeatmapLayer({source: new VectorSource({url: "https://openlayers.org/en/latest/examples/data/kml/2012_Earthquakes_Mag5.kml",format: new KML({extractStyles: false,}),}),//熱力圖的模糊半徑，以像素為單位。blur: parseInt(blur.value, 10),//每個點的影響半徑，以像素為單位。radius: parseInt(radius.value, 10),//用于根據特征屬性計算熱力圖中每個點的權重 權重值 應介于 0 到 1 之間weight: function (feature) {const name = feature.get("name");const magnitude = parseFloat(name.substr(2));console.log("magnitude", magnitude);return magnitude - 5;},});

通過滑塊的改變控制圖層的半徑和模糊度?

 blur.addEventListener("input", function () {vector.setBlur(parseInt(blur.value, 10));});radius.addEventListener("input", function () {vector.setRadius(parseInt(radius.value, 10));});

?完整代碼：

<template><div class="box"><h1>Earthquakes Heatmap</h1><div id="map"></div><form><label for="radius">radius size</label><input id="radius" type="range" min="1" max="50" step="1" value="5" /><label for="blur">blur size</label><input id="blur" type="range" min="1" max="50" step="1" value="15" /></form></div>
</template><script>
import KML from "ol/format/KML.js";
import Map from "ol/Map.js";
import StadiaMaps from "ol/source/StadiaMaps.js";
import VectorSource from "ol/source/Vector.js";
import View from "ol/View.js";
import { Heatmap as HeatmapLayer, Tile as TileLayer } from "ol/layer.js";
export default {name: "",components: {},data() {return {map: null,};},computed: {},created() {},mounted() {const blur = document.getElementById("blur");const radius = document.getElementById("radius");const vector = new HeatmapLayer({source: new VectorSource({url: "https://openlayers.org/en/latest/examples/data/kml/2012_Earthquakes_Mag5.kml",format: new KML({extractStyles: false,}),}),//熱力圖的模糊半徑，以像素為單位。blur: parseInt(blur.value, 10),//每個點的影響半徑，以像素為單位。radius: parseInt(radius.value, 10),//用于根據特征屬性計算熱力圖中每個點的權重 權重值 應介于 0 到 1 之間weight: function (feature) {const name = feature.get("name");const magnitude = parseFloat(name.substr(2));console.log("magnitude", magnitude);return magnitude-5;},});const raster = new TileLayer({source: new StadiaMaps({layer: "stamen_toner",}),});new Map({layers: [raster, vector],target: "map",view: new View({center: [0, 0],zoom: 2,}),});blur.addEventListener("input", function () {vector.setBlur(parseInt(blur.value, 10));});radius.addEventListener("input", function () {vector.setRadius(parseInt(radius.value, 10));});},methods: {},
};
</script><style lang="scss" scoped>
#map {width: 100%;height: 500px;
}
.box {height: 100%;
}
</style>