Comb the cesium loading heat map

The plug-in

Heatmap: heatmap.jsCopy the code

Code can be used directly oh!!

import HeatmapJS from "heatmap.js";
Copy the code

Pointslist is your information data

Viewer is your instance of cesium

MapNormalLongitude, mapnormallatiitude

heatMap = (pointslist, viewer, mapNormalLongitude, mapNormalLatitude) => { if (! mapNormalLongitude || ! Mapnormallatize) return message. Error (" cannot be loaded without longitude and latitude ", mapNormalLongitude, mapnormallatiitude); Return new Promise((res, rej) => {let heatMap = heatmapjs. create({gradient: {"0.5": "blue", "0.8": "red", "0.95": "White ", "0.6": "yellow",}, radius: 10, opacity: 0.8, Container: document.querySelector("#cesiumMap"),}); var width = document.querySelector("#cesiumMap").clientWidth; var height = document.querySelector("#cesiumMap").clientHeight; var max = 100; Var latMin = 28.364807; var latMin = 28.364807; Var latMax = 40.251095; Var lonMin = 94.389228; Var lonMax = 108.666357; Var len = 200; var len = 200; While (len--) {var val = math.floor (math.random ()*100); max = Math.max(max, val); var point = { x: Math.floor(Math.random()*width), y: Math.floor(Math.random()*height), value: val }; points.push(point); } this.viewer.entities.add({ name: "heatmap", description: "heatmap", rectangle: { coordinates: Rectangle. FromDegrees (+mapNormalLongitude, + mapnormallatiitude, +mapNormalLongitude + 5.0, + mapnormallatiitude + 5.0,), material: new ImageMaterialProperty({ image: heatMap._renderer.canvas, transparent: true, } as any), }, } as any); try { heatMap.setData({ data: points, }); // message.info(" Load successful "); res(true); } catch (error) {messg.info (" failed to load "); rej(false); }}); }Copy the code

What I don’t know is that the heatmap.js data seems to only load x, Y, and Z, whereas my data is latitude and longitude

I spent the

In the end I compromised and used amap to load the heat map