The realization of heat force in openlayers

Overview:

This paper describes how to implement the thermodynamic diagram in openlayers with Heatmap.js.

Heatmap.js Introduction:

Heatmap is used to render statistical measurements within a certain area, and the most common form of Web Access is to display a special highlight of the page area that the visitor is passionate about and the map of the visitor's geographic area. Heatmap.js This JavaScript library enables you to explore and visualize the behavior of your users by implementing a variety of Web pages for dynamic heat attempts.

Implementation results:

Implementation code:

Attachment:
Heatmap-openlayers.js
/* * Heatmap.js openlayers heatmap Class * * Copyright (c), Patrick Wied (http://www.patrick-wied.at) * Dual-license D under the MIT (http://www.opensource.org/licenses/mit-license.php) * and the Beerware (http://en.wikipedia.org/wiki/ Beerware) license. * * Modified on jun,06 by Antonio Santiago (http://www.acuriousanimal.com) *-heatmaps as independent map layer. *-Points based on Openlayers.lonlat. *-Data initialization in constructor. *-Improved ' adddatapoint ' to add new Lonlat based points. */OpenLayers.Layer.Heatmap = Openlayers.class (Openlayers.layer, {//the heatmap isn ' t a basic Layer by Default-you Usua  Lly want to display the heatmap over another map;) isbaselayer:false,heatmap:null,maplayer:null,//we store the Lon Lat Data, because we have to redraw with new positions on Zoomend|moveendtmpdata: {}, Initialize:function (name, map,        Mlayer, Hmoptions, options) {var heatdiv = document.createelement ("div"), handler;    OpenLayers.Layer.prototype.initialize.apply (this, [name, Options]);    Heatdiv.style.cssText = "Position:absolute;width:" +map.size.w+ "Px;height:" +map.size.h+ "PX;";    This would be the Heatmaps element This.div.appendChild (HEATDIV);    Add to our heatmap.js config hmoptions.element = heatdiv;    This.maplayer = Mlayer;            This.map = map;            Create the heatmap with passed heatmap-options This.heatmap = h337.create (hmoptions);                 Handler = function () {if (This.tmpData.max) {this.updatelayer ();    }            }; On Zoomend and MoveEnd we had to move the canvas element and redraw the datapoints with new positions Map.events.re    Gister ("Zoomend", this, handler);        Map.events.register ("MoveEnd", this, handler); },updatelayer:function () {var pixeloffset = This.getpixeloffset (), el = this.heatmap.ge                T (' element '); If the pixeloffset e.g. for XWas positive move the canvas element to the left by setting left:-offset.y px//Otherwise move it the rig HT by setting it a positive value. Same for top el.style.top = ((Pixeloffset.y > 0)? ('                -' +pixeloffset.y '):(Math.Abs (PIXELOFFSET.Y)) + ' px '; El.style.left = ((pixeloffset.x > 0)? ('                -' +pixeloffset.x '):(Math.Abs (pixeloffset.x)) + ' px '; This.setdataset (This.tmpdata);}, Getpixeloffset:function () {var o = This.mapLayer.map.layerContainerO Rigin, O_lonlat = new Openlayers.lonlat (O.lon, O.lat), O_pixel = This.mapLayer.getViewPortPx Fromlonlat (O_lonlat), C = this.mapLayer.map.center, C_lonlat = new Openlayers.lonlat (C.lon,            C.lat), C_pixel = This.mapLayer.getViewPortPxFromLonLat (C_lonlat);        return {x:o_pixel.x-c_pixel.x, y:o_pixel.y-c_pixel.y}; },setdataset:function (obj) {    var set = {},dataset = Obj.data,dlen = dataset.length, entry, Lonlat, Pixel;set.max = Obj.max;set.data                = [];//Get the pixels for all the Lonlat entries while (dlen--) {entry = Dataset[dlen], Lonlat = Entry.lonlat.clone (). Transform (This.projection, This.map.getProjectionObject ()), pixel = th                                    Is.roundpixels (This.getviewportpxfromlonlat (Lonlat));                if (pixel) {Set.data.push ({x:pixel.x, y:pixel.y, count:entry.count});    }} this.tmpdata = obj; This.heatmap.store.setDataSet (set);},//we don ' t want to has decimal numbers such as xxx.9813212 since they slow canvas p            Erformance down + don ' t look niceroundpixels:function (p) {if (p.x < 0 | | P.y < 0) {return false;    } p.x = (p.x >> 0);            P.Y = (p.y >> 0);    Return p;},//same procedure as Setdatasetadddatapoint:function (Lonlat) {var pixel = this.roundpixels (This.mapLayer.getViewPortPxFromLonLat (Lonlat)), entry = {Lonlat:lonlat},            Args            if (arguments.length = = 2) {entry.count = arguments[1];                        } this.tmpData.data.push (entry); if (pixel) {args = [pixel.x, pixel.y];if (arguments.length = = 2) {Args.push (arguments[1]);}    This.heatmap.store.addDataPoint.apply (This.heatmap.store, args);         }},toggle:function () {this.heatmap.toggleDisplay ();},destroy:function () {//For-now, nothing special to does here.      OpenLayers.Layer.Grid.prototype.destroy.apply (this, arguments); },class_name: "OpenLayers.Layer.Heatmap"});






The realization of heat force in openlayers