Cesium实现热力图功能

最新推荐文章于 2024-04-29 01:03:33 发布
最新推荐文章于 2024-04-29 01:03:33 发布
阅读量595 收藏 3
点赞数
文章标签： webgl Cesium
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/czj_com/article/details/134557099
版权

效果图如下：

<!DOCTYPE html>
<html lang="en">

<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>Cesium热力图</title>
    <!-- 在这里引入Cesium -->
    <script src="./lib/Cesium/Cesium.js"></script>
    <script src="./js/CesiumHeatmap.js"></script>
    <link rel="stylesheet" href="./lib/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <!-- https://blog.csdn.net/weixin_45782925/article/details/123054390 -->
    <!-- 放置地球的容器 -->
    <div id="cesiumContainer"></div>
    <!-- 设置token -->
    <script>
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlMDczMzQ0NC1lZmRkLTQ0ODEtOGZhMy01MDU3NzAzM2E5YmIiLCJpZCI6MTg2MDgsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzQxNDMwNTB9.LJcpHG4SJ8DI1mCHd1aabofkvS-9WrxeWVul7Axw_Kw';
    </script>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer', {
            // 关闭一些UI
            baseLayerPicker: false, //右上角的图层选择按钮
            animation: true,        //左下角的动画仪表盘
            infoBox: false,         //点击要素之后显示的信息
            geocoder: false,        //搜索框
            homeButton: false,      //home按钮
            sceneModePicker: true,  //模式切换按钮
            timeline: true,         //底部的时间轴
            fullscreenButton: false,//右下角的全屏按钮
            shouldAnimate: true,
            navigationHelpButton: false, //右上角的帮助按钮
        });


        function testLoc() {
            // 设定热力图的四至范围
            let bounds = {
                west: 116.13833844,
                east: 116.13956899,
                south: 37.43582929,
                north: 37.43706916
            };

            // 初始化热力图
            let heatMap = CesiumHeatmap.create(
                viewer, // your cesium viewer
                bounds, // bounds for heatmap layer
                {
                    // heatmap.js options go here
                    maxOpacity: 0.75
                }
            );

            // 设置一些随机的效果，这个可根据实际数据进行开发
            let data = [{
                "x": 116.1383442264,
                "y": 37.4360048372,
                "value": 76
            }, {
                "x": 116.1384363011,
                "y": 37.4360298848,
                "value": 63
            }, {
                "x": 116.138368102,
                "y": 37.4358360603,
                "value": 1
            }, {
                "x": 116.1385627739,
                "y": 37.4358799123,
                "value": 21
            }, {
                "x": 116.1385138501,
                "y": 37.4359327669,
                "value": 28
            }, {
                "x": 116.1385031219,
                "y": 37.4359730105,
                "value": 41
            }, {
                "x": 116.1384127393,
                "y": 37.435928255,
                "value": 75

            }, {
                "x": 116.1384551116,
                "y": 37.4359450132,
                "value": 3
            }, {
                "x": 116.1384927196,
                "y": 37.4359158649,
                "value": 45
            }, {
                "x": 116.1384938639,
                "y": 37.4358498311,
                "value": 45
            }, {
                "x": 116.1385183299,
                "y": 37.4360213794,
                "value": 93
            }, {
                "x": 116.1384007925,
                "y": 37.4359860133,
                "value": 46
            }, {
                "x": 116.1383604844,
                "y": 37.4358298672,
                "value": 54
            }, {
                "x": 116.13851025,
                "y": 37.4359098303,
                "value": 39
            }, {
                "x": 116.1383874733,
                "y": 37.4358511035,
                "value": 34
            }, {
                "x": 116.1384981796,
                "y": 37.4359355403,
                "value": 81
            }, {
                "x": 116.1384504107,
                "y": 37.4360332348,
                "value": 39
            }, {
                "x": 116.1385582664,
                "y": 37.4359788335,
                "value": 20
            }, {
                "x": 116.1383967364,
                "y": 37.4360581999,
                "value": 35
            }, {
                "x": 116.1383839615,
                "y": 37.436016316,
                "value": 47
            }, {
                "x": 116.1384082712,
                "y": 37.4358423338,
                "value": 36
            }, {
                "x": 116.1385092651,
                "y": 37.4358577623,
                "value": 69
            }, {
                "x": 116.138360356,
                "y": 37.436046789,
                "value": 90
            }, {
                "x": 116.138471893,
                "y": 37.4359184292,
                "value": 88
            }, {
                "x": 116.1385605689,
                "y": 37.4360271359,
                "value": 81
            }, {
                "x": 116.1383585714,
                "y": 37.4359362476,
                "value": 32
            }, {
                "x": 116.1384939114,
                "y": 37.4358844253,
                "value": 67
            }, {
                "x": 116.138466724,
                "y": 37.436019121,
                "value": 17
            }, {
                "x": 116.1385504355,
                "y": 37.4360614056,
                "value": 49
            }, {
                "x": 116.1383883832,
                "y": 37.4358733544,
                "value": 82
            }, {
                "x": 116.1385670669,
                "y": 37.4359650236,
                "value": 25
            }, {
                "x": 116.1383416534,
                "y": 37.4359310876,
                "value": 82
            }, {
                "x": 116.138525285,
                "y": 37.4359394661,
                "value": 66
            }, {
                "x": 116.1385487719,
                "y": 37.4360137656,
                "value": 73
            }, {
                "x": 116.1385496029,
                "y": 37.4359187277,
                "value": 73
            }, {
                "x": 116.1383989222,
                "y": 37.4358556562,
                "value": 61
            }, {
                "x": 116.1385499424,
                "y": 37.4359149305,
                "value": 67
            }, {
                "x": 116.138404523,
                "y": 37.4359563326,
                "value": 90
            }, {
                "x": 116.1383883675,
                "y": 37.4359794855,
                "value": 78
            }, {
                "x": 116.1383967187,
                "y": 37.435891185,
                "value": 15
            }, {
                "x": 116.1384610005,
                "y": 37.4359044797,
                "value": 15
            }, {
                "x": 116.1384688489,
                "y": 37.4360396127,
                "value": 91
            }, {
                "x": 116.1384431875,
                "y": 37.4360684409,
                "value": 8
            }, {
                "x": 116.1385411067,
                "y": 37.4360645847,
                "value": 42
            }, {
                "x": 116.1385237178,
                "y": 37.4358843181,
                "value": 31
            }, {
                "x": 116.1384406464,
                "y": 37.4360003831,
                "value": 51
            }, {
                "x": 116.1384679169,
                "y": 37.4359950456,
                "value": 96
            }, {
                "x": 116.1384194314,
                "y": 37.4358419739,
                "value": 22
            }, {
                "x": 116.1385049792,
                "y": 37.4359574813,
                "value": 44
            }, {
                "x": 116.1384097378,
                "y": 37.4358598672,
                "value": 82
            }, {
                "x": 116.1384993219,
                "y": 37.4360352975,
                "value": 84
            }, {
                "x": 116.1383640499,
                "y": 37.4359839518,
                "value": 81
            }];

            //设置最大最小值
            let valueMin = 0;
            let valueMax = 100;
            // 将数据添加到热力图
            heatMap.setWGS84Data(valueMin, valueMax, data);
            //定位到热力图的位置
            viewer.zoomTo(viewer.entities);
        }

        // 方式一
        // testLoc()

        // 请求本地数据
        var hdata = null
        async function addHeatmap() {
            // 请求本地数据
            var data = null
            await fetch(
                "./data/heatmap.json")
                .then(res =>
                    res.json()).then(d => {
                        data = d
                    })
            // random example data 添加数据 最小值，最大值，数据集 
            let valueMin = data[0].value;
            let valueMax = data[0].value;;
            let bounds = {
                west: data[0].x, south: data[0].y, east: data[0].x, north: data[0].y
            };

            // 初始化数据点范围		
            for (var i in data) {
                let _x = data[i].x;
                let _y = data[i].y;
                let _value = data[i].value;
                if (valueMin > _value) {
                    valueMin = _value;
                }
                if (valueMax < _value) {
                    valueMax = _value;
                }
                if (bounds.west > _x) {
                    bounds.west = _x;
                }
                if (bounds.east < _x) {
                    bounds.east = _x;
                }
                if (bounds.south > _y) {
                    bounds.south = _y;
                }
                if (bounds.north < _y) {
                    bounds.north = _y;
                }
            }

            // 初始化cesiumheatmap对象，传入相应的参数
            let heatMap = CesiumHeatmap.create(
                viewer, // 视图层
                bounds, // 矩形坐标
                { // heatmap相应参数
                    backgroundColor: "rgba(0,0,0,0)",
                    radius: 25,
                    maxOpacity: .5,
                    minOpacity: 0,
                    blur: .75
                }
            );
            // add data to heatmap
            heatMap.setWGS84Data(valueMin, valueMax, data);
            //定位到热力图的位置
            viewer.zoomTo(viewer.entities);
        }

        addHeatmap(hdata)

    </script>
</body>

</html>

Lucky@czj
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于vue3+vite+cesium 生成热力图CesiumHeatmap源码
11-22
在vue3+vite+cesium加载CesiumHeatmap生成热力图时不能直接使用， 需对源码进行重新封装及修改后方可在vue3+vite中调用； 源码已修改并验证可用；
Cesium 动态热力图 根据相机高度实时刷新热力图
04-10
Cesium 动态热力图 根据相机高度刷新热力图 预览:http://dongnan185.com:8083/videos/heatmap.mp4 启动 npm i npm run serve
Cesium二维热力图
最新发布
OctoberSun 的博客
04-29 528
cesium二维热力图，依赖于heatmap.js库
Cesium 使用自定义几何实现立体热力图
qq_34447899的博客
07-27 1824
cesium做热力图网上资料不少，大多是贴地的，立体热力图多数文章只有示例。这里我把代码贴出来，跟着一步一步写就能实现了。
Cesium 热力图（可直接使用）
资深三维GIS开发
03-24 6265
先阐释下原理，使用了heatmap.js这个库，这个库生成的热力图是用canvas绘制的，那么在Cesium中，我们只要将canvas转图片，当初材质贴到我们的对象上就行。当我们获取到外接正方体的四个顶点坐标后，通过当前经纬度相对于正方体左上角顶点的坐标位置，来计算热力图canvas中的相对位置，以此来将经纬度与热力图的像素坐标进行匹配。而我们三维中一般遇到的数据是：经纬度+经纬度对应的值 ，那么我们要做地图上的热力图就得做个经纬度到像素坐标的换算。上面的数字是我模拟的各个点位的值。
cesium中实现热力图
清风专栏
07-06 8091
实现效果： 原理：使用heatmap.js插件，先生成一个热力图，再在地图上创建一个盒子（如矩形），以纹理的形式把热力图填充到矩形中。 1、首先下载heatmap.js插件，自己随意写了一个热力图的方法，传入热力图所需参数max和data // 创建热力图 function createHeatMap(max, data) { // 创建元素 var heatDoc = document.createElement("div"); heatDoc.s...
【Cesium】热力图
Wangzx的博客
08-03 1372
热力图通过颜色分布，描述人群分布、密度和变化趋势等的一种地图表现方式。Cesium热力图的实现通过CesiumHeatmap.js插件来实现。
cesium 热力图的实现
七月❤的博客
07-29 4045
创建热力图要将引入heat.js 创建热力点heatpoints function createHeatMap() { const data = [ { longitude: 106.695302, latitude: 26.516131, count: 10 }, { longitude: 106.683302, latitude: 26.512131, count: 50 }, { longitude: 106.683502, lati.
Cesium 使用CesiumHeatmap.js生成热力图
QQhelphelp的博客
01-26 571
引入CesiumHeatmap.js.随机数据生成热力图。
Cesium系列：热力图
地理信息技术杂谈 博客，欢迎技术交流
01-14 2341
在Cesium上根据点，可以显示出热力图，在网上有开源的代码，具体的参考网址如下： https://github.com/danwild/CesiumHeatmap 使用方式如下： function testLoc(){ //设定热力图的四至范围 let bounds = { west: 116.13833844, east: 116.13956...
Cesium 热力图代码
09-07
Cesium 热力图代码
CirHeatmap:分组圆形热图功能-matlab开发
05-29
允许在圆形热图中绘制数据数组的功能。 可选地，可以通过使用单元阵列以及每个单元的每个组的数据阵列来实现空间上分离的组。 允许在文件交换上输入cmocean工具箱颜色图。 例子： 关闭所有清除 %%在线示例 DataX {1} = rand（100，10）; ％创建3组数据集DataX {2} = -rand（100，5）; DataX {3} = rand（100，7）; x = 1：1：100; 标签= []; 对于i = 1：numel（x） 标签{i} = ['Label'，num2str（x（i））]; ％为每列创建标签结尾 组= {“前”，“中”，“后”}； ％为每个组创建标签 [图] = CirHeatmap（DataX'，'GroupLabels'，Groups，'OuterLabels'，Labels，'CircType'，'half'，'InnerSpacerSi
CesiumHeatmap.js
10-12
CesiumHeatMap.js文件 cesium热力图显示插件 http://www.patrick-wied.at/static/heatmapjs/
vue+js:Heatmap 热力图实现，亲测可用
07-06
vue+js:Heatmap 热力图实现，亲测可用，依赖Heatmap.js插件，下载后添加引用即可。
Cesium热力图代码
09-07
Cesium热力图代码
cesium热力图在地图上展示
02-06
要实现Cesium热力图的展示，首先你需要具备基础的JavaScript编程能力以及对WebGL的理解。WebGL是Cesium底层依赖的图形渲染技术，它允许在浏览器中直接进行3D图形绘制。Cesium通过封装WebGL接口，提供了一套简单易用...
在Cesium中展示热力图heatmap
ztnhnr的专栏
08-25 4699
本文介绍如何在Cesium中展示热力图。目前比较常用的热力图插件是heatmap.js，实现的原理是使用heatmap.js生成热力图后，再将图贴到Cesium的相应位置。 准备工作： 1. 首先下载heatmap.js插件，官网地址：https://www.patrick-wied.at/static/heatmapjs。 2. 然后初始化Cesium，准备展示环境 主要步骤： 1. 确定热力图画布的宽高 2....
Cesium 数据可视之【热力图】
喜欢钻研前端和分享技术
09-22 461
Cesium 数据可视化之热力图
Cesium热力图实现
热门推荐
http://8.130.10.148:3000/digitaltwin/index.html
05-14 2万+
生成热力图的算法我是用的一个热力图插件 heatmap.js。 heatmap中热力图生成原理： heatmap中首先会根据输入的渐进色参数，在内部生成一个0-255色值的调色板。 var _getColorPalette = function(config) {   var gradientConfig = config.gradient || config.defa
cesium实现热力图
06-28
### 回答1： Cesium是一个开源的JavaScript库，用于构建3D地球上的高性能应用程序。基于Cesium，我们可以实现热力图的可视化展示。 热力图是一种地图上用颜色表示数据分布密度的可视化方式。我们可以根据数据的特点进行分类，并针对不同的分类进行不同的色彩表现。在Cesium中，实现热力图可以通过添加对应的图层进行。 首先，我们可以使用第三方库来生成热力图的数据集合，比如Heatmap.js。然后，我们需要根据这些数据来创建热力图的图层，并将其添加到Cesium的场景中。 在Cesium中，我们可以使用Primitive来创建粒子，然后调整它们的颜色、透明度等属性，使其形成热力图。这种方式需要手动配置多种属性，比较繁琐。 另外一种方式是使用Cesium的ImageryLayer来实现热力图。我们可以将生成的热力图图片作为纹理，然后将其添加到ImageryLayer上。由于使用了纹理，这种方式的渲染效率更高，也更容易实现动态更新。 总之，使用Cesium实现热力图需要先生成对应的数据集合，然后创建并添加热力图的图层，最后将其渲染到场景中以实现可视化展示。在具体实现中，我们可以使用Primitive或ImageryLayer等方式来达成这一目标。 ### 回答2： 热力图是一种通过不同位置点密度来表示数据分布的可视化手段，适用于各种领域的数据可视化需求。而cesium是一个强大的3D地图引擎，可以用于地理信息处理和可视化。 要在cesium中实现热力图，可以通过以下步骤： 1. 获取数据：热力图需要一定的数据支持，通常为经纬度数据或XYZ坐标数据。获取数据的方式可以是从文件、数据库中读取，也可以是通过网络API获取。 2. 数据处理：热力图的结果是根据数据点在地图上的分布得出的热力图密度值，因此需要对数据进行处理。数据处理可以包括数据清洗、去重、聚合、计算密度值等操作。 3. 渲染热力图：cesium提供了矢量和栅格两种方式绘制地图，热力图通常使用栅格方式绘制。在cesium中，可以使用HeatmapImageryProvider对象创建热力图图层，设置数据、数据范围、不透明度等，然后将图层添加到cesium场景中即可。 4. 交互功能：为了提高用户体验，可以为热力图加入交互功能，如鼠标悬停显示详细信息、点击查看数据、缩放、平移等操作。 总的来说，使用cesium来实现热力图有很大的优势，如支持3D地图、交互功能丰富、性能良好等，是一种强大的数据可视化工具。 ### 回答3： 热力图是一种非常有效的可视化工具，可以将数据以热力颜色的形式展示在地图上，用于显示某一区域内的数据密度变化情况。最常用的数据类型是经纬度坐标点，而Cesium是一个具有高度自由度的开源3D地图引擎，可以实现相对复杂的地图数据可视化效果。以下是用Cesium实现热力图的方法： 1. 将数据转换为热力图适用的格式，包括经纬度和权重值。一般的，需要对数据进行聚合或者密度计算，得到相应的点集，然后计算每个点的权重值。 2. 在Cesium中，可以使用CesiumHeatmap库进行热力图的展示。这个库依赖于heatcanvas.js和tinycolor.js两个库，可以通过CDN或者下载本地文件使用。 3. 从CesiumHeatmap库中导入HeatmapOverlay类，通过这个类的实例化，创建一个CesiumHeatmap的热力图对象。 4. 在创建热力图对象时，可以指定一些样式参数，比如热力方案、热力图层级、热力图不透明度等等。在创建后，可以使用setOptions()方法动态更新样式。 5. 调用热力图对象的addData()方法，将数据添加到热力图中。这个方法接受一个包含经纬度和权重值的数组作为参数。 6. 最后，使用热力图对象的show()方法显示热力图，使用hide()方法隐藏热力图。 总之，Cesium是一个非常强大的3D地图引擎，能够为数据可视化提供非常好的支持和帮助，使用CesiumHeatmap库可以快速地实现地图数据的热力图效果。同时，需要注意数据处理和可视化效果的调整，以达到最佳的展示效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值