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;
},