修改selectToUISlider实现历史影像的对比与显示

2014年12月7日，星期日，天气，晴，是个好日子，闲来无事，将selectToUISlider与Arcgis for JS结合起来，做了一个类似于历史影像对比的东西，共享出来给大家，希望对大家有所帮助。

首先，看看实现的效果：



初始化状态



在实例中，因为没有实际的做好的影像的切片，就用这个代替了，在实际实现的过程中可根据自己的实际需求去修改。

接下来，讲讲我的实现思路。

想要实现历史影像的对比，需要考虑以下两点问题：

1、数据源。

一般来说，为了操作方便，同时也为了展示方便，很多人的解决思路是直接用tif或者JPG的图片作为数据源。这种方式可以展示出变化，但是脱离了地图。

2、存储方式

直接用图片作为数据源的时候，你的数据怎么存储？文件的形式还是入库？当为地图服务的时候，切片？

有了数据源和存储方式，我们就可以继续讨论怎么实现了。在本文中是通过切片的方式做的，选择切片，原因有：1、能够与地图紧密的结合起来去展示；2、切片提高数据的访问效率与速度。

影像之间的切换是先将原来的图层remove掉，再重新实例化图层，再添加到map中去。

关键代码：

1、selectToUISlider.jQuery.js

jQuery.fn.selectToUISlider = function(settings){
var selects = jQuery(this);

//accessible slider options
var options = jQuery.extend({
labels: 3, //number of visible labels
tooltip: true, //show tooltips, boolean
tooltipSrc: 'text',//accepts 'value' as well
labelSrc: 'value',//accepts 'value' as well	,
sliderOptions: null,
step:1,
selectshow:true,
orientation:"horizontal",
baseUrl:""
}, settings);

//handle ID attrs - selects each need IDs for handles to find them
var handleIds = (function(){
var tempArr = [];
selects.each(function(){
tempArr.push('handle_'+jQuery(this).attr('id'));
});
return tempArr;
})();

//array of all option elements in select element (ignores optgroups)
var selectOptions = (function(){
var opts = [];
selects.eq(0).find('option').each(function(){
opts.push({
value: jQuery(this).attr('value'),
text: jQuery(this).text()
});
});
return opts;
})();

//array of opt groups if present
var groups = (function(){
if(selects.eq(0).find('optgroup').size()>0){
var groupedData = [];
selects.eq(0).find('optgroup').each(function(i){
groupedData[i] = {};
groupedData[i].label = jQuery(this).attr('label');
groupedData[i].options = [];
jQuery(this).find('option').each(function(){
groupedData[i].options.push({text: jQuery(this).text(), value: jQuery(this).attr('value')});
});
});
return groupedData;
}
else return null;
})();

//check if obj is array
function isArray(obj) {
return obj.constructor == Array;
}
//return tooltip text from option index
function ttText(optIndex){
return selectOptions[optIndex].text;
}

<strong>function changeMap(optIndex){
require([
"esri/layers/FeatureLayer"
],
function(FeatureLayer){
map.removeLayer(fch);
var fchUrl  = options.baseUrl+selectOptions[optIndex].value;
fch = new FeatureLayer(fchUrl);
map.addLayer(fch);
});
}</strong>
//plugin-generated slider options (can be overridden)
var sliderOptions = {
step: options.step,
min: 0,
orientation: options.orientation,
max: selectOptions.length-1,
range: selects.length > 1,//multiple select elements = true
slide: function(e, ui) {//slide function
var thisHandle = jQuery(ui.handle);
//handle feedback
var textval = ttText(ui.value);
thisHandle
.attr('aria-valuetext', textval)
.attr('aria-valuenow', ui.value)
.find('.ui-slider-tooltip .ttContent')
.text( textval );

//control original select menu
var currSelect = jQuery('#' + thisHandle.attr('id').split('handle_')[1]);
currSelect.find('option').eq(ui.value).attr('selected', 'selected');
<strong>changeMap(ui.value);</strong>
},
values: (function(){
var values = [];
selects.each(function(){
values.push( jQuery(this).get(0).selectedIndex );
});
return values;
})()
};

//slider options from settings
options.sliderOptions = (settings) ? jQuery.extend(sliderOptions, settings.sliderOptions) : sliderOptions;

//select element change event
selects.bind('change keyup click', function(){
var thisIndex = jQuery(this).get(0).selectedIndex;
var thisHandle = jQuery('#handle_'+ jQuery(this).attr('id'));
var handleIndex = thisHandle.data('handleNum');
thisHandle.parents('.ui-slider:eq(0)').slider("values", handleIndex, thisIndex);
});

//create slider component div
var sliderComponent = jQuery('<div></div>');

//CREATE HANDLES
selects.each(function(i){
var hidett = '';

//associate label for ARIA
var thisLabel = jQuery('label[for=' + jQuery(this).attr('id') +']');
//labelled by aria doesn't seem to work on slider handle. Using title attr as backup
var labelText = (thisLabel.size()>0) ? 'Slider control for '+ thisLabel.text()+'' : '';
var thisLabelId = thisLabel.attr('id') || thisLabel.attr('id', 'label_'+handleIds[i]).attr('id');

if( options.tooltip == false ){hidett = ' style="display: none;"';}
jQuery('<a '+
'href="#" tabindex="0" '+
'id="'+handleIds[i]+'" '+
'class="ui-slider-handle" '+
'role="slider" '+
'aria-labelledby="'+thisLabelId+'" '+
'aria-valuemin="'+options.sliderOptions.min+'" '+
'aria-valuemax="'+options.sliderOptions.max+'" '+
'aria-valuenow="'+options.sliderOptions.values[i]+'" '+
'aria-valuetext="'+ttText(options.sliderOptions.values[i])+'" '+
'><span class="screenReaderContext">'+labelText+'</span>'+
'<span class="ui-slider-tooltip ui-widget-content ui-corner-all"'+ hidett +'><span class="ttContent"></span>'+
'<span class="ui-tooltip-pointer-down ui-widget-content"><span class="ui-tooltip-pointer-down-inner"></span></span>'+
'</span></a>')
.data('handleNum',i)
.appendTo(sliderComponent);
});

//CREATE SCALE AND TICS

//write dl if there are optgroups
if(groups) {
var inc = 0;
var scale = sliderComponent.append('<dl class="ui-slider-scale ui-helper-reset" role="presentation"></dl>').find('.ui-slider-scale:eq(0)');
jQuery(groups).each(function(h){
scale.append('<dt style="width: '+ (100/groups.length).toFixed(2) +'%' +'; left:'+ (h/(groups.length-1) * 100).toFixed(2)  +'%' +'"><span>'+this.label+'</span></dt>');//class name becomes camelCased label
var groupOpts = this.options;
jQuery(this.options).each(function(i){
var style = (inc == selectOptions.length-1 || inc == 0) ? 'style="display: none;"' : '' ;
var labelText = (options.labelSrc == 'text') ? groupOpts[i].text : groupOpts[i].value;
scale.append('<dd style="left:'+ leftVal(inc) +'"><span class="ui-slider-label">'+ labelText +'</span><span class="ui-slider-tic ui-widget-content"'+ style +'></span></dd>');
inc++;
});
});
}
//write ol
else {
var scale = sliderComponent.append('<ol class="ui-slider-scale ui-helper-reset" role="presentation"></ol>').find('.ui-slider-scale:eq(0)');
jQuery(selectOptions).each(function(i){
var style = (i == selectOptions.length-1 || i == 0) ? 'style="display: none;"' : '' ;
var labelText = (options.labelSrc == 'text') ? this.text : this.value;
scale.append('<li style="left:'+ leftVal(i) +'"><span class="ui-slider-label">'+ labelText +'</span><span class="ui-slider-tic ui-widget-content"'+ style +'></span></li>');
});
}

function leftVal(i){
return (i/(selectOptions.length-1) * 100).toFixed(2)  +'%';

}
function onChange(value){
ttText(value);
}

//show and hide labels depending on labels pref
//show the last one if there are more than 1 specified
if(options.labels > 1) sliderComponent.find('.ui-slider-scale li:last span.ui-slider-label, .ui-slider-scale dd:last span.ui-slider-label').addClass('ui-slider-label-show');

//set increment
var increm = Math.max(1, Math.round(selectOptions.length / options.labels));
//show em based on inc
for(var j=0; j<selectOptions.length; j+=increm){
if((selectOptions.length - j) > increm){//don't show if it's too close to the end label
sliderComponent.find('.ui-slider-scale li:eq('+ j +') span.ui-slider-label, .ui-slider-scale dd:eq('+ j +') span.ui-slider-label').addClass('ui-slider-label-show');
}
}

//style the dt's
sliderComponent.find('.ui-slider-scale dt').each(function(i){
jQuery(this).css({
'left': ((100 /( groups.length))*i).toFixed(2) + '%'
});
});

//inject and return
sliderComponent
.insertAfter(jQuery(this).eq(this.length-1))
.slider(options.sliderOptions)
.attr('role','application')
.find('.ui-slider-label')
.each(function(){
jQuery(this).css('marginLeft', -jQuery(this).width()/2);
});

//update tooltip arrow inner color
sliderComponent.find('.ui-tooltip-pointer-down-inner').each(function(){
var bWidth = jQuery('.ui-tooltip-pointer-down-inner').css('borderTopWidth');
var bColor = jQuery(this).parents('.ui-slider-tooltip').css('backgroundColor')
jQuery(this).css('border-top', bWidth+' solid '+bColor);
});

var values = sliderComponent.slider('values');

if(isArray(values)){
jQuery(values).each(function(i){
sliderComponent.find('.ui-slider-tooltip .ttContent').eq(i).text( ttText(this) );
});
}
else {
sliderComponent.find('.ui-slider-tooltip .ttContent').eq(0).text( ttText(values) );
}
if(!options.selectshow){
this.css("display","none");
}
return this;
}

代码中，加粗的为重点代码。

2、map.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title></title>
<link rel="stylesheet" href="jquery-slider/css/redmond/jquery-ui-1.7.1.custom.css" type="text/css" />
<link rel="Stylesheet" href="jquery-slider/css/ui.slider.extras.css" type="text/css" />
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
<style type="text/css">
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
font-size: 62.5%;
font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
}
fieldset {
background: #fff;
border:0;
margin: 0em 4em;
height: 4em;
}
label {
font-weight: normal;
float: left;
margin-right: .5em;
font-size: 1.1em;
}
select {
margin-right: 1em;
float: left;
}
</style>
<script src="jquery-slider/jquery-1.8.3.js"></script>
<script src="jquery-slider/jquery-ui-1.7.1.custom.min.js"></script>
<script src="jquery-slider/selectToUISlider.jQuery.js"></script>
<script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
<script type="text/javascript">
var map, fch;
require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/geometry/Point",
"dojo/domReady!"],
function(Map,
Tiled,
FeatureLayer,
Point)
{
map = new Map("map",{logo:false});
var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/image/MapServer");
map.addLayer(tiled);
var mapCenter = new Point(103.847, 36.0473, map.spatialReference);
map.centerAndZoom(mapCenter,4);
<strong> map.on("load",function(){
fch = new FeatureLayer("http://localhost:6080/arcgis/rest/services/china/MapServer/6");
map.addLayer(fch);
$('select#layers').selectToUISlider({
labels:6,
tooltip:true,
step:1,
selectshow:false,
baseUrl:"http://localhost:6080/arcgis/rest/services/china/MapServer/",
orientation:"horizontal"//vertical,horizontal
});
});</strong>
});
</script>
</head>
<body>
<div id="map">
<div style="position: absolute; bottom: 0px; left:35%; width: 600px;z-index: 99;">
<strong><fieldset>
<select name="layers" id="layers">
<optgroup label="省级">
<option value="6">省会城市</option>
<option value="0">省级行政区</option>
</optgroup>
<optgroup label="市级">
<option value="4">地级市</option>
<option value="1">地州界</option>
</optgroup>
<optgroup label="县级">
<option value="3">县城驻地</option>
<option value="2">市县界</option>
</optgroup>
</select>
</fieldset></strong>
</div>
</div>
</body>
</html>

在本实例中由于数据的关系是通过FeatureLayer来实现的，你可以通过ArcGISTiledMapServiceLayer来实现。

如有疑问，请联系：

QQ：1004740957

Email：niujp08@qq.com

加我或者来邮件请说明来意，谢谢！