最近做了热力图方面的工作,学习了很多新的知识,总结一下
使用了openlayers和heatmap.js
OpenLayers.Layer.Heatmap = OpenLayers.Class(OpenLayers.Layer, {
// the heatmap isn't a basic layer by default - you usually 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|moveend
tmpData: {},
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 will be the heatmaps element
this.div.appendChild(heatdiv);
// add to our heatmap.js config
hmoptions.element = heatdiv;
this.mapLayer = mLayer;
this.map = map;
var config = {
container: document.getElementById('map'),
radius: 5,
maxOpacity: .6,
minOpacity: 0,
blur: 1,
gradient: {
'0.45': 'rgb(123,104,238)',
'0.55': 'rgb(0,0,255)',
'0.65': 'rgb(0,255,255)',
'0.95': 'rgb(0,255,0)',
'1.0': 'yellow'
}
};
config.element = heatdiv;
var unconfig = {
container: document.getElementById('map'),
radius: 5,
maxOpacity: .9,
minOpacity: 0,
blur: 1,
gradient: {
'0.45': 'rgb(176,196,222)',
'0.55': 'rgb(123,104,238)',
'0.65': 'rgb(30,144,255)',
'0.95': 'rgb(0,255,255)',
'1.0': 'rgb(127,255,0)'
}
};
unconfig.element = heatdiv;
this.heatmap = h337.create(hmoptions);//创建heatmap handler = function(){ if(this.tmpData.max){ this.updateLayer(); } }; change = function(){ if(this.map.getZoom()==2){ this.heatmap.cleanup(); this.heatmap = h337.create(config); if(this.tmpData.max){ this.updateLayer(); } }else if(this.map.getZoom()<2){ this.heatmap.cleanup(); this.heatmap = h337.create(unconfig); if(this.tmpData.max){ this.updateLayer(); } }else{ this.heatm//定义了三个heatmap的模板