Ohne weitere Umschweife werde ich nicht näher auf die Verwendung von heatmap.js eingehen. Dieser Artikel löst hauptsächlich das Problem der Positionierung der thermischen Punktkoordinaten auf Cesuim.
Heatmap-Container
Wir wissen, dass eine Heatmap einen Containerknoten benötigt, um die von ihr generierten Bilder zu speichern: <div class="div-heatMap"></div>
und der Container benötigt zwei Attribute: Länge und Breite:
Koordinaten der thermischen Daten
Wenn Heatmap unsere thermischen Punktdaten empfängt, sind drei grundlegende Attribute erforderlich: X-Koordinate, Y-Koordinate und Wert.
Die x-Koordinate bezieht sich auf die obere linke Ecke des Bildes, den Abstand von links nach rechts.
Die Y-Koordinate bezieht sich auf die obere linke Ecke des Bildes, also den Abstand von oben nach unten.
(Mit anderen Worten, die Wärmekarte wird im vierten Quadranten gezeichnet, was eine Falle darstellt)
Vaule bezieht sich natürlich auf den Wärmewert.
Der folgende Code erstellt Hotspots für die Simulation:
// 根据热力图图片范围，生成随机热力点和强度值
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
}
Tatsächlich besteht die Möglichkeit, die Breiten- und Längenkoordinaten dem xy-Quadranten der Wärmekarte zuzuordnen, darin, die proportionale Korrespondenz zu verwenden
. Beispielsweise haben wir thermische Punktdaten bei 105 östlicher Länge und 45 nördlicher Breite. Dann bestimmen wir zunächst den maximalen Abdeckungslängen- und Breitengrad unserer Wärmekarte (zumindest müssen Sie wissen, aus welcher Provinz, Stadt und welchem Landkreis Ihre Wärmekarte stammt, es kann keine globale Abdeckung sein), östlicher Längengrad 100–110, nördlicher Breitengrad 40-50.
Das bedeutet, dass der Längengrad unseres thermischen Punktes (105-100)/(110-100) beträgt, was der proportionalen Position von 0,5 entspricht . Das Gleiche gilt für den Breitengrad.
Nachdem wir die proportionale Position unserer Koordinaten erhalten haben, können wir die Proportionen auf den Heatmap-Container (Länge 400 und Breite 200) anwenden, um die spezifische Länge xy zu erhalten:
x=0,5 * 200, y=400 – 0,5 * 400 (nicht). vergessen Sie, dass die y-Achse die negative Achse ist)
An diesem Punkt haben wir die Zuordnung des Längen- und Breitengrads Ihres thermischen Punkts zur xy-Achsen-Koordinatenposition der Wärmekarte erreicht . Als nächstes erfahren Sie, wie Sie das von der Heatmap generierte Diagramm auf Cesuim überlagern :
//添加人口分布热力图
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);
}
Als nächstes geht es darum, wie man die echten Wärmedaten im Internet nutzt (es gibt große Fallstricke beim Kauf, also bleiben Sie dran...)
Datenerfassung: https://hub.worldpop.org/geodata/summary?id=39793 , gibt es eine 400-MB-CSV-Tabellendatei, die den xy-Längen- und Breitengrad sowie den z-Wärmewert aufzeichnet.