OpenLayers绘制热力图代码记录

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

做地图开发，往往需要掌握专题地图制作的技能。今天用OpenLayers6来做一个热力图的效果。

页面效果：

代码部分:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热力图</title>
    <link rel="stylesheet" href="/css/ol.css">
    <script src="/js/ol.js"></script>
    <script src="heatmap.js"></script>      
    <script type="text/javascript">
        window.onload = function () {map();}
    </script>  
    <style>
        #map{
            position: fixed;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <form style="position: absolute;left: 200px;z-index: 999;color: blue;">
        <label>半径大小</label>
        <input id="radius" type="range" min="1" max="50" step="1" value="20" />
        <label>模糊大小</label>
        <input id="blur" type="range" min="1" max="50" step="1" value="25" />
    </form>

    <div id="map"></div>
</body>
</html>