manuelnas / cesiumheatmap Goto Github PK

Having a few issues where the data points are skewing around the globe. Just wondering if there is anyone using or maintaining it?

Uncaught ReferenceError: Cesium is not defined

I consider these lines very context-specific and not valid in general.
L305: Original value should be used, even if it is undefined or null.
L419: All 0 values will be considered as 1? Using non-processed original will do in general case.
L476: Not sure what to do here, remove || 0 from min-part or make something similar within max-part.

All those repeat in HeatmapImageryProvider.js.

Hello,

Please find my code below. I am using Cesium 1.103.

cesiumElem = new Cesium.Viewer('cesiumContainer');
let bounds = {
west: 147.13833844,
east: 147.13856899,
south: -41.43606916,
north: -41.43582929
};
let heatmapSetup = {
radius: 150,
maxOpacity: 0.8,
minOpacity: 0.2,
blur: 0.75
}
// init heatmap
let heatMap = CesiumHeatmap.create(cesiumElem, bounds, heatmapSetup);
// random example data
let data = [{ "x": 147.1383442264, "y": -41.4360048372, "value": 76 }, { "x": 147.1384363011, "y": -41.4360298848, "value": 63 }, { "x": 147.138368102, "y": -41.4358360603, "value": 1 }, { "x": 147.1385627739, "y": -41.4358799123, "value": 21 }, { "x": 147.1385138501, "y": -41.4359327669, "value": 28 }, { "x": 147.1385031219, "y": -41.4359730105, "value": 41 }, { "x": 147.1384127393, "y": -41.435928255, "value": 75 }, { "x": 147.1384551136, "y": -41.4359450132, "value": 3 }, { "x": 147.1384927196, "y": -41.4359158649, "value": 45 }, { "x": 147.1384938639, "y": -41.4358498311, "value": 45 }, { "x": 147.1385183299, "y": -41.4360213794, "value": 93 }, { "x": 147.1384007925, "y": -41.4359860133, "value": 46 }, { "x": 147.1383604844, "y": -41.4358298672, "value": 54 }, { "x": 147.13851025, "y": -41.4359098303, "value": 39 }, { "x": 147.1383874733, "y": -41.4358511035, "value": 34 }, { "x": 147.1384981796, "y": -41.4359355403, "value": 81 }, { "x": 147.1384504107, "y": -41.4360332348, "value": 39 }, { "x": 147.1385582664, "y": -41.4359788335, "value": 20 }, { "x": 147.1383967364, "y": -41.4360581999, "value": 35 }, { "x": 147.1383839615, "y": -41.436016316, "value": 47 }, { "x": 147.1384082712, "y": -41.4358423338, "value": 36 }, { "x": 147.1385092651, "y": -41.4358577623, "value": 69 }, { "x": 147.138360356, "y": -41.436046789, "value": 90 }, { "x": 147.138471893, "y": -41.4359184292, "value": 88 }, { "x": 147.1385605689, "y": -41.4360271359, "value": 81 }, { "x": 147.1383585714, "y": -41.4359362476, "value": 32 }, { "x": 147.1384939114, "y": -41.4358844253, "value": 67 }, { "x": 147.138466724, "y": -41.436019121, "value": 17 }, { "x": 147.1385504355, "y": -41.4360614056, "value": 49 }, { "x": 147.1383883832, "y": -41.4358733544, "value": 82 }, { "x": 147.1385670669, "y": -41.4359650236, "value": 25 }, { "x": 147.1383416534, "y": -41.4359310876, "value": 82 }, { "x": 147.138525285, "y": -41.4359394661, "value": 66 }, { "x": 147.1385487719, "y": -41.4360137656, "value": 73 }, { "x": 147.1385496029, "y": -41.4359187277, "value": 73 }, { "x": 147.1383989222, "y": -41.4358556562, "value": 61 }, { "x": 147.1385499424, "y": -41.4359149305, "value": 67 }, { "x": 147.138404523, "y": -41.4359563326, "value": 90 }, { "x": 147.1383883675, "y": -41.4359794855, "value": 78 }, { "x": 147.1383967187, "y": -41.435891185, "value": 15 }, { "x": 147.1384610005, "y": -41.4359044797, "value": 15 }, { "x": 147.1384688489, "y": -41.4360396127, "value": 91 }, { "x": 147.1384431875, "y": -41.4360684409, "value": 8 }, { "x": 147.1385411067, "y": -41.4360645847, "value": 42 }, { "x": 147.1385237178, "y": -41.4358843181, "value": 31 }, { "x": 147.1384406464, "y": -41.4360003831, "value": 51 }, { "x": 147.1384679169, "y": -41.4359950456, "value": 96 }, { "x": 147.1384194314, "y": -41.4358419739, "value": 22 }, { "x": 147.1385049792, "y": -41.4359574813, "value": 44 }, { "x": 147.1384097378, "y": -41.4358598672, "value": 82 }, { "x": 147.1384993219, "y": -41.4360352975, "value": 84 }, { "x": 147.1383640499, "y": -41.4359839518, "value": 81 }];
let valueMin = 0;
let valueMax = 100;
// add data to heatmap
heatMap.setWGS84Data(valueMin, valueMax, data);

The heatmap doesn't showup on cesium. Am I missing some steps?

I have used the following js files
CesiumHeatmap.js
heatmap.js.

Thanks
Libish

I get a flash when i change the data .

我使用CesiumHeatmap.js，出现热力图了。但是宽度明显不对，请教一下大神！

let valueMin = 0;
			let valueMax = 100;
			let bounds = {
			    west: 90,
			    east: 110,
			    south: 25,
			    north: 50
			};
			window.viewer.camera.setView({
                destination : Cesium.Rectangle.fromDegrees(bounds.west, bounds.south, bounds.east, bounds.north)
            });
			let data = this.getRandomData(1000, bounds, 0, 100);
			let heatMap = CesiumHeatmap.create(
				window.viewer, // your cesium viewer
				bounds, // bounds for heatmap layer
				{
					// xField: 'x',
					// yField: 'y',
					// valueField: 'value',
					radius: 50,
					// maxOpacity: 1,
					// minOpacity: 1,
					gradient: {
						'0.9': '#ffffff',
					    '0.7': '#ffff00',
					    '0.5': '#00ff00',
					    '0.2': '#0000ff'
					}
				}
			);
			heatMap.setWGS84Data(valueMin, valueMax, data);

getRandomData(len, bounds, valueMin, valueMax){
				let lngDist = bounds.east - bounds.west;
				let latDist = bounds.north - bounds.south;
				let valueDist = valueMax - valueMin;
				let data = [];
				for(let i=0; i<len; i++){
					let lng = bounds.east + Math.random() * lngDist;
					let lat = bounds.south + Math.random() * latDist;
					let value = valueMin + Math.random() * valueDist;
					data.push({
						x: lng,
						y: lat,
						value: value
					});
				}
				return data;
			}

报错TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

Please add a license file to this work

啊啊啊啊啊 有人解决了吗

Data points show up in expected locations when I set useEntitiesIfAvailable to false, but not when this option is set to true.

These locations should be around NY, but instead show up around Cuba when entity-based image is used. May have something to do with my bounds that overlay the entire globe.

Here is my example that produces inaccurate locations: https://gist.github.com/cdbierl/6635d33e7e04cea4ce7c3a4cbf14cb6a

The instructions to create a new HeatmapImageryProvider are incorrect in the readme. How do you correctly import the file? There is no reference to the file in cesium-heatmap/package.json.

Got problem when using CesiumHeatmap.create() in my cesium framework
" ReferenceError: h337 is not defined"

I got problems when adding the HeatmapImageryProvider class to the Cesium framework,

I do not undrstand “Add the class (define - return HeatmapImageryProvider) to Cesium.js after the definition of define and before the definition of Cesium.” How to do this ?