热力图制作过程与心得

最新推荐文章于 2025-06-09 09:43:23 发布

原创

最新推荐文章于 2025-06-09 09:43:23 发布 · 8k 阅读

3 ·

CC 4.0 BY-SA版权

本文分享了作者在制作热力图过程中使用openlayers和heatmap.js的心得体会，概述了相关技术的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做了热力图方面的工作，学习了很多新的知识，总结一下

使用了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;

//定义了三个heatmap的模板

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.heatmap.cleanup(); this.heatmap = h337.create(hmoptions); if(this.tmpData.max){ thi