[cesium] 绘制热力图

Love The Way You Lie 2021-12-10 11:45 1192阅读 0赞

### 效果 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 1][]

## ##

### 代码 ###

/***
       * 热力图
       * @CesiumHeatmap  CesiumHeatmap热力图
       * @CesiumHeatmapGL CesiumHeatmapGL热力图
       * @dataType wfs geojson
       * @version v1
       */
       
     var cesiumHeatMap = (function (){
    	var viewer,heatmap,cacheData;
    	function _(){}
    	_.init = function(param){
    		if(param === null && param === "")return;
    		var t = this;
    		for(var key in param){
    			t[key] = param[key];
    		}
    		this.config();
    	}
    	
    	_.config = function(){
    		var _self = this;
    		try{
    			_self.createtoolbar();
    			var subscribeParameter = function(name) {
    				Cesium.knockout.getObservable(viewModel, name).subscribe(
    					function(newValue) {
    						_self.controller({key:name,value:newValue});
    					}
    				);
    			}
    			var viewModel = {
    				alpha : 1
    			};
    			Cesium.knockout.track(viewModel);
    			var toolbar = document.getElementById('toolbar');
    			Cesium.knockout.applyBindings(viewModel, toolbar);
    			subscribeParameter('alpha');
    		 } catch (error) {
    			console.log(error);
    		}
    	}
    	_.build = function(param){
    		var t = this;heatmap = null,cacheData = null;
    		switch(param.handleType){
    			 case "CesiumHeatmap":{ 
                if (heatmap == null) {
                   heatmap = new CesiumHeatmap(t.viewer, param.datas)
                };
                break; 
            }
            default:{
    			  if (heatmap == null) {
    				heatmap = new CesiumHeatmapGL(t.viewer, param.datas)
    			  };
    			}
    		}
    		cacheData = param.datas;
    		return heatmap;
    	}
    	_.switch = function(type){
    		if(cacheData == null )return;
    		var t = this;
    		try{
    			t.show(2);
    			if("heatmap" == type){
    				 heatmap = new CesiumHeatmap(t.viewer, cacheData)
    			}else{
    				 heatmap = new CesiumHeatmapGL(t.viewer,cacheData)
    			}
    		}catch(e){
    			console.log(e);
    		}
    		return heatmap;
    	}
    	_.controller = function(obj){
    		heatmap.multiply(obj.value);
    	}
    	_.remove = function(){
    		heatmap.clear();
    	}
    	_.show = function(n){
    		if(n === 1){
    			heatmap.show();
    		}else{
    			heatmap.none();
    		}
    	}
    	_.createtoolbar = function (){
                var toolbar = 
                '<div id="toolbar">'+
    			'<select class="cesium-button" onchange="cesiumHeatMap.switch(this.value);"><option value="heatmapGl">heatmapGl</option><option value="heatmap">heatmap</option></select>'+
                '<table>'+
                    '<tbody>'+
                   '<tr>'+
                   '<td>alpha</td>'+
                    '<td>'+
                        '<input type="range" min="0.1" max="2" step="0.1" data-bind="value: alpha, valueUpdate: "input" ">'+
                        '<input type="text" size="2" data-bind="value: alpha">'+
                    '</td>'+
                        '</tr>'+
                '</table>'+
    			'<button type="button" class="cesium-button" onclick="cesiumHeatMap.show(1);">显示</button>'+
    			 '<button type="button" class="cesium-button" onclick="cesiumHeatMap.show(2);">隐藏</button>'+
                '</div>';
                $("#toolbar").remove();
                $("body").append(toolbar);
                $("#toolbar").css("background","rgba(42, 42, 42, 0.8)").css("padding","4px;").css("border-radius", "4px");
                $("#toolbar input").css("vertical-align","middle").css("padding-top","2px").css("padding-bottom","2px");
            }
        return _;	 
     })();

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70]: /images/20211210/5bfa25842de147ff9d4a5adf32375ff3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 1]: /images/20211210/ef73f44a7630407299d3146fde7b13bd.png