heatmap.js の使用方法については説明しませんが、この記事では主に cesuim 上でサーマル ポイントの座標を配置する問題を解決します。
ヒートマップコンテナ
ヒート マップには、生成した画像を保存するコンテナ ノードが必要であることがわかっています。<div class="div-heatMap"></div>
また、コンテナには長さと幅という 2 つの属性が必要です。
熱データ座標
ヒートマップがサーマル ポイント データを受け取るときは、x 座標、y 座標、値という 3 つの基本属性が必要です。
x 座標は、画像の左上隅、つまり左から右までの距離を指します。
y 座標は、画像の左上隅、つまり上から下までの距離を指します。
(つまり、ヒート マップは第 4 象限で描画されるのですが、これが落とし穴です)
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 軸座標位置にマッピングすることができました。次に、ヒートマップによって生成されたグラフを 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 テーブル ファイル。xy 経度、緯度、z 熱値を記録します。