关于使用 heatmap.js创建热力图并应用在cesuim上的坐标定位问题

news2025/2/8 4:46:59

废话少说,heatmap.js的用法我不在赘述,此文主要解决其热力点坐标定位在cesuim上的问题。

热力图容器

我们知道,热力图需要用有一个容器节点来存放它生成的图片:<div class="div-heatMap"></div>
而其中容器需要长宽两个属性:在这里插入图片描述

热力数据坐标

而heatmap接收我们的热力点数据时,需要三个基本属性:x坐标,y坐标,value。
x坐标指的是图片左上角,从左向右的距离。
y坐标指的是图片左上角,从上到下的距离。
(也就是说,热力图是画在第四象限的,这是个埋坑点)
vaule当然指的是热力值了。
以下代码为模拟创建热力点:

// 根据热力图图片范围,生成随机热力点和强度值
       function initData() {
            let points = [];//保存热力数据点
            // lonx 经度坐标
            // laty 纬度坐标
            // radom 自定义扩张范围
            // times 自定义扩张次数
            // values 热力值
            function setPoint(lonx,laty,radom,times,values) {
                for (let i = 0; i < times; i++) {
                    let lon = lonx + Math.random() * radom;
                    let lat = laty + Math.random() * radom;
                    let value = values
                    // let value = Math.floor(Math.random() * max);


                    //此处xy坐标需要注意,这里的y坐标时是由上往下走的
                    let point = {
                        x: Math.floor((lon - lonMin) / (lonMax - lonMin) * width),
                        y: Math.floor(height - (lat - latMin) / (latMax - latMin) * height),
                        value: value
                        };
                    points.push(point);
                }
            }


            // lon东经 lat北纬
           setPoint(117.0,36.65,0.1,3,65)//济南
           setPoint(120.33,36.07,0.08,3,65)//青岛
           setPoint(118.05,36.78,0.08,2,40)//淄博
           setPoint(117.57,34.86,0.08,2,40)//枣庄
           setPoint(118.49,37.46,0.08,2,40)//东营
           setPoint(121.39,37.52,0.08,2,40)//烟台
           setPoint(119.1,36.62,0.06,2,30)//潍坊
           setPoint(116.59,35.38,0.06,2,30)//济宁
           setPoint(117.13,36.18,0.06,2,30)//泰安
           setPoint(122.1,37.5,0.06,2,30)//威海
           setPoint(119.46,35.42,0.06,2,30)//日照
           setPoint(118.03,37.36,0.06,2,30)//滨州
           setPoint(116.29,37.45,0.06,2,30)//德州
           setPoint(115.97,36.45,0.06,2,30)//聊城
           setPoint(118.35,35.05,0.06,2,30)//临沂
           setPoint(115.43,35.24,0.06,2,30)//临沂
           setPoint(117.67,36.19,0.01,1,30)//莱芜
           return points
       }

其实将经纬坐标 对应到 热力图xy象限的方法就是:使用比例对应
比如,我们有一个热力点数据,在东经105,北纬45 。那我们首先确定我们的热力图的最大覆盖经纬度(起码你得知道你的热力图是哪个省市县的吧,总不能是全球覆盖吧),东经100-110,北纬40-50。
那就意味着我们的热力点,经度在(105-100)/(110-100),也就是0.5的比例位置。纬度同理。
拿到我们坐标的比例位置,就可将该比例应用到热力图容器(长400 宽200)中,得到具体的长度xy:
x=0.5 * 200 ,y=400 - 0.5 * 400 (别忘了y轴是负轴)

至此,我们就实现了 由 你的热力点经纬度 对应到 热力图的xy轴坐标位置。接下来,是如何将heatmap生成的图覆盖到cesuim上

//添加人口分布热力图
   function addPopulationDensity() {
       let Cesium = ReadyObj.value.Cesium//请你忽略该行,用自己的Cesium 对象
       let viewer = ReadyObj.value.viewer//请你忽略该行,用自己的viewer 对象


       let width = 600;
       let height = 400;
       let max = 100;
       let latMin = 34.22;
       let latMax = 38.23;
       let lonMin = 114.19;
       let lonMax = 122.43;

       // 根据热力图图片范围,生成随机热力点和强度值
       function initData() {
            let points = [];//热力数据点
            // lonx 经度坐标
            // laty 纬度坐标
            // radom 自定义扩张范围
            // times 自定义扩张次数
            // values 热力值
            function setPoint(lonx,laty,radom,times,values) {
                for (let i = 0; i < times; i++) {
                    let lon = lonx + Math.random() * radom;
                    let lat = laty + Math.random() * radom;
                    let value = values
                    // let value = Math.floor(Math.random() * max);


                    //此处xy坐标需要注意,这里的y坐标时是往下走的
                    let point = {
                        x: Math.floor((lon - lonMin) / (lonMax - lonMin) * width),
                        y: Math.floor(height - (lat - latMin) / (latMax - latMin) * height),
                        value: value
                        };
                    points.push(point);
                }
            }


            // lon东经 lat北纬
           setPoint(117.0,36.65,0.1,3,65)//济南
           setPoint(120.33,36.07,0.08,3,65)//青岛
           setPoint(118.05,36.78,0.08,2,40)//淄博
           setPoint(117.57,34.86,0.08,2,40)//枣庄
           setPoint(118.49,37.46,0.08,2,40)//东营
           setPoint(121.39,37.52,0.08,2,40)//烟台
           setPoint(119.1,36.62,0.06,2,30)//潍坊
           setPoint(116.59,35.38,0.06,2,30)//济宁
           setPoint(117.13,36.18,0.06,2,30)//泰安
           setPoint(122.1,37.5,0.06,2,30)//威海
           setPoint(119.46,35.42,0.06,2,30)//日照
           setPoint(118.03,37.36,0.06,2,30)//滨州
           setPoint(116.29,37.45,0.06,2,30)//德州
           setPoint(115.97,36.45,0.06,2,30)//聊城
           setPoint(118.35,35.05,0.06,2,30)//临沂
           setPoint(115.43,35.24,0.06,2,30)//临沂
           setPoint(117.67,36.19,0.01,1,30)//莱芜
           return points
       }



       // 创建热力图
       let heatmapInstance = h337.create({
           container: document.querySelector('.div-heatMap')
       });

       let randomData = {
           max: max,
           data: initData()
       };
       let nuConfig = {
               radius: 1,
               maxOpacity: .5,
               minOpacity: 0,
               blur: .75
           };
           heatmapInstance.configure(nuConfig);
           heatmapInstance.setData(randomData);
           console.log(heatmapInstance.getData());
           // 将热力图添加到球体上(生成的热力图canvas元素类名为heatmap-canvas)
           let canvas = document.getElementsByClassName('heatmap-canvas');

           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);
   }

接下来,是如何使用网上的真实热力数据(买有大坑,敬请期待。。。)
数据获取:https://hub.worldpop.org/geodata/summary?id=39793 ,有个400mb的csv表格文件,记录着x y 经纬度和z热力值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/865023.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【ElasticSearch入门】

目录 1.ElasticSearch的简介 2.用数据库实现搜素的功能 3.ES的核心概念 3.1 NRT(Near Realtime)近实时 3.2 cluster集群&#xff0c;ES是一个分布式的系统 3.3 Node节点&#xff0c;就是集群中的一台服务器 3.4 index 索引&#xff08;索引库&#xff09; 3.5 type类型 3.6 doc…

360安全卫士右下角广告弹窗太多怎么彻底关闭?

360安全卫士右下角广告弹窗太多怎么彻底关闭&#xff1f; 1、卸载360安全卫士&#xff0c;选择继续卸载&#xff0c;并点击下一步&#xff1b; 2、选择广告弹窗太多&#xff0c;并点击下一步&#xff1b; 3、然后被告知升级极速版永久去广告&#xff0c;可以点击一键去广告。 …

全网超全,接口自动化测试-动态数据生成/替换数据(实战应用)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 接口自动化过程中…

拂袖一挥,zipfile秒列zip包内容

使用wxpython列出文件夹中的zip文件及内容 最近在做一个文件管理的小工具,需要列出选择的文件夹下的所有zip压缩文件,并在点击某个zip文件时能够显示其中的内容。为此我使用了wxpython来实现这个功能。 1. 导入需要的模块 首先导入程序需要的模块: import wx import os imp…

【C++面向对象】--- 继承 的奥秘(上篇)

个人主页&#xff1a;平行线也会相交&#x1f4aa; 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 平行线也会相交 原创 收录于专栏【C之路】&#x1f48c; 本专栏旨在记录C的学习路线&#xff0c;望对大家有所帮助&#x1f647;‍ 希望我们一起努力、成长&…

git强推覆盖其他项目分支

git强推分支&#xff0c;覆盖其他分支&#xff1b; 操作&#xff1a; 下载branch-1.3代码&#xff1b; $ git clone gitlabgitlab.zte.net:zte-dba-service/branch.git $ git remote add origin2 gitlabgitlab.zte.net:zte-service/branch.git $ git push origin2 master -f注…

UE 5 GAS 在项目中处理AttributeSet相关

这一篇文章是个人的实战经验记录&#xff0c;如果对基础性的内容不了解的&#xff0c;可以看我前面一篇文章对基础的概念以及内容的讲解。 设置AttributeSet 使用GAS之前&#xff0c;首先需要设置参数集AS&#xff0c;这个是用于同步的一些参数&#xff0c;至于如何设置GAS&a…

腾讯云Linux服务器创建、使用和配置的教程

腾讯云Linux服务器创建&#xff0c;先注册腾讯云账号&#xff0c;购买云服务器配置然后选择Linux镜像操作系统&#xff0c;包括云服务器地域、CVM实例、公网IP等配置&#xff0c;然后远程链接到腾讯云服务器快速配置使用教程&#xff1a; 目录 腾讯云Linux服务器创建 创建Li…

远程控制医疗行业应用解析:如何满足医院合规需求?

远程控制医疗行业应用解析&#xff1a;如何满足医院合规需求&#xff1f; 作为一个起源于IT行业的技术&#xff0c;以远程桌面为基础的远程控制技术目前在医疗领域也已经有了比较广阔的应用前景&#xff0c;尤其是在医疗数字化系统/设备的远程运维场景&#xff0c;已经有了一些…

Spring Profile与PropertyPlaceholderConfigurer实现项目多环境配置切换

最近考虑项目在不同环境下配置的切换&#xff0c;使用profile注解搭配PropertyPlaceholderConfigurer实现对配置文件的切换&#xff0c;简单写了个demo记录下实现。 基本知识介绍 Profile Profile通过对bean进行修饰&#xff0c;来限定spring在bean管理时的初始化情况&#…

K8S调度

K8S调度 一、List-Watch 机制 controller-manager、scheduler、kubelet 通过 List-Watch 机制监听 apiserver 发出的事件&#xff0c;apiserver 通过 List-Watch 机制监听 etcd 发出的事件1.scheduler 的调度策略 预选策略/预算策略&#xff1a;通过调度算法过滤掉不满足条件…

CH344Q/L USB转四串口芯片资料下载(合集)

1、产品手册 CH344DS1.PDF - 南京沁恒微电子股份有限公司CH344技术手册&#xff0c;USB转4串口芯片&#xff0c;支持最高6M波特率与硬件流控&#xff0c;支持USB配置功能&#xff0c;提供RS485方向控制与GPIO等信号引脚&#xff0c;可实现PC等平台扩展多串口或多个串口设备升级…

多维时序 | MATLAB实现ZOA-CNN-BiGRU-Attention多变量时间序列预测

多维时序 | MATLAB实现ZOA-CNN-BiGRU-Attention多变量时间序列预测 目录 多维时序 | MATLAB实现ZOA-CNN-BiGRU-Attention多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.Matlab基于ZOA-CNN-BiGRU-Attention斑马优化卷积双向门控循环单元网络…

ARTS 挑战打卡的第7天 --- Ubuntu中的WindTerm如何设置成中文,并且关闭shell中Tab键声音(Tips)

前言 &#xff08;1&#xff09;Windterm是一个非常优秀的终端神器。关于他的下载我就不多说了&#xff0c;网上很多。今天我就分享一个国内目前没有找到的这方面的资料——Ubuntu中的WindTerm如何设置成中文&#xff0c;并且关闭shell中Tab键声音。 将WindTerm设置成中文 &…

Markdown的简单语法学习

简单掌握Markdown语法&#xff1a; 1、标题&#xff1a; 如果一段文字被定义为标题&#xff0c;只要在这段文字前面加#即可。 # 一级标题 ## 二级标题 ### 三级标题 2、列表&#xff1a; 列表分有序列表和无序列表&#xff1a; ###### 无序列表 * 1 * 2 * 3- 1 - 2 - 3#####…

echarts饼图例子

效果 代码&#xff1a;index。vue <div class"riskStatisticsBox"><div class"titleBox">风险统计</div><div class"contentBox"><div class"selectGroupBox"><div class"categoryBox">…

Vc - Qt - 绘制窗口背景色

要在Qt中绘制一个背景颜色&#xff0c;你可以使用Qt的绘图功能来完成。下面是一种简单的方法&#xff1a; 步骤1&#xff1a;在你想要绘制背景颜色的QWidget&#xff08;例如QMainWindow或QDialog&#xff09;的派生类中&#xff0c;重写 它的paintEvent函数。步骤2&#xff1a…

模拟信号和数字信号的转换

此文章介绍的模拟信号与数字信号转换相关的知识有如下&#xff1a; 通信原理的PCM脉冲编码调制 数字电子技术的A/D与D/A 以及stm32的ADC与DAC 模拟信号是指-----时间和数值均连续变化的电信号&#xff0c;如正弦波、三角波等。 数字信号是指-----在时间上和数值上均是离散的…

antv l7每次刷新无法加载iconFont

如图&#xff0c;只渲染出了文本&#xff0c;未渲染出iconFont 但是如果我跳转到其他页面再跳转回来(未经过刷新时)&#xff0c;可以展示出iconFont 解决&#xff1a; 查看官方源码后 找到了iconfont.tsx文件 可以看到多了一步font loaded&#xff0c; 放到项目中后再次测试&…

【01】基础知识:typescript安装及使用,开发工具vscode配置

一、typescript 了解 typeScript 是由微软开发的一款开源的编程语言。 typeScript 是 javascript 的超级&#xff0c;遵循最新的 es6、es5规范。 typeScript 扩展了 javaScript 的语法。 typeScript 更像后端 java、C# 这样的面向对象语言&#xff0c;可以让 js 开发大型企…