Heatmap.js v1.0 to V2.0, a detailed summary:)

Some time ago, the project to develop heat force diagram plug-in, study heatmap.js, intends to summarize.

This article mainly has the following parts:

1. Partial Source understanding
2. How to migrate to v2.0
3. v2.0 Official document Translation

For heatmap.js Introduction, please see here: Http://www.oschina.net/p/heatmap-js

At present, for the development of heat force, Baidu, high-German development platform used are the JS Open Source Library. Of course, now there are our company: P

Baidu Example: Http://developer.baidu.com/map/jsdemo.htm#c1_15

German example: http://lbs.amap.com/api/javascript-api/example/layers/heatmap/

PS: I can only be the primary level of JS, just started to write the heat of the plug-in when it is really confused. Make full use of search engine, in the open Source Library of Baidu found this (sample source file), finally a bit of a prospect. Replaced the map instance object, the remaining difficulty is the layer processing and pixel coordinate conversion, delete the change, also made the plug-in version 1.0. v2.0 version of the content compared with v1.0 still have a lot of different, after a large half-day sleepless effort, finally migrated to 2.0 (accurate said is v2.0.5), also is worthy of forget to eat lunch.

Partial Source Understandingparameter Max

After reading and testing the source code, the max parameter in the data collection represents the maximum value of the thermal point weight for the calculation of the thermal color gradient. The essence is the transparency of the fill color inside the thermal region.

Use the calculation to Max:

(value-min)/(max-min)/    *  where        value is the weight of a thermal point;        Max is the maximum weight, the default is 1;        Min is the minimum weight, the default is ten; */

When the thermal point weight is greater than or equal to Max, the thermal point color reaches the maximum gradient level.

When the thermal point weight is much smaller than Max, the heat point color is lighter and even shows up.

Therefore, Max's setting value will affect the effect of the Heat force diagram, it is necessary to balance the thermal point weights and set the max value rationally. (--why doesn't it show up?) According to the preceding calculation, the calculated result is less than 0.01 and cannot be identified. See Canvas's Globalalpha property)AddData Method

The parameter of the method can be an object of a single point, or it can be a group of numbers. However, in the method of processing is, on the basis of the original image of each additional point is rendered once. If the parameter type is an array, the method is called recursively, incremented and rendered one at a point.

If the data is a small amount of dynamic increase, it can show the thermal state in real time. When the big data volume is updated frequently, the speculation will have a little effect on performance, which needs to be tested and verified.

Another point to note is that the weight of the new thermal point has an effect on the value of Max. In the source code, the weights of the same coordinate point are accumulated and then set to the Store._max property, which changes the standard of the color gradient and affects the consistency of the heat map.

This question was also raised on GitHub [how does the change ' max ' be adding point with addData?] As described in the positive question, to ensure that the criteria for color gradients remain consistent before and after adding thermal points, you need to call the Setdatamax method to reset the max value, which is the only way to do so.

Removedata Method

I am using the heatmap v2.0.5 version, where the Removedata method is still empty, the specific processing has not been implemented. So I wrote a method in the plugin myself.

Using two cycles, compare the existing data with the data to be deleted, keep only those data that are not the same latitude and longitude, and the data with a weight difference greater than 0, and then empty the canvas and call SetData to re-assign the drawing.

Method A little low, ask for guidance ~ ~

Internal data storageThe Heatmap.js internally stores the data in the Store._data attribute. Its data format is a two-dimensional array [x: [Y:value]],x, y is the pixel coordinate of the thermal point, and value is the weight of the thermal point. For example:

data = [460: [280:15, 255:6], 490: [251:8], 416: [289:9]]

The length of the array is variable, and the outermost length is the largest value in all x values plus 1, such as Data.length = 491.

The length of the array of y values corresponding to each x element is the largest value of all Y values in the x-coordinate, plus 1, such as Data[460].length = 281. two ways to process data:

The _organisedata method stores the external incoming data into the store._data and accumulates the weights. If this method is called by SetData, it is rendered according to Max in the passed-in parameter, and if it is called by the AddData method, it is rendered as a cumulative weight.

There is no special processing inside the _unorganizedata method, except that the internal data stored in a two-dimensional array is converted to an external data format object, which is called by the GetData method and returns thermal data.

how to migrate to v2.0

The following is from here: https://github.com/pa7/heatmap.js/blob/master/docs/how-to-migrate.md

1. Element-Container

As a container for heat map canvas, the heatmap author thinks that "container" can describe this configuration parameter more vividly, so the original element property is now called container.

var cfg = {   "container": domelement};

2. Opacity-maxopacity

The transparency property opacity in Heatmap.js v2.0 affects the transparency of the global (it sets the transparency for all thermal points and also prevents the smoothing of the color gradient). If you want to make the color gradient of the hotspot data smooth, now you need to use the Config attribute maxopacity.

var cfg = {   "maxopacity":. 8}

In addition, the opacity, maxopacity, and Minopacity properties are now in the range of [0,1] numbers.

3. Filling data

Heatmap.js's authors decided to reduce the API to make it a more flat structure. To add data you do not have to access the HEATMAP data store, but instead add new data directly to the Heatmap instance. And also get rid of the duplicate naming. (Heatmap.store.addDataPoint, Heatmap.adddata, Heatmap.store.setDataSet, Heatmap.setdata).

var datapoint = {x:100, y:100, Value:10 }; heatmap.adddata (Datapoint); Heatmap.setdata ({     ten,     data: [Datapoint]});

At the same time, you may notice that the weight property of the thermal point, count, is now called value by default, and you can set count to the value of the Valuefield property for smooth migration.

var datapoint = {x:100, y:100, Count:10 }; var heatmap = h337.create ({   container:domelement,   //  ...   Valuefield: ' Count '}); Heatmap.adddata (datapoint); Heatmap.setdata ({   ten,   data: [Datapoint] });

4. Summary

Old Configuration instance:

var cfg = {     "element": domelement,    "opacity":var heatmap = h337.create (cfg); Heatmap.store.setDataSet (data);

becomes a new configuration:

var cfg = {   "container": DomElement,   "maxopacity":. 8}var Heatmap = h337.create (cfg); heatmap.setdata (data);

I add several:

1. Attribute names that support custom hotspot data

If your thermal data is like this:

{"LNG": 123.456789, "lat": 987.654321, "Count": 10}

In order to set up the data inside the heatmap, you need to convert the data into this:

{"X": 123.456789, "y": 987.654321, "value": 10}

Now, the configuration parameter adds three properties Xfield, Yfield, Valuefield, respectively, corresponding to the x-coordinate, y-coordinate, and weight-value property names. Setting these three attributes does not require the conversion of the above data format. For example: xfield= "LNG"; yfield= "Lat"; Valuefield= "Count;

2. Clear the canvas

What I have done before is:

Heatmap.clear ();

Now it is:

Heatmap._renderer._clear ();

3. Reset the canvas size

Before it was:

Heatmap.set ("width", w); Heatmap.set ("height", h); Heatmap.store.get ("Heatmap"). Resize ();

Now instead:

Heatmap._renderer.setdimensions (W, h);

v2.0 Official document translation

Below is the official document of Heatmap.js v2.0 I translated. The level is limited, if there are omissions or errors please correct me.

Priority ordering of API functions:

Red: The most commonly used function;-) 　 Green: For custom implementations 　 　 Blue color : less-used features h337

• Create (Configobject)
• Register (Pluginkey, plugin)

heatmapinstance

• AddData (Object|array)
• SetData (object)
• Setdatamax (number)
• Setdatamin (number)
• Configure (Configobject)
• getValueAt (object)
• GetData ()
• Getdataurl ()
• repaint ()

h337 "h337" is the name of the Heatmap.js registered global object. You can use it to create heatmap instances. H337.create (Configobject) returns a Heatmap instance object heatmapinstance。 Create an Heatmap instance using H337.create. By setting the configuration parameter configobject, you can implement the custom of the Heat force diagram. The configuration parameter configobject is a required parameter.

Configurable properties:

• Container image container (domnode) Required Parameters

It is the DOM node that the thermal image canvas is attached to (the heat map adapts to the size of the node).

• backgroundcolor background color (string) optional parameter

The background color string can be 16 encoding, English color name, RGB color.

• gradient Gradient (object) optional parameter

The object that represents the color gradient (syntax: numeric string [0,1]: color string), see the code example.

• radius radius (number) optional parameter

The radius of each thermal point (if the node itself is not specified).

• Opacity Transparency (number) [0,1] Optional parameter default =. 6

The global transparency of the heatmap. The maxopacity and minopacity that were previously set will be overwritten.

• maxopacity Maximum Transparency (number) [0,1] Optional parameters

Heatmap will have the maximum transparency. (Will be overwritten by opacity settings).

• minopacity Minimum Transparency (number) [0,1] optional parameter

The minimum transparency that heatmap will have. (Will be overwritten by opacity settings).

• Onextremachange function callback callback functions

Pass a callback function to receive the extremum change update. is useful for Dom legends.

• Blur Filter Factor (number) [0,1] Optional parameter default = 0.85, applied to all point data. The higher the coefficient, the smoother the gradient, and the default is 0.85.

The filter factor is applied to all hotspot data. The higher the coefficient, the smoother the color gradient.

• Xfield (string) optional parameter default = "X"

The name of the attribute for the hotspot data x coordinate.

• Yfield (string) optional parameter default = "Y"

The property name for the y-coordinate of the hotspot data.

• Valuefield (string) optional parameter default = "Value"

The attribute name of the hotspot data weight value.

Configuring the sample simple configuration and labeling color gradients

var config = {     container:document.getElementById (' Heatmapcontainer '  ),       Ten,     maxopacity:. 5,     0,     Blur:. ; //  var heatmapinstance = h337.create (config);

Custom color gradients

//Create Configuration ObjectvarConfig ={container:document.getElementById (' Heatmapcontainer '), Radius:10, maxopacity:.5, minopacity:0, Blur:.75, gradient: {//enter n keys between 0 and 1 here        //For gradient Color customization'. 5 ': ' Blue ',         '. 8 ': ' Red ',         '. ': ' White '     }};varheatmapinstance = h337.create (config);

The heatmapinstance heat Force example is returned by the H337.create method. The Heat force example has its own internal data store objects and render objects, which you can manipulate data to make the Heat force update (whether it is a local update or a full update as needed). Heatmapinstance.adddata (Object|array) return heatmapinstanceUse this feature only to add data at any time, rather than for data initialization. The AddData method can add data for a single or multiple points to a HEATMAP data store object.

var datapoint = {     //////           /}; Heatmapinstance.adddata (datapoint); //  var datapoints = [Datapoint, Datapoint, Datapoint, Datapoint]; Heatmapinstance.adddata (datapoints);

Heatmapinstance.setdata (object)

Back to heatmapinstance

Initializes the heatmap through the data collection. The three parameters "Min", "Max", and "data" are required. SetData clears all previously stored data from the instance and then re-initializes the Datastore object.

var data = {          0,     data: [         datapoint, Datapoint, Datapoint, Datapoint     ]}; Heatmapinstance.setdata (data);

Heatmapinstance.setdatamax (number) returns heatmapinstanceChanges the upper bound of the data set and triggers a full rendering.

Heatmapinstance.setdatamax ($); //  Heatmapinstance.setdatamax (100);

Heatmapinstance.setdatamin (number)

Return heatmapinstanceChanges the lower bound of the data set and triggers a full render.

Heatmapinstance.setdatamin (ten); //  heatmapinstance.setdatamin (0);

Heatmapinstance.configure (Configobject) return heatmapinstanceReconfigure parameters after the Heatmap instance is initialized. Triggers a full render.

var nuconfig = {     ten,     maxopacity:. 5,     0,     Blur:. ; Heatmapinstance.configure (nuconfig);

Heatmapinstance.getvalueat (object) returns the weight of the thermal point. Note: If the point is not stored, the return value is based on the fill value after the color gradient is blended.

Heatmapinstance.adddata ({x:10, y:10, value:100}); //  //  returns

Heatmapinstance.getdata ()

Returns a persisted and re-loaded JSON object.

var currentdata = heatmapinstance.getdata (); //  var heatmap2 =// now both Heatmap instances has the same content

Heatmapinstance.getdataurl ()

The return value is a base64 encoded Dataurl string.

// saving locally or on the server  

Heatmapinstance.repaint () returns heatmapinstanceRedraw the entire thermal map canvas.

----------------------finished Knot----------------------------------------------------------------------------------------------------------------------

Heatmap.js v1.0 to V2.0, a detailed summary:)