Openlayers之热点图

最新推荐文章于 2024-08-17 19:24:05 发布

桃李不言_下自成蹊

最新推荐文章于 2024-08-17 19:24:05 发布

阅读量3.2k

点赞数 1

分类专栏： OpenLayers3

本文链接：https://blog.csdn.net/SmileCoffin/article/details/56287834

版权

本文介绍了如何使用OpenLayers创建热点图。热点图是一种显示数据密度和变化趋势的图示，通过颜色差异来表现区域的热度。文章详细阐述了初始化页面以及调整热点半径和模糊尺寸的代码实现步骤。

摘要由CSDN通过智能技术生成

1、热点图

热点图，也叫热力图，是一种以特殊高亮的形式显示事物的密度分布、变化趋势的等的图示方法，通常用不同颜色的区块叠加在地图上进行显示，用颜色变化展示事物的状态与变化趋势等，非常直观；

2、代码实现

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../lib/ol/ol.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            //获取热点半径的range标签
            var blur = document.getElementById('blur');
            //获取模糊尺寸的range标签
            var radius = document.getElementById('radius');

            //实例化一个热点图图层
            var vector