javascript - How to dynamically compute the radius for heatmap.js according to the data -
i'm using leafleat , heatmap.js api (the new 2.x version). there trouble setting radius value. i'm trying perform bandwidth selection methods of kernel density , unfavourable result. there reasonable way compute radius according characteristics of spatial distribution data?
the question how dynamically compute appropriate radius or other parameters generate smooth heatmap if distribution badly sparse ?
here demo example:
<script> window.onload = function () { var baselayer = l.tilelayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'copyright © 2015', maxzoom: 22, minzoom: 10 } ); var cfg = { "blur": .85, "maxopacity": .75, "minopacity": 0.02, // scales radius based on map zoom "scaleradius": true, // if set false heatmap uses global maximum colorization // if activated: uses data maximum within current map boundaries // (there red spot uselocalextremas true) "uselocalextrema": true, // field name in data represents latitude - default "lat" latfield: 'lat', // field name in data represents longitude - default "lng" lngfield: 'lng', // field name in data represents data value - default "value" valuefield: 'count' , gradient: { 0.0: "rgba(000,000,255,0)", 0.1: "rgba(000,000,255,1)", 0.2: "rgba(000,255,000,1)", 0.5: "rgba(000,255,000,1)", 0.8: "rgba(255,255,000,1)", 1.0: "rgba(255,000,000,1)" } }; /* legend code */ // want display gradient, have draw var legendcanvas = document.createelement('canvas'); legendcanvas.width = 100; legendcanvas.height = 10; var legendctx = legendcanvas.getcontext('2d'); var gradientcfg = {}; var heatmaplayer = new heatmapoverlay(cfg); var southwest = l.latlng(15.78, 73.5577), northeast = l.latlng(53.56086, 134.7739), bounds = l.latlngbounds(southwest, northeast); var map = new l.map('map_l', { center: new l.latlng(36.105215, 120.384428), zoom: 11, maxbounds: bounds, layers: [baselayer, heatmaplayer] }); function getrandomarbitrary(min, max) { return math.random() * (max - min) + min; } // generate 1000 datapoints // randomly generate extremas var t = []; var iii; (iii = 0; iii < 1000; iii++) { var xx = getrandomarbitrary(119.5, 120.5); var yy = getrandomarbitrary(36, 36.2); var cc = getrandomarbitrary(1, 1000); // btw, can set radius on point basis var rr = getrandomarbitrary(0.001, 0.005); // add dataset t.push({lng: xx, lat: yy, count: cc, radius: rr}); } heatmaplayer.setdata({min: 1, max: 1000, data: t}); }; </script>
Comments
Post a Comment