cesiumheatmap3d
v0.2.1
Published
A library for creating 3D heatmap(using heatmap.js) in Cesium.
Downloads
2
Readme
A library for creating 3D heatmap(using heatmap.js) in Cesium
Installation
$ npm install cesiumheatmap3d
Usage
import CesiumHeatMap3D from 'cesiumheatmap3d';
const viewer = new Cesium.Viewer(cesiumContainer, viewerOption);
const bounds = [120, 20, 130, 40];
/**
* create a CesiumHeatMap3D instance
* @param {Cesium.Viewer} viewer The Viewer of Cesium.
* @param {Array<number>} bounds [west, south, east, north]
* @param {object} heatmapOptions Part of the option of heatmap.js are now available: gradient, radius, opacity, maxOpacity, minOpacity and blur are now available.
* @param {object} heatmap3DOptions The options which are used to generate the 3D heatmap. Height and heightGradient are now available.
*/
const heatmapInstance = new CesiumHeatMap3D(
viewer,
bounds,
{
blur: 0.8,
radius: 35
},
{
baseHeight: 100,
heightGradient: 100
}
);
let points = [];
for (let i = 0; i < 1000; i++) {
let lon = Math.random() * (bounds[2] - bounds[0]) + bounds[0];
let lat = Math.random() * (bounds[3] - bounds[1]) + bounds[1];
let value = Math.random() * 100;
points.push({ lon, lat, value });
}
/**
* Initializes a heatmap instance with a dataset
* @param {object} data An array of objects, where each item contains lon, lat, value and radius(optional).
* @param {number} min Min value of the heatmap.
* @param {number} max Max value of the heatmap.
*/
heatmapInstance.setData(points, 0, 100)
/**
* Remove the 3D heatmap in Cesium
*/
heatmapInstance.removeDate()
To be continued...