废话少说，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热力值。