openlayers 热力图 天地图

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));
            });