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

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

热力图容器

我们知道，热力图需要用有一个容器节点来存放它生成的图片：<div class="div-heatMap"></div>

而其中容器需要长宽两个属性：

热力数据坐标

而heatmap接收我们的热力点数据时，需要三个基本属性：x坐标，y坐标，value。

x坐标指的是图片左上角，从左向右的距离。

y坐标指的是图片左上角，从上到下的距离。
（也就是说，热力图是画在第四象限的，这是个埋坑点）

vaule当然指的是热力值了。

以下代码为模拟创建热力点：

java 复制代码

// 根据热力图图片范围，生成随机热力点和强度值
       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上：

java 复制代码

//添加人口分布热力图
   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热力值。