第二十章 影像改变色值

1.初始化影像

initmap:function(){
		var options=new Object();
		options.layers="ak_tzhb:tong";
		options.url="http://localhost:8080/geoserver_tzhb/ak_tzhb/wms";
		options.CQL_FILTER="1=1";
		
		var GeoServer=null;
		var GeoServerHand=null;
		
		ak_hy_map.GeoServer = new Cesium.WebMapServiceImageryProvider({
			url:  options.url,
			layers: options.layers, //LOUDONGDIAN	XIAOQUDIAN xiaoqumian kunming_houses jiayouzhan84
			parameters: {
				service: 'WMS',
				format: 'image/png',
				transparent: true,
				'CQL_FILTER': options.CQL_FILTER, 
			}
		});
		 ak_hy_map.gjareaPointHand = viewer.imageryLayers.addImageryProvider(ak_hy_map.GeoServer);
		 ak_hy_map.gjareaPointHand.alpha = 1;
		 ak_hy_map.gjareaPointHand.brightness = 1;  //最大值为1,表示最大亮度。最小值为0,
		 ak_hy_map.gjareaPointHand.contrast = 1.0;   //小值通常为0,表示无对比度;最大值通常为2,表示具有最大对比度。
		 ak_hy_map.gjareaPointHand.gamma = 1.0;  //一般取正实数值,最小值可以接近0,最大值没有明确的上限。伽马值越大,图像的亮度范围会更广。
		 ak_hy_map.gjareaPointHand.hue = 0.0;   //的取值范围一般为0到360度。色调值为0表示红色,60表示黄色,120表示绿色,以此类推。
		 ak_hy_map.gjareaPointHand.saturation = 1; //的最小值一般为0,表示无饱和度;最大值一般为1,表示具有最大饱和度。
		 
		   
	},

影像初始会有默认色值

  ak_hy_map.gjareaPointHand = viewer.imageryLayers.addImageryProvider(ak_hy_map.GeoServer);
ak_hy_map.gjareaPointHand.alpha = 1;
ak_hy_map.gjareaPointHand.brightness = 1;  //最大值为1,表示最大亮度。最小值为0,
ak_hy_map.gjareaPointHand.contrast = 1.0;   //小值通常为0,表示无对比度;最大值通常为2,表示具有最大对比度。
ak_hy_map.gjareaPointHand.gamma = 1.0;  //一般取正实数值,最小值可以接近0,最大值没有明确的上限。伽马值越大,图像的亮度范围会更广。
ak_hy_map.gjareaPointHand.hue = 0.0;   //的取值范围一般为0到360度。色调值为0表示红色,60表示黄色,120表示绿色,以此类推。
ak_hy_map.gjareaPointHand.saturation = 1; //的最小值一般为0,表示无饱和度;最大值一般为1,表示具有最大饱和度。

2.监听色值改变

changeRangeApath()监听以下滚动条的值的改变

changeRangeApath: function() {
		var that = this;
		$("#tmd_comm_panel").show();
		// onchange事件
		$("#tmd_comm_range").change(function() {
			var apath = Number($("#tmd_comm_range").val());
			console.log(apath);
			ak_hy_map.apath = apath;
			if (ak_hy_map.apath == 1) {
				clearInterval(ak_hy_map.intvAnation);
			}
			
			//ak_hy_map.gjareaPointHand=config.geoserverurl + 'ak_tzhb/wms';
			if (!ak_hy_map.gjareaPointHand) {
				clearInterval(ak_hy_map.intvAnation);
			} else {
				ak_hy_map.gjareaPointHand.alpha = ak_hy_map.apath;
				$("#buffer_radius_txt").val(ak_hy_map.apath);
			}
		});
		// oninput事件
		let $input = $("#tmd_comm_range");
		$input.on("input", function(e) {
			var apath = Number($("#tmd_comm_range").val());
			console.log(apath);
			ak_hy_map.apath = apath;
			// if(ak_hy_map.apath == 1) {
			// 	clearInterval(ak_hy_map.intvAnation);
			// }
			if (!ak_hy_map.gjareaPointHand) {
				clearInterval(ak_hy_map.intvAnation);
			} else {
				ak_hy_map.gjareaPointHand.alpha = ak_hy_map.apath;
			}
		});
		/亮度
		$("#tmd_comm_brightness").change(function() {
			var brightness = Number($("#tmd_comm_brightness").val());
			console.log(brightness);
			ak_hy_map.brightness = brightness;
			if (ak_hy_map.brightness == 1) {
				clearInterval(ak_hy_map.intvAnation);
			}
			
			//ak_hy_map.gjareaPointHand=config.geoserverurl + 'ak_tzhb/wms';
			if (!ak_hy_map.gjareaPointHand) {
				clearInterval(ak_hy_map.intvAnation);
			} else {
				ak_hy_map.gjareaPointHand.brightness = ak_hy_map.brightness;
				$("#buffer_brightness_txt").val(ak_hy_map.brightness);
			}
		});
		// oninput事件
		let $input_brightness = $("#tmd_comm_brightness");
		$input_brightness.on("input", function(e) {
			var brightness = Number($("#tmd_comm_brightness").val());
			console.log(brightness);
			ak_hy_map.brightness = brightness;
			if (!ak_hy_map.gjareaPointHand) {
				clearInterval(ak_hy_map.intvAnation);
			} else {
				ak_hy_map.gjareaPointHand.brightness = ak_hy_map.brightness;
			}
		});
		//对比度
		$("#tmd_comm_contrast").change(function() {
			var contrast = Number($("#tmd_comm_contrast").val());
			console.log(contrast);
			ak_hy_map.contrast = contrast;
			if (ak_hy_map.contrast == 1) {
				clearInterval(ak_hy_map.intvAnation);
			}
			
			//ak_hy_map.gjareaPointHand=config.geoserverurl + 'ak_tzhb/wms';
			if (!ak_hy_map.gjareaPointHand) {
				clearInterval(ak_hy_map.intvAnation);
			} else {
				ak_hy_map.gjareaPointHand.contrast = ak_hy_map.contrast;
				$("#buffer_contrast_txt").val(ak_hy_map.contrast);
			}
		});
		// oninput事件
		let $input_contrast = $("#tmd_comm_contrast");
		$input_contrast.on("input", function(e) {
			var contrast = Number($("#tmd_comm_contrast").val());
			console.log(contrast);
			ak_hy_map.contrast = contrast;
			if (!ak_hy_map.gjareaPointHand) {
				clearInterval(ak_hy_map.intvAnation);
			} else {
				ak_hy_map.gjareaPointHand.contrast = ak_hy_map.contrast;
			}
		});
		
		//色调
		$("#tmd_comm_hue").change(function() {
			var hue = Number($("#tmd_comm_hue").val());
			console.log(hue);
			ak_hy_map.hue = hue;
			if (ak_hy_map.hue == 1) {
				clearInterval(ak_hy_map.intvAnation);
			}
			
			//ak_hy_map.gjareaPointHand=config.geoserverurl + 'ak_tzhb/wms';
			if (!ak_hy_map.gjareaPointHand) {
				clearInterval(ak_hy_map.intvAnation);
			} else {
				ak_hy_map.gjareaPointHand.hue = ak_hy_map.hue;
				$("#buffer_hue_txt").val(ak_hy_map.hue);
			}
		});
		// oninput事件
		let $input_hue = $("#tmd_comm_hue");
		$input_hue.on("input", function(e) {
			var hue = Number($("#tmd_comm_hue").val());
			console.log(hue);
			ak_hy_map.hue = hue;
			if (!ak_hy_map.gjareaPointHand) {
				clearInterval(ak_hy_map.intvAnation);
			} else {
				ak_hy_map.gjareaPointHand.hue = ak_hy_map.hue;
			}
		});
		
		//gamma
		$("#tmd_comm_gamma").change(function() {
			var gamma = Number($("#tmd_comm_gamma").val());
			console.log(gamma);
			ak_hy_map.gamma = gamma;
			if (ak_hy_map.gamma == 1) {
				clearInterval(ak_hy_map.intvAnation);
			}
			
			//ak_hy_map.gjareaPointHand=config.geoserverurl + 'ak_tzhb/wms';
			if (!ak_hy_map.gjareaPointHand) {
				clearInterval(ak_hy_map.intvAnation);
			} else {
				ak_hy_map.gjareaPointHand.gamma = ak_hy_map.gamma;
				$("#buffer_gamma_txt").val(ak_hy_map.gamma);
			}
		});
		// oninput事件
		let $input_gamma = $("#tmd_comm_gamma");
		$input_gamma.on("input", function(e) {
			var gamma = Number($("#tmd_comm_gamma").val());
			console.log(gamma);
			ak_hy_map.gamma = gamma;
			if (!ak_hy_map.gjareaPointHand) {
				clearInterval(ak_hy_map.intvAnation);
			} else {
				ak_hy_map.gjareaPointHand.gamma = ak_hy_map.gamma;
			}
		});
		
		//gamma
		$("#tmd_comm_saturation").change(function() {
			var saturation = Number($("#tmd_comm_saturation").val());
			console.log(saturation);
			ak_hy_map.saturation = saturation;
			if (ak_hy_map.saturation == 1) {
				clearInterval(ak_hy_map.intvAnation);
			}
			
			//ak_hy_map.gjareaPointHand=config.geoserverurl + 'ak_tzhb/wms';
			if (!ak_hy_map.gjareaPointHand) {
				clearInterval(ak_hy_map.intvAnation);
			} else {
				ak_hy_map.gjareaPointHand.saturation = ak_hy_map.saturation;
				$("#buffer_saturation_txt").val(ak_hy_map.saturation);
			}
		});
		// oninput事件
		let $input_saturation = $("#tmd_comm_saturation");
		$input_saturation.on("input", function(e) {
			var saturation = Number($("#tmd_comm_saturation").val());
			console.log(saturation);
			ak_hy_map.saturation = saturation;
			if (!ak_hy_map.gjareaPointHand) {
				clearInterval(ak_hy_map.intvAnation);
			} else {
				ak_hy_map.gjareaPointHand.saturation = ak_hy_map.saturation;
			}
		});
		$("#area_comm_change").click(function() {
			ak_hy_map.animationEntity(); // 透明度 渐变
		});
		$("#area_comm_change_clear").click(function() {
			ak_hy_map.animationEntityClear();
		});
		
		///亮度
		$("#area_comm_brightness").click(function() {
			ak_hy_map.brightnessEntity(); // 透明度 渐变
		});
		$("#area_comm_brightness_clear").click(function() {
			ak_hy_map.brightnessEntityClear();
		});
		//对比度
		$("#area_comm_contrast").click(function() {
			ak_hy_map.contrastEntity(); // 透明度 渐变
		});
		$("#area_comm_contrast_clear").click(function() {
			ak_hy_map.contrastEntityClear();
		});
		/色调
		$("#area_comm_hue").click(function() {
			ak_hy_map.hueEntity(); // 透明度 渐变
		});
		$("#area_comm_hue_clear").click(function() {
			ak_hy_map.hueEntityClear();
		});
		gamma
		$("#area_comm_gamma").click(function() {
			ak_hy_map.gammaEntity(); // 透明度 渐变
		});
		$("#area_comm_gamma_clear").click(function() {
			ak_hy_map.gammaEntityClear();
		});
		饱和度
		$("#area_comm_saturation").click(function() {
			ak_hy_map.saturationEntity(); // 透明度 渐变
		});
		$("#area_comm_saturation_clear").click(function() {
			ak_hy_map.saturationEntityClear();
		});
	},

3.滚动条自动和恢复默认值

///亮度
	brightness: null,
	brightnessEntity: function() {
		var i = 1;
		var tag = 10;
		$("#tmd_comm_brightness").val(1).trigger('change');
		$("#tmd_comm_brightness").val(1).trigger('input');
		ak_hy_map.brightness = setInterval(function() {
			i = i - 0.05;
			tag = tag - 0.5;
			if (tag > 0) {
				var radius = Number(i);
				$("#tmd_comm_brightness").val(radius).trigger('change');
				$("#tmd_comm_brightness").val(radius).trigger('input');
			} else {
				$("#tmd_comm_brightness").val(1).trigger('change');
				$("#tmd_comm_brightness").val(1).trigger('input');
				clearInterval(ak_hy_map.intvAnation);
			}
		}, 500);
	},
	// 亮度  关闭按钮
	brightnessEntityClear: function() {
		// clearInterval(ak_hy_map.intvAnation);
		// $("#tmd_comm_brightness").val(1).trigger('change');
		// $("#tmd_comm_brightness").val(1).trigger('input');
		// $("#tmd_comm_panel").hide();
		// ak_hy_map.removeGeoServer_sq(); // 关闭 GeoServe 服务
		$("#buffer_brightness_txt").val('1');
		$("#tmd_comm_brightness").val('1');
		ak_hy_map.gjareaPointHand.brightness=1;
	},
	//对比度  contrast
	contrast: null,
	contrastEntity: function() {
		var i = 1;
		var tag = 10;
		$("#tmd_comm_contrast").val(1).trigger('change');
		$("#tmd_comm_contrast").val(1).trigger('input');
		ak_hy_map.contrast = setInterval(function() {
			i = i - 0.05;
			tag = tag - 0.5;
			if (tag > 0) {
				var radius = Number(i);
				$("#tmd_comm_contrast").val(radius).trigger('change');
				$("#tmd_comm_contrast").val(radius).trigger('input');
			} else {
				$("#tmd_comm_contrast").val(1).trigger('change');
				$("#tmd_comm_contrast").val(1).trigger('input');
				clearInterval(ak_hy_map.contrast);
			}
		}, 500);
	},
	// 对比度  关闭按钮
	contrastEntityClear: function() {
		// clearInterval(ak_hy_map.contrast);
		// $("#tmd_comm_contrast").val(1).trigger('change');
		// $("#tmd_comm_contrast").val(1).trigger('input');
		// $("#tmd_comm_panel").hide();
		// ak_hy_map.removeGeoServer_sq(); // 关闭 GeoServe 服务
		$("#buffer_contrast_txt").val('1');
		$("#tmd_comm_contrast").val('1');
		ak_hy_map.gjareaPointHand.contrast=1;
	},
	/色调   hue
	hue: null,
	hueEntity: function() {
		var i = 1;
		var tag = 10;
		$("#tmd_comm_hue").val(1).trigger('change');
		$("#tmd_comm_hue").val(1).trigger('input');
		ak_hy_map.hue = setInterval(function() {
			i = i - 0.05;
			tag = tag - 0.5;
			if (tag > 0) {
				var radius = Number(i);
				$("#tmd_comm_hue").val(radius).trigger('change');
				$("#tmd_comm_hue").val(radius).trigger('input');
			} else {
				$("#tmd_comm_hue").val(1).trigger('change');
				$("#tmd_comm_hue").val(1).trigger('input');
				clearInterval(ak_hy_map.hue);
			}
		}, 500);
	},
	// 色调  关闭按钮
	hueEntityClear: function() {
		// clearInterval(ak_hy_map.hue);
		// $("#tmd_comm_hue").val(1).trigger('change');
		// $("#tmd_comm_hue").val(1).trigger('input');
		// $("#tmd_comm_panel").hide();
		// ak_hy_map.removeGeoServer_sq(); // 关闭 GeoServe 服务
		$("#buffer_hue_txt").val('0');
		$("#tmd_comm_hue").val('0');
		ak_hy_map.gjareaPointHand.hue=0;
	},
	gamma  gamma
	gamma: null,
	gammaEntity: function() {
		var i = 1;
		var tag = 10;
		$("#tmd_comm_gamma").val(1).trigger('change');
		$("#tmd_comm_gamma").val(1).trigger('input');
		ak_hy_map.gamma = setInterval(function() {
			i = i - 0.05;
			tag = tag - 0.5;
			if (tag > 0) {
				var radius = Number(i);
				$("#tmd_comm_gamma").val(radius).trigger('change');
				$("#tmd_comm_gamma").val(radius).trigger('input');
			} else {
				$("#tmd_comm_gamma").val(1).trigger('change');
				$("#tmd_comm_gamma").val(1).trigger('input');
				clearInterval(ak_hy_map.gamma);
			}
		}, 500);
	},
	// gamma  关闭按钮
	gammaEntityClear: function() {
		$("#buffer_gamma_txt").val('1');
		$("#tmd_comm_gamma").val('1');
		ak_hy_map.gjareaPointHand.gamma=1;
	},
	饱和度  saturation
	saturation: null,
	saturationEntity: function() {
		var i = 1;
		var tag = 10;
		$("#tmd_comm_saturation").val(1).trigger('change');
		$("#tmd_comm_saturation").val(1).trigger('input');
		ak_hy_map.saturation = setInterval(function() {
			i = i - 0.05;
			tag = tag - 0.5;
			if (tag > 0) {
				var radius = Number(i);
				$("#tmd_comm_saturation").val(radius).trigger('change');
				$("#tmd_comm_saturation").val(radius).trigger('input');
			} else {
				$("#tmd_comm_saturation").val(1).trigger('change');
				$("#tmd_comm_saturation").val(1).trigger('input');
				clearInterval(ak_hy_map.saturationEntity);
			}
		}, 500);
	},
	// 饱和度 关闭按钮
	saturationEntityClear: function() {
		$("#buffer_saturation_txt").val('1');
		$("#tmd_comm_saturation").val('1');
		ak_hy_map.gjareaPointHand.saturation=1;
	},
	
	// /透明度 渐变
	intvAnation: null,
	animationEntity: function() {
		var i = 1;
		var tag = 10;
		$("#tmd_comm_range").val(1).trigger('change');
		$("#tmd_comm_range").val(1).trigger('input');
		ak_hy_map.intvAnation = setInterval(function() {
			i = i - 0.05;
			tag = tag - 0.5;
			if (tag > 0) {
				var radius = Number(i);
				$("#tmd_comm_range").val(radius).trigger('change');
				$("#tmd_comm_range").val(radius).trigger('input');
			} else {
				$("#tmd_comm_range").val(1).trigger('change');
				$("#tmd_comm_range").val(1).trigger('input');
				clearInterval(ak_hy_map.intvAnation);
			}
		}, 500);
	},
	// 渐变  关闭按钮
	animationEntityClear: function() {
		$("#buffer_range_txt").val('1');
		$("#tmd_comm_range").val('1');
		ak_hy_map.gjareaPointHand.alpha=1;
	},

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

akglobe

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值