openlayers 实现热力图 样式可调
在https://blog.csdn.net/qq_36287830/article/details/131844745?spm=1001.2014.3001.5501基础上改进来的

关键代码
如果你有数据可以不使用for循环

 var blurInput = document.getElementById("blur");var rediusInput = document.getElementById("radius");var heatmapData = [];for (var i = 0; i < 1000; i++) {heatmapData.push([Math.random() * 360 - 180, // 随机经度Math.random() * 180 - 90, // 随机纬度Math.random(), // 随机权重]);}let pointHost = new ol.layer.Heatmap({//热力图图层source: new ol.source.Vector({features: heatmapData.map((item) => {let feature = new ol.Feature({geometry: new ol.geom.Point([item[0], item[1]]),});feature.set("weight", item[2] * 1.5);//权重return feature;}),}),blur: parseFloat(blurInput.value), // 模糊程度radius: parseFloat(rediusInput.value), // 半径zIndex: 5,//层级});map.addLayer(pointHost);blurInput.addEventListener("input", (target) => {pointHost.setBlur(parseFloat(target.target.value));});rediusInput.addEventListener("input", (target) => {pointHost.setRadius(parseFloat(target.target.value));});