[cesium] 繪製熱力圖

效果

 

 

代碼

  /***
   * 熱力圖
   * @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 _;	 
 })();