首页 > 代码库 > 修改selectToUISlider实现历史影像的对比与显示

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

2024-08-06 16:09:07   221人阅读

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 = http://www.mamicode.com/[];>代码中，加粗的为重点代码。
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=http://www.mamicode.com/"jquery-slider/css/redmond/jquery-ui-1.7.1.custom.css" type="text/css" />>在本实例中由于数据的关系是通过FeatureLayer来实现的，你可以通过ArcGISTiledMapServiceLayer来实现。

如有疑问，请联系：
QQ：1004740957
Email：niujp08@qq.com
加我或者来邮件请说明来意，谢谢！

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


联系
我们