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

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

热力图容器

我们知道,热力图需要用有一个容器节点来存放它生成的图片:


而其中容器需要长宽两个属性:关于使用 heatmap.js创建热力图并应用在cesuim上的坐标定位问题_第1张图片

热力数据坐标

而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热力值。

你可能感兴趣的:(javascript,开发语言,heatmap.js,热力图,cesium)