WebGIS客户端地图可视化：如何制作热力图

最新推荐文章于 2024-02-29 17:30:28 发布

GIS开发特训营

最新推荐文章于 2024-02-29 17:30:28 发布

阅读量1.8k

点赞数 4

分类专栏： GIS开发文章标签： javascript 开发语言 web gis

本文链接：https://blog.csdn.net/gis_witch/article/details/122404973

版权

GIS开发专栏收录该内容

34 篇文章 29 订阅

订阅专栏

本文示例主要显示了如何在当前地图中加载部分区域地震数据的热力图。示例需要使用【include-openlayers-local.js】开发库，首先创建地图对象，添加 OSM 底图，后实例化ol.layer.Heatmap对象构建热力图图层并添加到地图中。

效果如下图所示：

实现步骤

1、引用开发库：

本示例引用 local 本地【include-openlayers-local.js 】开发库；

2、创建布局：

创建id="mapCon"的 div 作为地图容器，并设置其样式；

3、创建地图对象:

创建地图对象，设置地图必要参数；

  //初始化地图容器
  map = new ol.Map({
    target: 'mapCon', //地图容器div的ID
    controls: ol.control.defaults({
      attributionOptions: {
        collapsible: true,
      },
    }),
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [80, 30], //地图初始中心点
      maxZoom: 28, //最大瓦片显示级数
      minZoom: 1, //最小瓦片显示级数
      zoom: 3, //地图初始显示级数
    }),
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM({ wrapX: false }),
        opacity: 0.7,
      }),
    ],
  })

4、构建热力图图层:

实例化ol.layer.Heatmap对象构建热力图图层，并添加到地图中。

source.addFeatures(features)
//创建热力图层
var Heatmap = new ol.layer.Heatmap({
  source,
  blur,
  radius,
  weight: 'weight', //默认热力图层权值字段（0-1）
})

代码块

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <!--当前示例页面样式表引用-->
    <link rel="stylesheet" href="./static/demo/openlayers/example/style.css" />
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-openlayers-local.js"></script>
    <script src="./static/data/kml/Earthquake_2012.js"></script>
    
    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 95%;
            position: absolute;
        }
        #layertree li > span {
            cursor: pointer;
            font-size: 6px;
        }
        #layertree ul{
            font-family: cursive;
            color:white;
            margin: 0px;
            padding-left: 20px;
        }
        fieldset{
            padding-left: 6px;
            padding-bottom: 5px;
            padding-right: 6px;
            border: none;
        }
      
        fieldset label {
            float:left;
            color: white;
            font-size: 6px;
            font-weight: 500;
            font-family: cursive;
            margin: 2px 2px;
            width: 70%;
        }
        fieldset input {
            float: left;
            margin-bottom:2px;
            width: 10%;
        }
        input[type="range"] {
        /*-webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;*/
            -webkit-appearance:none; /*去除默认样式*/
            background-color: #ebeff4;
            /*border-radius: 15px;*/
            width: 70px;
            -webkit-appearance: none;
            height:2px;
            padding: 0;
            border: none;
            margin-top: 10px
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;/*去除默认样式*/
            cursor: default;
            top: 0;
            height: 10px;
            width: 10px;
            transform: translateY(0px);
            /*background: none repeat scroll 0 0 #5891f5;*/
            background: #fff;
            border-radius: 5px;
            border: 2px solid #006eb3;
            /*-webkit-box-shadow: 0 -1px 1px #fc7701 inset;*/
        }
    </style>

    <script type="text/javascript">
        var map = null;
        var heatLayer = null;

        function init() {
            //初始化地图容器
            map = new ol.Map({
                target: 'mapCon',     //地图容器div的ID
                controls: ol.control.defaults({
                    attributionOptions: ({
                        collapsible: true
                    })
                }),
                view: new ol.View({
                    projection: 'EPSG:4326',
                    center: [80,30],  //地图初始中心点
                    maxZoom: 28,         //最大瓦片显示级数
                    minZoom: 1,          //最小瓦片显示级数
                    zoom: 3             //地图初始显示级数
                
                }),
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM({wrapX:false}),
                        opacity: 0.7
                    })
                ]
            }); 

            var blur = document.getElementById('blur');
            var radius = document.getElementById('radius');
            
            //添加监听'input'值变化
            blur.addEventListener('input', function() {
                heatLayer.setBlur(parseInt(blur.value, 10));
            });

            radius.addEventListener('input', function() {
                heatLayer.setRadius(parseInt(radius.value, 10));
            });
            
            heatLayer = createHeatmapLayer(eathquake.data,parseInt(blur.value, 10),parseInt(radius.value, 10));
            map.addLayer(heatLayer);
        
        }

        function createHeatmapLayer (data, blur, radius){
            var source = new ol.source.Vector({wrapX:false})
            var features = []
            for (var i in data) {
                var att = parseFloat(data[i].magnitude) ;
                for(var j in data[i].coordinates)
                {
                    var newFeature = createFeature([parseFloat(data[i].coordinates[j][0]),parseFloat(data[i].coordinates[j][1])],att);
                    features.push(newFeature)
                }
        
            }
            source.addFeatures(features)
            //创建热力图层
            var Heatmap = new ol.layer.Heatmap({
                source,
                blur,
                radius,
                weight:'weight'  //默认热力图层权值字段（0-1）
            });
            return Heatmap
        }

        function createFeature (coordinates,att) {
            var tFeature =new ol.Feature({
                geometry: new ol.geom["Point"](coordinates)
            });
            tFeature.set('weight', att - 5);
            return tFeature;
        }
    </script>
</head>

<body onload="init()">
    <div id="mapCon">
    </div>
    <fieldset id="layertree" style="position: absolute;width: 180px;top: 18px;left: 50px;background-color: black;opacity: 0.65;border-radius: 10px;padding: 10px 6px;">
        <ul>
            <li>
                <span>热力参数</span>
                <fieldset id="layer0">
                    <label style="width: 54px;line-height: 17px">半径:</label><input id="radius" type="range" min="1" max="50" step="1" value="10"/>
                </fieldset>
                <fieldset id="layer0">
                    <label style="width: 54px;line-height: 17px">模糊半径:</label><input id="blur" type="range" min="1" max="50" step="1" value="15"/>
                </fieldset>
            </li>
        </ul>
    </fieldset>
</body>

</html>