webgis的卷帘效果

首先在页面创建两个div，

<div class="beforeafter contentsShow"  id="contentsShow" οnmοusemοve="RollImage(event)">  

    <div id="after"></div>       <div id="before"> </div>  

</div>

用来装地图，卷帘效果就是用来做对比分析的。

我还写了两个按钮，控制卷帘的开启和关闭，

<input type="button" value="开启卷帘" οnclick="stratJ()"/>   <input type="button" value="取消卷帘" οnclick="cancleJuan()"/>  

css样式：

#after{       position: absolute;       top: 0px;       left: 0px;       width: 940px;       height: 529px;       border:1px solid  black; }   #before{  border:1px solid orange;      position: absolute;       top: 0px;       left: 0px;       border-right: 3px solid #f00;       width: 433px;       height: 529px;       max-width: 940px;   }   .beforeafter{       width: 940px;       height: 529px;   }   #after{       position: absolute;       top: 0px;       left: 0px;       width: 940px;       height: 529px;   }   #before{       position: absolute;       top: 0px;       left: 0px;       border-right: 3px solid #f00;       width: 433px;       height: 529px;       max-width: 940px;   }

js代码如下：

<script type="text/javascript"> function RollImage(evt){       var x=evt.pageX;       console.log(x);       $("#before").css("width",x+"px");   }   $(function(){ require([         "esri/map",         "esri/geometry/Extent",         "esri/layers/ArcGISDynamicMapServiceLayer"       ], function(Map, Extent, ArcGISDynamicMapServiceLayer) { var lods = [             {"levels" : 0, "resolution" : 529.167725, "scale" : 2000000},             {"levels" : 1, "resolution" : 264.583863 ,"scale" : 1000000}           ];    var lodss = [];  var lossplit = [];  $.each(lods,function(i,v){  //分辨率的计算  var resolution = v.scale*0.0254000508/96/111194.872221777;  lodss.push({level:Number(v.levels),resolution:resolution,scale:Number(v.scale)});  lossplit.push('|');  });   var _map1 = new Map("after", {  lods: lods,  slider : false,  fitExtent:true,  autoResize:true,  extent:new Extent({  xmin: Number("3.9294519939677745E7"),  ymin: Number("2646061.9079604843"),  xmax: Number("3.952662967902225E7"),  ymax: Number("2757467.1434311285"),  spatialReference:"2363"  }),  logo : false //  lods : lodss（对瓦片地图有效） }); var _map2 = new Map("before", {  slider : false,  fitExtent:true,  autoResize:true,  extent:new Extent({  xmin: Number("3.9294519939677745E7"),  ymin: Number("2646061.9079604843"),  xmax: Number("3.952662967902225E7"),  ymax: Number("2757467.1434311285"),  spatialReference:"2363"  }),  logo : false //  lods : lodss（对瓦片地图有效） }); var baseMapLayer = new ArcGISDynamicMapServiceLayer("http://192.168.1.253:6080/arcgis/rest/services/MZGIS/MZXZQ/MapServer"); _map1.addLayer(baseMapLayer); var dblayer=new ArcGISDynamicMapServiceLayer("http://192.168.1.253:6080/arcgis/rest/services/MZGIS/YDBP/MapServer"); _map2.addLayer(dblayer); }); }); //取消卷帘 function cancleJuan(){ var a = document.getElementById('contentsShow');     a.onmouseout = function(){ $("#contentsShow").removeAttr("onmousemove"); }; } //触发卷帘 function stratJ(){    var a = document.getElementById('contentsShow');    a.onmousemove = function(event){ RollImage(event); }; //a.setAttribute('onmousemove',"alert('ss')"); } </script>

这样即可。

//另外还有arcgis自带的卷帘效果，接下来就看看怎么运用：

引入这个"esri/dijit/LayerSwipe",，

接着me.swipeWidget = new LayerSwipe({   type: "vertical",  //类型值有 ： "scope" or "horizontal" or "vertical"   map: me.allMap['_mapDiv']['map'],   layers: [swipeLayer]   }, "swipeDiv"); me.swipeWidget.startup();

取消就调用方法：disable();