本文介绍如何在Cesium中展示热力图。目前比较常用的热力图插件是heatmap.js,实现的原理是使用heatmap.js生成热力图后,再将图贴到Cesium的相应位置。
准备工作:
1. 首先下载heatmap.js插件,官网地址:https://www.patrick-wied.at/static/heatmapjs。
2. 然后初始化Cesium,准备展示环境
主要步骤:
1. 确定热力图画布的宽高
2. 根据热力图显示的经纬度,将点映射到画布对应的位置,并创建热力点
3. 初始化热力图对象h337,并设置热力点数据
4. 创建Cesium对象,并将热力图贴到Cesium对象相应的位置
效果图:
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <!-- Use correct character set. --> <meta charset="utf-8"> <!-- Tell IE to use the latest, best version. --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Make the application on mobile take up the full browser screen and disable user scaling. --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>热力图</title> <script src="../Build/Cesium/Cesium.js"></script> <!--热力图官网 https://www.patrick-wied.at/static/heatmapjs/--> <script src="./js/heatmap.min.js"></script> <style> @import url(../Build/Cesium/Widgets/widgets.css); html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; position: absolute; } .div-heatmap { width: 600px; height: 400px; display: none; } </style> </head> <body> <div id="cesiumContainer"></div> <!--热力图容器--> <div class="div-heatmap"></div> <script> var points = []; var width = 600; var height = 400; var max = 100; // 热力图经纬度范围 var latMin = 28.364807; var latMax = 40.251095; var lonMin = 94.389228; var lonMax = 108.666357; // 根据热力图图片范围,生成随机热力点和强度值 for (var i = 0; i < 300; i++) { var lon = lonMin + Math.random() * (lonMax - lonMin); var lat = latMin + Math.random() * (latMax - latMin); var value = Math.floor(Math.random() * max); var point = { x: Math.floor((lat - latMin) / (latMax - latMin) * width), y: Math.floor((lon - lonMin) / (lonMax - lonMin) * height), value: value }; points.push(point); } // 创建热力图 var heatmapInstance = h337.create({ container: document.querySelector('.div-heatmap') }); var data = { max: max, data: points }; heatmapInstance.setData(data); // 将热力图添加到球体上(生成的热力图canvas元素类名为heatmap-canvas) var canvas = document.getElementsByClassName('heatmap-canvas'); // 更换默认Ion的accesstoken,初始化Cesium Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzZjhlMzE4MS1iNTU1LTRmMWYtYjQ5MC03Nzg1YzMwNTAwMWMiLCJpZCI6MTk0MzIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzU1Mjc1NDV9.PTf_VP102asNYU199ovMqgITS_2KCHtEP54TXLe7y5I'; var viewer = new Cesium.Viewer('cesiumContainer', { animation: false, timeline: false }); viewer.entities.add({ name: 'heatmap', rectangle: { coordinates: Cesium.Rectangle.fromDegrees(lonMin, latMin, lonMax, latMax), material: new Cesium.ImageMaterialProperty({ image: canvas[0], transparent: true }) } }); viewer.zoomTo(viewer.entities); </script> </body> </html>
欢迎分享交流,转载请注明出处:WithCoder » 在Cesium中展示热力图heatmap