webgis的卷帘效果

首先在页面创建两个div，

<div class="beforeafter contentsShow"  id="contentsShow" onmousemove="RollImage(event)">  

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

</div>

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

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

<input type="button" value="开启卷帘" onclick="stratJ()"/>  
<input type="button" value="取消卷帘" onclick="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();